Εφαρμογή υπολογισμού φιλοδωρήματος

Μέγεθος: px

Εμφάνιση ξεκινά από τη σελίδα:

Download "Εφαρμογή υπολογισμού φιλοδωρήματος"

Δημόκριτος Παπαστεφάνου
6 χρόνια πριν
Προβολές:

Κάθε κελί μέσα σε ένα GridLayout μπορεί να είναι κενό ή μπορεί να περιέχει ή μπορεί να

1 Εφαρμογή υπολογισμού φιλοδωρήματος Η εφαρμογή αυτή χρησιμοποιεί ένα GridLayout ώστε να διατάξει προβολές σε 5 γραμμές και δύο στήλες. Κάθε κελί μέσα σε ένα GridLayout μπορεί να είναι κενό ή μπορεί να περιέχει ή μπορεί να περιέχει μία ή περισσότερες προβολές, περιλαμβανομένων και διατάξεων, οι οποίες περιέχουν και άλλες προβολές Σελίδα 1 από 20

2 Επιλέγουμε empty activity Στον κατάλογο mipmap-xxdpi προσθέτουμε τα εικονίδια: Σελίδα 2 από 20

3 Στο activity_main.xml αλλάζουμε σε GridLayout και αφαιρούμε το /> Ορίζουμε τις ιδιότητες του GridLayout Σελίδα 3 από 20

4 Μετά το ορισμό, οι ιδιότητες του GridLayout θα είναι οι εξής: Σελίδα 4 από 20

Προσθήκη προβολών στην πρώτη γραμμή o Η πρώτη γραμμή αποτελείται από το amounttextview στην πρώτη στήλη και το amountedittext πίσω από το displaytextview στη δεύτερη στήλη Εισάγουμε

5 Προσθήκη προβολών στην πρώτη γραμμή o Η πρώτη γραμμή αποτελείται από το amounttextview στην πρώτη στήλη και το amountedittext πίσω από το displaytextview στη δεύτερη στήλη Εισάγουμε ένα Medium TextView (amounttextview) και ένα EditText (amountedittextview) στο GridLayout Σημ. Τα layoutcolumn και layoutrow χωρίς τιμές Στο Component_Tree Στα Properties Σελίδα 5 από 20

Μετά τον ορισμό, οι ιδιότητες του amounttextview θα είναι οι εξής: android:text="@string/amount" android:id="@+id/amounttextview" android:layout_gravity="right center_vertical"

6 Μετά τον ορισμό, οι ιδιότητες του amounttextview θα είναι οι εξής: android:layout_gravity="right center_vertical" android:singleline="true" android:layout_row="0" android:layout_column="0" /> Ορίζουμε τις ιδιότητες του amountedittext (inputtype = Number) Σελίδα 6 από 20

Μετά τον ορισμό, οι ιδιότητες του amountedittext θα είναι οι εξής <EditText android:inputtype="number" android:ems="10" android:id="@+id/amountedittext" android:layout_row="0"

7 Μετά τον ορισμό, οι ιδιότητες του amountedittext θα είναι οι εξής <EditText android:inputtype="number" android:ems="10" android:layout_row="0" android:layout_column="1" android:maxlength="6" android:digits=" " /> Εισάγουμε ένα TextView ( amountdisplaytextview ) στο GridLayout (πίσω από αυτό βρίσκεται το amounttextedit) Σελίδα 7 από 20

8 Μετά τον ορισμό, οι ιδιότητες του amoundisplaytextview είναι: Σελίδα 8 από 20

android:text="medium Text" android:id="@+id/amountdisplaytextview" android:layout_row="0"

android:clickable="false" android:padding="@dimen/textview_padding"

9 android:text="medium Text" android:layout_row="0" android:layout_column="1" android:clickable="false" android:layout_gravity="fill_horizontal" /> Προσθήκη προβολών στη δεύτερη γραμμή Ορίζουμε τις ιδιότητες του custompercenttextview: Σελίδα 9 από 20

Μετά τον ορισμό, οι ιδιότητες του custompercenttextview

android:labelfor="@+id/customtipseekbar"

10 Μετά τον ορισμό, οι ιδιότητες του custompercenttextview είναι: android:gravity="left center_vertical" android:layout_row="1" android:layout_column="0" /> Ορισμός ιδιοτήτων customseektipbar (Seekbar): Σελίδα 10 από 20

Μετά τον ορισμό, οι ιδιότητες του customseekbar είναι οι εξής: <SeekBar android:id="@+id/customtipseekbar"

11 Μετά τον ορισμό, οι ιδιότητες του customseekbar είναι οι εξής: <SeekBar android:layout_row="1" android:layout_column="1" android:layout_gravity="fill_horizontal" android:progress="18" android:max="30" /> Σελίδα 11 από 20

Η οθόνη μετά την προσθήκη του Seekbar Προσθήκη προβολών στην Τρίτη γραμμή Στο GridLayout, προσθέτουμε ένα LinearLayout (το ονομάζουμε percentlinearlayout) Για να τοποθετήσουμε το percentlinearlayout

12 Η οθόνη μετά την προσθήκη του Seekbar Προσθήκη προβολών στην Τρίτη γραμμή Στο GridLayout, προσθέτουμε ένα LinearLayout (το ονομάζουμε percentlinearlayout) Για να τοποθετήσουμε το percentlinearlayout μέσα στη 2η στήλη του GridLayout θέτουμε layout:column = 1 Θέτουμε τις παραμέτρους layout: width και height = wrap content (πρέπει να είναι αρκετά μεγάλο ώστε να χωρά στο περιεχόμενό του καθώς και layout:gravity = fill_horizontal για να καταλαμβάνει όλον τον οριζόντιο χώρο Σελίδα 12 από 20

13 Εντός του percentlayout τοποθετούμε 2 TextView Σελίδα 13 από 20

H Ιδιότητα weight καθορίζει την σημαντικότητα της διάταξης μιας προβολής σε σχέση με άλλες προβολές οπότε πρέπει να έχει το ίδιο μέγεθος (1) H Ιδιότητα

xml αρχείο η εικόνα είναι η εξής: < android:layout_height="match_parent" android:text="@string/fifteen_percent" android:id="@+id/textview"

14 H Ιδιότητα weight καθορίζει την σημαντικότητα της διάταξης μιας προβολής σε σχέση με άλλες προβολές οπότε πρέπει να έχει το ίδιο μέγεθος (1) H Ιδιότητα fill_horizontal = δηλώνει ότι η διάταξη καταλαμβάνει τον υπόλοιπο χώρο στην ίδια γραμμή ορίζω gravity="center για να κεντράρω το κείμενο Στο.xml αρχείο η εικόνα είναι η εξής: < android:layout_height="match_parent" android:text="@string/fifteen_percent" android:id="@+id/textview" android:gravity="fill_horizontal" android:layout_weight="1" android:layout_gravity="center" /> Ομοίως προσθέτουμε το δεύτερο textview Στο αρχείο.xml android:layout_height="match_parent" Σελίδα 14 από 20

15 android:layout_weight="1" android:layout_gravity="center" android:gravity="fill_horizontal" /> Η εικόνα του LinearLayout έχει ως εξής: <LinearLayout android:orientation="horizontal" android:layout_column="1" android:layout_gravity="fill_horizontal" android:layout_row="2"> android:layout_height="match_parent" android:gravity="fill_horizontal" android:layout_weight="1" android:layout_gravity="center" /> android:layout_height="match_parent" android:layout_weight="1" android:layout_gravity="center" android:gravity="fill_horizontal" /> </LinearLayout> Προσθήκη προβολών στην τέταρτη γραμμή Προσθέτουμε ένα Medium TextView (tiptextview) και ένα Linear Layout Horizontal (tiplinearlayout) στον κόμβο GridLayout. Σελίδα 15 από 20

16 Στη συνέχεια, μεταφέρουμε δύο Medium TextView (tip15textview και tipcustomtextview) Επάνω στον κόμβο tiplinearlayout Παραμετροποίηση των tip15textview και tipcustomtextview Σε κάθε ένα από αυτά κάνουμε τις παρακάτω ενέργειες: 1. Επιλέγουμε το TextView 2. Διαγράφουμε την τιμή του Text θα την θέσουμε προγραμματιστικά 3. Θέτουμε το Background 4. Θέτουμε τη Gravity της διάταξης σε center 5. Θέτουμε το weight της διαταξης σε 1 6. Θέτουμε τη Gravity του ΤextView σε center 7. Θέτουμε το Padding του Textview Παρατηρούμε ότι δεν υπάρχει κενός χώρος ανάμεσα στα δύο TextView. Για να το διορθώσουμε αυτό, καθορίζουμε ένα δεξί περιθώριο 8dp στο tip15textview (Properties -> layout:margin -> right -> 8dp) Προσθήκη προβολών στην πέμπτη γραμμή Προσθέτουμε ένα Medium TextView (totaltextview) και ένα Linear Layout Horizontal (totallinearlayout) στον κόμβο GridLayout. Στη συνέχεια, μεταφέρουμε δύο Medium TextView (total15textview και totalcustomtextview) επάνω στον κόμβο totallinearlayout Παραμετροποίηση των total15textview και totalcustomtextview o Εκτελούμε τις ενέργειες 1-7 της ανωτέρω παραμετροποίησης Kαθορίζουμε ένα δεξί περιθώριο 8dp στο total15textview όπως ανωτέρω Κατακόρυφο κεντράρισμα των tiptextview και totaltextview και των άλλων προβολών o Τροποποιούμε το Gravity της διάταξής τους σε right center_vertical Όταν γίνει αυτό για το totaltextview το GridLayout κεντράρει αυτό το συστατικό κατακόρυφα από την πέμπτη γραμμή μέχρι το κάτω μέρος της οθόνης. Για να διορθώσουμε αυτό το πρόβλημα, μεταφέρουμε μία προβολή Space (μέσα στην ενότητα Expert της Palette) επάνω στο GridLayout μέσα στο παράθυρο Component Tree Η τελική έκδοση του αρχείου activity_main.xml έχει ως εξής: Σελίδα 16 από 20

17 <?xml version="1.0" encoding="utf-8"?> <GridLayout xmlns:android=" xmlns:tools=" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".mainactivity" android:usedefaultmargins="true"> android:layout_gravity="right center_vertical" android:singleline="true" android:layout_row="0" android:layout_column="0" /> <EditText android:inputtype="number" android:ems="10" android:layout_row="0" android:layout_column="1" android:maxlength="6" android:digits=" " android:contextclickable="false" /> android:layout_row="0" android:layout_column="1" android:layout_gravity="fill_horizontal" /> android:gravity="right center_vertical" android:layout_row="1" android:layout_column="0" /> <SeekBar Σελίδα 17 από 20

18 android:layout_row="1" android:layout_column="1" android:layout_gravity="fill_horizontal" android:progress="18" android:max="30" /> <LinearLayout android:orientation="horizontal" android:layout_column="1" android:layout_gravity="fill_horizontal" android:layout_row="2"> android:layout_height="match_parent" android:gravity="center" android:layout_weight="1" android:layout_gravity="center" /> android:layout_height="match_parent" android:layout_weight="1" android:layout_gravity="center" android:gravity="center" /> </LinearLayout> android:layout_row="3" android:layout_column="0" android:layout_gravity="center_vertical right" /> <LinearLayout android:orientation="horizontal" android:layout_column="1" android:layout_gravity="fill_horizontal" android:layout_row="3" android:gravity="center"> android:layout_weight="1" Σελίδα 18 από 20

19 android:gravity="center" /> android:layout_weight="1" android:gravity="center" /> </LinearLayout> android:layout_row="4" android:layout_column="0" android:layout_gravity="center_vertical right" /> <LinearLayout android:orientation="horizontal" android:layout_column="1" android:layout_gravity="fill_horizontal" android:layout_row="4" android:gravity="center"> android:layout_weight="1" android:gravity="center" /> android:layout_weight="1" android:gravity="center" /> </LinearLayout> <Space android:layout_height="match_parent" android:layout_row="5" android:layout_column="1" /> </GridLayout> Σελίδα 19 από 20

20 Και η τελική μορφή της ΓΔΧ Σελίδα 20 από 20

Σχετικά έγγραφα

Γι αυτό το λόγο όπως έχει ήδη αναφερθεί, εκτός από την προβολή Design, υπάρχει η προβολή Text όπου μπορείτε να δείτε σε xml το layout.

Γι αυτό το λόγο όπως έχει ήδη αναφερθεί, εκτός από την προβολή Design, υπάρχει η προβολή Text όπου μπορείτε να δείτε σε xml το layout. 3.1 Layouts Ένα από τα πιο tricky πράγματα του Android Studio είναι το πώς θα προσαρμόσετε το Layout της εφαρμογής σας στις πραγματικές σας ανάγκες, κι όχι στο πώς θα σας το φτιάξει όπως «νομίζει» το πρόγραμμα.