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

Transcript

1 3.1 Layouts Ένα από τα πιο tricky πράγματα του Android Studio είναι το πώς θα προσαρμόσετε το Layout της εφαρμογής σας στις πραγματικές σας ανάγκες, κι όχι στο πώς θα σας το φτιάξει όπως «νομίζει» το πρόγραμμα. Γι αυτό το λόγο όπως έχει ήδη αναφερθεί, εκτός από την προβολή Design, υπάρχει η προβολή Text όπου μπορείτε να δείτε σε xml το layout. Η γλώσσα που γράφουμε είναι XML και μπορούμε να ορίσουμε όλα τα attributes από κάθε ένα widget (component), να μπει το ένα μέσα στο άλλο (όπως στο Component Tree), να ορίσουμε και το σημείο στο χώρο κλπ. Αναλυτικός οδηγός για το layout υπάρχει εδώ Μανώλης Τσικνάκης, Αλέξανδρος Ρονιώτης, Ευαγγελία Μανιαδή Ηράκλειο 2016

2 Πολλαπλές οθόνες Δυνατότητα αλλαγής την προεπισκόπηση της διάταξης (layout preview) όταν είμαστε στο design mode Πρέπει να ελέγχουμε όλες τις διαμορφώσεις οθόνης που υποστηρίζει η εφαρμογή μας για να βεβαιωθούμε ότι εμφανίζονται σωστά. Οι κατηγορίες πυκνότητας οθόνης στο Android είναι: ldpi (low-density dots per inch): Περίπου 120 dpi mdpi (medium-density dots per inch): Περίπου 160 dpi hdpi (high-density dots per inch): Περίπου 240 dpi xhdpi (extra-high-density dots per inch): Περίπου 320 dpi xxhdpi (extra-extra-high-density dots per inch): Περίπου 480 dpi Δυνατότητα αλλαγής του προσανατολισμού της συσκευής μέσω του layout state option στη γραμμή εργαλείων. Αν δεν εμφανίζεται σωστά, δημιουργούμε παραλλαγή: Κλικ στο πρώτο εικονίδιο του toolbar configuration option και επιλέγουμε Create Landscape Variation: ανοίγει νέο layout στο editor/src/main/res/layout-land/activity_main.xml και χρησιμοποιεί το ίδιο όνομα με το portrait layout Κάνουμε τις αλλαγές σύμφωνα με τον προσανατολισμό landscape Παρομοίως μπορούμε να δημιουργήσουμε παραλλαγή του layout για υπερμεγέθεις οθόνες Επιλέγουμε Create layout-xlarge Variation Σελίδα 2

3 Παρουσίαση όλων των οθονών μαζί Στο Android Studio 2.1 για να δούμε πολλαπλές διαμορφώσεις συσκευών ταυτόχρονα, στην γραμμή εργαλείων επιλέγουμε την configuration option Preview All Screen Sizes. Για να δούμε τα πιο σημαντικά μεγέθη οθονών επιλέγουμε configuration option Preview Representative Sample. Σελίδα 3

4 Στο Android Studio 2.2 αυτή η δυνατότητα δεν υπάρχει, αλλά μπορείτε να προσαρμοσετε τη συσκευή σας όπως παρακάτω Relative Layout Ο πιο συνηθισμένος τύπος Layout είναι το relativelayout, το οποίο είναι και αυτό που έχει εφαρμογή του Hello World. Εδώ η θέση των components είναι σε σχέση (relation) με τη θέση των άλλων components και των ορίων του layout. Έτσι μπορούμε να βάλουμε κάτι κάτω από κάτι άλλο, στο κέντρο της οθόνης, στις γωνίες, κλπ. Σελίδα 4

5 Linear Layout Αυτό το Layout είναι ιδανικό όταν θέλουμε να τοποθετήσουμε κάποια components, όπως κουμπιά, εικόνες, κλπ στη σειρά (horizontal) ή σε στήλη (vertical). Στο παρακάτω παράδειγμα έχουμε βάλει τρία κουμπιά μέσα σε ένα horizontal Linear Layout (το οποίο με τη σειρά του βρίσκεται μέσα σε ένα RelativeLayout. Τα κουμπιά εμφανίζονται στη σειρά. <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android=" xmlns:tools=" tools:context="gr.digiexplore.myapplication.mainactivity"> <TextView android:text="hello World!" /> <LinearLayout android:orientation="horizontal" android:layout_centervertical="true" android:layout_centerhorizontal="true"> android:text="button" android:text="button" android:text="button" </LinearLayout> </RelativeLayout> Σελίδα 5

6 άσκηση 1 Με τη χρήση των Linear Layouts, προσπαθήστε να αναπαράγετε το παρακάτω layout: Λύση (πριν τη δείτε προσπαθήστε να τη λύσετε μόνοι σας) <RelativeLayout xmlns:android=" xmlns:tools=" android:id="@+id/activity_main" android:paddingbottom="@dimen/activity_vertical_margin" android:paddingleft="@dimen/activity_horizontal_margin" android:paddingright="@dimen/activity_horizontal_margin" android:paddingtop="@dimen/activity_vertical_margin" tools:context="gr.digiexplore.myapplication.mainactivity"> Σελίδα 6 <TextView android:text="hello World!" /> <LinearLayout android:orientation="vertical" android:layout_centervertical="true" android:layout_centerhorizontal="true"> <LinearLayout android:orientation="horizontal"

7 android:layout_centervertical="true" android:layout_centerhorizontal="true"> android:text="κουμπί 1" android:text="κουμπί 2" android:text="κουμπί 3" </LinearLayout> <LinearLayout android:orientation="horizontal" android:layout_centervertical="true" android:layout_centerhorizontal="true"> android:text="κουμπί 4" android:text="κουμπί 5" </LinearLayout> </LinearLayout> </RelativeLayout> Σελίδα 7

8 Grid Layout Το τελευταίο Layout που θα αναφέρουμε είναι το Grid Layout, το οποίο μπορεί να προσαρμοστεί στις ανάγκες σας στις περισσότερες από τις εφαρμογές σας. Το παρακάτω παράγει την διπλανή εικόνα <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android=" xmlns:tools=" tools:context="gr.digiexplore.myapplication.mainactivity"> <GridLayout android:layout_alignparenttop="true" android:layout_alignparentstart="true"> android:text="button 1" android:layout_row="0" /> android:text="button 2" android:layout_column="1" android:layout_row="0" /> android:text="button 3" android:layout_row="1" /> android:text="button 4" android:layout_column="1" android:layout_row="1" /> android:text="button 5" android:layout_row="2" android:layout_columnspan="2" /> </GridLayout> </RelativeLayout> Εδώ παρατηρήστε τις παρακάτω ιδιότητες για κάθε ένα από τα Button Σελίδα 8

9 android:layout_column Η στήλη στο grid που θα μπει το κουμπί (η πρώτη είναι η 0, η δεύτερη η 1, κλπ) android:layout_row Η γραμμή που μπαίνει το κουμπί android:layout_columnspan και android:layout_rowspan Ο αριθμός των στηλών -columns (και των γραμμών -rows) που καταλαμβάνει ένα κουμπί (δείτε το κουμπί 5 που καταλαμβάνει δύο στήλες) android:layout_columnweight και android:layout_rowweight Το βάρος που έχει ως προς τη στήλη και τη γραμμή. Αν π.χ. δύο κουμπιά βρίσκονται στην 1 η στήλη και έχει το ένα βάρος 2 και το 2 ο βάρος 1, τότε το πρώτο κουμπί θα πιάνει τα 2/3 της στήλης και το 2 ο το 1/3. Πειραματιστείτε για να το δείτε στην πράξη. Αν υπάρχει αυτή η ιδιότητα, τότε το κουμπί πιάνει όλο το πλάτος και ύψος του χώρου που βρίσκεται. Παρατηρήστε στο παραπάνω παράδειγμα μόνο το κουμπί 4 δεν το έχει και γιαυτό δεν πιάνει όλο το χώρο του. άσκηση 2 Με τη χρήση ενός Grid Layout, προσπαθήστε να αναπαράγετε το παρακάτω layout: Σελίδα 9

10 Λύση (πριν τη δείτε προσπαθήστε να τη λύσετε μόνοι σας) <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android=" xmlns:tools=" tools:context="gr.digiexplore.myapplication.mainactivity"> <GridLayout android:layout_alignparenttop="true" android:layout_alignparentstart="true"> Σελίδα 10 android:text="button 1" android:layout_row="0" android:layout_columnspan="2" /> android:text="button 2" android:layout_column="2" android:layout_row="0" /> android:text="button 3" android:layout_row="1" /> android:text="button 4" android:layout_column="1" android:layout_row="1" android:layout_rowspan="2" /> android:text="button 5" android:layout_column="2" android:layout_row="1" /> android:text="button 6" android:layout_row="2" /> android:text="button 7" android:layout_column="2"

11 </GridLayout> </RelativeLayout> android:layout_row="2" /> Σελίδα 11