Android - Πως να παιζει η εφαρμογη μου σε όλες τις αναλύσεις οθόνης

[tazos87]

Φτιάχνω τη 1η μου εφαρμογή, πως μπορώ να τη φτιάξω έστι ωστε να δουλεύει σε διαφορετικές αναλύσεις?

 

Αν π.χ πάρω μια εικόνα hdp 480x800 και τη μετατρέψω σε 320x480 mdp και 240x320 ldp αντίστοιχα, μετά τις βάλω στον φάκελο res "drawable-hdp" , "drawable mdp" κλπ....τότε θα παίζουν κανονικά?

 

Επίσης αυτές οι αναλύσεις ισχύουν
 

• xlarge screens are at least 960dp x 720dp
• large screens are at least 640dp x 480dp
• normal screens are at least 470dp x 320dp
• small screens are at least 426dp x 320dp

ή αυτές που ανέφερα?

 

Κάτι τελευταίο: Τι γίνεται με εικονίδια/κουμπιά που έχω φτιάξει? Πως καθορίζεται το μεγεθος τους σε σχέση με το background 480χ800, 320χ480 κλπ..?

 

Υ.Γ: Αν χρειάζεστε κατι απο xml πείτε μου.

[ALLisCHAOS]

Καλό διάβασμα
Site: Developers android

[Directx]

Συμφωνώ με τον ALLisCHAOS, το θέμα χρειάζεται ενασχόληση (μελέτη κλπ)..

 

Από εκεί και πέρα..

 

Γενικά, το Android με βάση την φυσική ανάλυση της οθόνης της συσκευής σου, επιλέγει το πλησιέστερο σε ανάλυση resource από τα δηλωμένα περιεχόμενα του φακέλου res.

Διαφορετικά, αν δεν υπάρχει κάποιο δηλωμένο resource δηλαδή για την φυσική ανάλυση της οθόνης, δοκιμάζει να προσαρμόσει (scale) στις διαστάσεις της το πλησιέστερο προς αυτήν – με μέτρια (συνήθως) οπτικά αποτελέσματα.

Σε περίπτωση δε, που επιθυμείς το drawable σου να μην προσαρμοστεί αυτόματα από το Android στην φυσική ανάλυση της οθόνης σου, αρκεί να το δηλώσεις στον φάκελο drawable-nodpi (αν θυμάμαι καλά).

 

Όσον αφορά την σχεδίαση του UI σου με τέτοιο τρόπο ώστε να λειτουργεί σωστά σε διάφορες αναλύσεις και προσανατολισμούς σύμμαχος σου είναι καταρχήν ο σχεδιαστής Layout του ADT που επιτρέπει preview του Layout σου σε διάφορες διαστάσεις και προσανατολισμούς, η χρήση dp (αντί pixels) όταν δηλώνεις διαστάσεις (ή περιθώρια κλπ) στα controls του layout σου (όπως και sp όταν δουλεύεις με φόντους), τα ίδια τα layout-container που προσφέρει το λειτουργικό αναλαμβάνοντας αυτόματα το re-flow των controls με βάση τους κανόνες που ορίζεις (δες για παράδειγμα το RelativeLayout container) και τέλος η δυνατότητα (στην χειρότερη περίπτωση) να ορίσεις πολλαπλές εκδοχές του ίδιου layout για διαφορετικές αναλύσεις ή προσανατολισμούς. Τέλος, αν η χρήση του Android emulator στον Η/Υ σου είναι ρεαλιστικά εφικτή (δηλαδή δεν «σέρνεται» -έχεις πολύ γρήγορη CPU με υποστήριξη Virtualization κλπ) μπορείς να δημιουργήσεις μια σειρά από εικονικές συσκευές με διάφορες αναλύσεις ώστε να εκτιμήσεις την εμφάνιση του UI σου σε αυτές τις «συσκευές» (ο emulator από την εμπειρία μου, υπήρξε αρκετά αξιόπιστος στο θέμα αυτό).

 

Να θυμάσαι πάντως ότι η ανάπτυξη universal UI στο Android είναι μεν εφικτή αλλά η ποικιλία στις διαθέσιμες αναλύσεις (φυσικό μέγεθος, dpi κλπ) απαιτεί επιμονή και πειραματισμούς μέχρι να προκύψει αν όχι το επιθυμητό, τουλάχιστον ένα αποδεκτό (στην εμφάνιση) αποτέλεσμα.

 

 

Υ.Γ.

Φυσικά το θέμα των διαστάσεων δεν εξαντλείται μόνο στην σχεδίαση των layout μέσω του UI designer αλλά και στον τρόπο που παράγεις / σχεδιάζεις δυναμικό περιεχόμενο (εικόνες, drawables κλπ) μέσω κώδικα αλλά αυτό είναι ένα άλλο θέμα.

 

 

Καλή συνέχεια.

[tazos87]

Εχω διαβάσει από το Android Supporting Multiple Screens  αλλά ίσως κάτι δεν κατάλαβα καλά. 

Εφτιαξα background image για κάθε drawable folder:

240x320 in drawable-ldpi 

320x480 in drawable-mdpi,

480x800 in drawable-hdpi,

640x960 in drawable-xhdpi και

1200x1920 in drawable-xxhpdi. 

 

Εχω επισυνάψει 3 εικόνες για να δείτε...
Η εφαρμογή εμφανίζεται καλά στις παρακάτω αναλύσεις (μεσω emulator): 

768x1280 xhdpi - 4.7'' 
480x800 hdpi - 4.0'' 
240x432 ldpi - 3.4'' 
1080x1920 xxhdpi - 4.95'' (Nexus 5) και
320x480 mdpi - 3.2'' 

 

Δεν εμφανίζεται καλά στις: 

480x800 mdpi - 5.1'' και
1200x1920 xhdpi - 7'' καθώς έχει κενό λίγο κάτω από τη μέση της οθόνης εως κάτω. 

και  
240x320 ldpi - 2.7'' το κουμπί εμφανίζεται στο κάτω μέρος της οθόνης(σχεδόν γίνεται cropped) 

Η background image Εμφανίζεται καλά κατά τα άλλα. Εχω layout_width="wrap_content" και layout_height="wrap_content" για το κουμπί.

 

Βοήθεια κάποιος!

 

 

Υ.Γ: Με τη σειρά που εμφανίζονται τα συννημένα:
1η αυτή που έχει περιθώριο, 2η η "κανονική" και 3η που το κουμπί ειναι πολύ κάτω,σχεδόν crop
 

[ALLisCHAOS]

Οι εικόνες που έχεις βάλει ειναι αυτά τα buttons? Αν ναι γιατί δε βάζεις απλά ένα button στο xml και να κάνεις μάυρο το background

android:background="#000000"

και μετά άσπρο το text color:

android:textColor="#ffffff"

[tazos87]

Οι εικόνες που έβαλα είναι παράδειγμα,όχι η ίδια η εφαρμογή,ίδια κατα τα άλλα..

Εχω και ένα background...το οποίο έχω βάλει στους φακέλους που ανεφερα (σε διαφορετικό μέγεθος το καθένα).

Οτι περιγράφω δλδ πάνω είναι για το background.

 

Απλά ενω το 480χ800 σε hdpi δείχνει μια χαρά, 480χ800 σε mdpi δείχνει με περιθώριο στο κάτω μέρος της οθονης(οπως η πρώτη εικόνα στα συννημενα)

 

(Πλάκα έχει η εφαρμογή σου!  )

[DJ_Duker]

Πέρα από τα διαφορετικά images που θα τοποθετήσεις στους διάφορους φακέλους drawable, ίσως χρειαστεί να κάνεις και διαφορετικά xml αρχεία με το ίδιο όνομα και να τα βάλεις σε αντίστοιχα layout folders. Π.χ. σε άλλο μέγεθος οθόνης ίσως θες τα γράμματα να ναι μεγαλύτερα για να ναι πιο ευανάγνωστα, ίσως κάποιο κενό κάπου αλλού κτλ κτλ.

[tazos87]

Ευχαριστώ!
Στον φακελο layout έχει μεσα τα activity_main και fragment_main.

Εγώ θα φτιαξω δηλαδή μέσα στον res φακελους "layout-hdpi" κλπ?

 

Εκεί δεν ξέρω τι θα κάνω...Φτιάχνω ας πούμε ένα νέο αρχείο xml, το οποίο τι θα έχει μέσα?

Ενα ίδιο fragment_main.xml που θα έχει ακριβώς οτι έχει το βασικό αρχείο και απλά θα αλλάξω το κείμενο πχ που είπες?

 

Υ.Γ: Ηδη έχω φτιάξει ενα XML (μόνο στον φακελο drawable-hdpi ) για το κουμπί ωστε να χρησιμοποιεί άλλη εικόνα όταν κάποιος κάνει "κλικ" πάνω του... Δεν έφτιαξα και για τους υπολοιπους drawable φακελους επειδη έκανα την εικόνα(κουμπι) σε διαφορετική ανάλυση.

 Το θέμα είναι οτι παρόλο που έφτιαξα τις 2 εικόνες με διαφορετική ανάλυση στον αντίστοιχο φάκελο,το κουμπί εμφανίζεται όπως πριν... 

Επεξ/σία 17 Ιουνίου 2014 από tazos87

[ALLisCHAOS]

Με τη δημιουργία 4 διαφορετικών εικόνων με βάση την ανάλυση της κάθε οθόνης δυστηχώς δε μπορούμε να καλύψουμε όλο το έυρος των οθονων που υπάρχουν. Σκέψου ότι μια οθόνη μπορεί να είναι 4' ιντσών και να έχει 300 dpi ένω μια 4' πάλι να έχει 220 dpi. Οπότε εδώ το android θα χρειαστεί να κάνει strech για να το προσαρμόσει στην οθόνη και ίσως έχουμε κ κάποια μη επιθυμητά αποτελέσματα. Λύσεις:
1)κάνεις για κάθε πιθανή ανάλυση ένα νέο image(μάλλον πολύ χρονοβόρο κ κουραστικό).
2)Δημιουργείς ένα 9 patch image. ένα link Site: 9-patch image
Google it και λίγο

PS1: Αυτά έχω καταλάβει έγω για το android design, δε ξέρω αν είναι απολύτως σωστά όσα σου είπα παραπάνω, περίμενε και κάποιον πιο έμπειρο αν θες(@Directx πχ).
 

PS2:

(Πλάκα έχει η εφαρμογή σου!  )

Thank u!

[Directx]

Εχω διαβάσει από το Android Supporting Multiple Screens  αλλά ίσως κάτι δεν κατάλαβα καλά. 5.1'' και

1200x1920 xhdpi - 7'' καθώς έχει κενό λίγο κάτω από τη μέση της οθόνης εως κάτω. 

 

[..]

240x320 ldpi - 2.7'' το κουμπί εμφανίζεται στο κάτω μέρος της οθόνης(σχεδόν γίνεται cropped) 

 

Η background image Εμφανίζεται καλά κατά τα άλλα. Εχω layout_width="wrap_content" και layout_height="wrap_content" για το κουμπί.

 

Βοήθεια κάποιος!

 

 

Υ.Γ: Με τη σειρά που εμφανίζονται τα συννημένα:

1η αυτή που έχει περιθώριο, 2η η "κανονική" και 3η που το κουμπί ειναι πολύ κάτω,σχεδόν crop

Μπορείς να δοκιμάσεις να σηκώσεις λίγο το κοντρόλ "παίζοντας" με τις τιμές (Bottom) των Margins properties του Layout Parameters μερικά dp με βάση το Layout σου.

 

@ALLisCHAOS

+1 για την εφαρμογή σου

[tazos87]

......

Όσον αφορά την σχεδίαση του UI σου με τέτοιο τρόπο ώστε να λειτουργεί σωστά σε διάφορες αναλύσεις και προσανατολισμούς σύμμαχος σου είναι καταρχήν ο σχεδιαστής Layout του ADT που επιτρέπει preview του Layout σου σε διάφορες διαστάσεις και προσανατολισμούς, η χρήση dp (αντί pixels) όταν δηλώνεις διαστάσεις (ή περιθώρια κλπ) στα controls του layout σου (όπως και sp όταν δουλεύεις με φόντους), τα ίδια τα layout-container που προσφέρει το λειτουργικό αναλαμβάνοντας αυτόματα το re-flow των controls με βάση τους κανόνες που ορίζεις (δες για παράδειγμα το RelativeLayout container) και τέλος η δυνατότητα (στην χειρότερη περίπτωση) να ορίσεις πολλαπλές εκδοχές του ίδιου layout για διαφορετικές αναλύσεις ή προσανατολισμούς. 

 

Ευχαριστώ!

 

@Directx: Βασικά έκανα ξεχωριστό φάκελο layout για τις περιπτώσεις που δεν εμφανίζεται καλά και έχω και τον βασικό φάκελο.

Δηλαδή: layout , layout-small-ldpi , layout-small-hdpi , layout-normal-ldpi , και layout-normal-mdpi.... (αυτούς για την ώρα)

 

Το θέμα είναι ότι αντί να διαβάζει σε συσκευη του emulator το "layout-normal-mdpi", διαβάζει το "layout-small-hdpi" !

Και μετά αντί να διαβάζει το βασικό layout (για συσκευή normal-hdpi), διαβάζει το "layout-normal-mdpi"...

 

Τα εμφανίζει καλά...το θέμα είναι οτι έτσι δεν έχω ακριβώς τον έλεγχο!

[Directx]

Από την στιγμή που πέτυχες την σωστή απεικόνιση σε κάθε επιθυμητή ανάλυση δεν νομίζω ότι έχει σημασία πως αποφασίζει το σύστημα να διαχειριστεί τα δηλωμένα layouts, ποιο θα επιλέξει, πως θα το κάνει scale στην φυσική οθόνη & dpi της συσκευής.

 

Αν παρόλα αυτά θες να έχεις ακόμα μεγαλύτερο έλεγχο μπορείς να δηλώσεις πιο συγκεκριμένα layout όπως υποδεικνύεται εδώ (σε παλαιότερες εκδόσεις του ΛΣ μπορούσες να γίνεις ακόμα πιο συγκεκριμένος -αλλά σήμερα είναι deprecated).

 

Γενικά πάντως, προσπάθησε να διατηρείς μικρό αριθμό layouts διότι σε κάθε μελλοντική ενημέρωση του UI της εφαρμογή σου θα πρέπει να ενημερώνεις και όλα τα layouts σου, πράγμα που από ένα σημείο και μετά είναι κουραστικό.

 

Υ.Γ.

Μόλις αποκτήσεις αρκετή εμπειρία με το Android, θα μπεις στο πνεύμα του UI του και σε επόμενες εφαρμογές σου θα διαπιστώσεις ότι πολλές φορές ακόμα και ένα (σωστά στημένο) layout μπορεί να είναι αρκετό.

 

Καλούς πειραματισμούς!

[ALLisCHAOS]

Το 9-patch image το είδες καθόλου? μήπως σε βολέψει?
 

 

@ALLisCHAOS
+1 για την εφαρμογή σου

Thank u :DD

[tazos87]

Ναι, απεικονιζεται καλά όμως έπρεπε να κάνω κάποιες μικροδιορθώσεις ώστε να εμφανίζεται αξιοπρεπώς πχ το layout-small-hdpi και σε κινητό με μικρη οθόνη hdpi και σε κινητό με κανονική οθόνη mdpi (αφού όπως είπα φορτώνει το ίδιο Layout).

Μου φαίνεται προχειροδουλειά έτσι δηλαδή... (καλά,όχι οτι είναι καμιά τρομερή εφαρμογή, απλά για να πάρω λίγη εμπειρία)

 

Θα κάνω δοκιμές και βλέπουμε!

Απλά θα το χρειαστώ αυτό και στο μέλλον φαντάζομαι...

Αυτά. Εις το επανιδείν!

[tazos87]

Βασικα παρατηρησα οτι αφου εκανα layout για ενα-δυο, μετα επρεπε να κανω για ολα...

Πχ ενω ειχα φτιαξει ενα layout-normal-ldpi και η συσκευη που ετρεχε ηταν normal οθονη αλλα hdpi, αντι να χρησιμοποιησει το βασικο layout (η καποιο αλλο που ταιριαζει πιο πολυ) επαιρνε το ldpi υποθετω επειδη ειχε "normal" στο ονομα του φακελου...

 

Κατι παρομοιο εγινε και με αλλους φακελους! Οποτε εφτιαξα διαφορα layout και εκανα δοκιμες σε συσκευες και ολα οκ!

 

Απλα ετσι θα ειναι πιο μεγαλο το μεγεθος της εφαρμογης...(ελπιζω να συμπιεζεται οταν βγαινει στο market)