Πώς να δημιουργήσετε το "Look" για την εφαρμογή σας Android με Java

Μια γενική κατευθυντήρια γραμμή στην ανάπτυξη εφαρμογών Android σας λέει να χωρίσετε τη λογική από την παρουσίαση. Σε λιγότερους τεχνικούς όρους, η κατευθυντήρια οδηγία προειδοποιεί να μην συγχέεται τι κάνει μια εφαρμογή με τον τρόπο εμφάνισης μιας εφαρμογής. Η κατευθυντήρια γραμμή εφαρμόζεται σε πολλές πτυχές της ζωής. Για παράδειγμα, αν σχεδιάζετε έναν ιστότοπο, οι καλλιτέχνες κάνουν τη διάταξη και οι κωδικοποιητές έχουν κωδικούς. Αν γράφετε μια αναφορά, πάρτε πρώτα τις ιδέες. Αργότερα, μπορείτε να ανησυχείτε για τις γραμματοσειρές και τα στυλ παραγράφων.

Η βιβλιογραφία για την ανάπτυξη εφαρμογών περιγράφει συγκεκριμένες τεχνικές και πλαίσια που θα σας βοηθήσουν να ξεχωρίσετε τη μορφή από τη λειτουργία.

Για να προσθέσετε κουμπιά, κουτάκια και άλλα καλούδια στην εφαρμογή σας, κάντε τα εξής:

1. Εκκινήστε το Android Studio και ξεκινήστε ένα νέο έργο. Όταν τελειώσετε με αυτά τα βήματα, έχετε ένα ολοκαίνουργιο έργο με κενή δραστηριότητα. Το έργο εμφανίζεται στο κύριο παράθυρο του Android Studio.
2. Στο υποκατάστημα app / res / layout του νέου έργου (στο παράθυρο εργαλείου έργου του κύριου παραθύρου), κάντε διπλό κλικ στο activity_main. xml . Ως αποτέλεσμα, το εργαλείο σχεδιαστή Android Studio εμφανίζει τα περιεχόμενα του activity_main. xml . Το εργαλείο σχεδιαστή έχει δύο λειτουργίες: Λειτουργία σχεδίασης για οπτική επεξεργασία drag-and-drop και λειτουργία κειμένου για επεξεργασία κώδικα XML. Έτσι, το κάτω μέρος του εργαλείου Designer έχει δύο καρτέλες: μια καρτέλα Design και μια καρτέλα Text.
3. Κάντε κλικ στην καρτέλα Σχεδίαση.

   

   Στην κατάσταση σχεδίασης, βλέπετε την παλέτα, το δομικό στοιχείο, δύο οθόνες προεπισκόπησης και το παράθυρο Ιδιότητες.

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

   Το δέντρο συνιστωσών έχει έναν κλάδο με την ένδειξη TextView - "Hello World! " Αυτό το υποκατάστημα αντιπροσωπεύει το κείμενο Hello World! που εμφανίζεται αυτόματα ως μέρος της εφαρμογής σας. Δεν χρειάζεστε αυτό το κείμενο στην εφαρμογή σας.

4. Επιλέξτε το κλάδο TextView - "Hello World!" στο δέντρο συνιστωσών και στη συνέχεια πατήστε Διαγραφή. Ο κλάδος "Hello World" εξαφανίζεται από το δέντρο συστατικών και οι λέξεις Hello World! εξαφανίζονται από την οθόνη προεπισκόπησης.

   Τα επόμενα μερικά βήματα σας καθοδηγούν στη δημιουργία της εφαρμογής.

   

   Η διάταξη της εφαρμογής έχει τρία διαφορετικά είδη εξαρτημάτων και κάθε είδος εξαρτήματος περνάει από πολλά διαφορετικά ονόματα. Εδώ είναι τα τρία είδη στοιχείων:
   • EditText (επίσης γνωστό ως Απλό κείμενο): Ένα μέρος όπου ο χρήστης μπορεί να επεξεργαστεί μια ενιαία γραμμή κειμένου. Ένα κοινό όνομα για αυτό το είδος εξαρτήματος είναι ένα πεδίο κειμένου.
   • Κουμπί : Ένα κουμπί είναι ένα κουμπί που είναι ένα κουμπί. Θέλετε να κάνετε κλικ στο κουμπί; Πηγαίνετε μπροστά και κάντε κλικ.
   • TextView (επίσης γνωστό ως απλό κείμενο, μεγάλο κείμενο, μεσαίο κείμενο κλπ.): Ένα μέρος όπου η εφαρμογή εμφανίζει κείμενο. Κανονικά, ο χρήστης δεν επεξεργάζεται το κείμενο σε ένα στοιχείο TextView .

     Για να είμαστε οδυνηρά ακριβείς, τα στοιχεία EditText , Button και TextView της Android δεν είναι πραγματικά διαφορετικά είδη εξαρτημάτων. Κάθε στοιχείο EditText είναι ένα είδος TextView και κάθε κουμπί είναι επίσης ένα είδος TextView . Στη γλώσσα του αντικειμενοστρεφούς προγραμματισμού, η κλάση EditText επεκτείνει την κλάση TextView . Η κλάση Κουμπί επεκτείνει επίσης την κλάση TextView .

5. Σύρετε ένα απλό κείμενο (δηλαδή, EditText ) από την ομάδα Widgets της παλέτας σε οποιαδήποτε από τις οθόνες προεπισκόπησης. Το στοιχείο απλού κειμένου μπορεί να προσγειωθεί σε ένα άσχημο σημείο. Είναι εντάξει. Δεν δημιουργείτε ένα έργο τέχνης. Μάθετε να γράφετε κώδικα Java.
6. Επαναλάβετε το βήμα 5, αυτή τη φορά βάζοντας ένα στοιχείο Κουμπιού στην οθόνη προεπισκόπησης. Τοποθετήστε το στοιχείο Κουμπί κάτω από το στοιχείο Απλό κείμενο (EditText). Αργότερα, αν δεν σας αρέσει το σημείο στο οποίο βάζετε το στοιχείο Κουμπί, μπορείτε να το μετακινήσετε εύκολα σύροντάς το αλλού στην οθόνη προεπισκόπησης.
7. Επαναλάβετε το βήμα 6, αυτή τη φορά βάζοντας ένα στοιχείο TextView στην οθόνη προεπισκόπησης. Τοποθετήστε το στοιχείο TextView κάτω από το στοιχείο Button , αλλά για άλλη μια φορά εξαρτάται από εσάς.

   Στα υπόλοιπα βήματα, αλλάζετε το κείμενο που εμφανίζεται σε κάθε στοιχείο.

8. Επιλέξτε το στοιχείο Κουμπί στην οθόνη προεπισκόπησης ή στο δέντρο συνιστωσών. Ως αποτέλεσμα, στο παράθυρο Ιδιότητες του εργαλείου σχεδιαστή εμφανίζονται μερικές από τις ιδιότητες του στοιχείου Κουμπιού.

   

   Αφού επιλέξετε το στοιχείο Κουμπί , μπορείτε να δείτε τη λέξη TextView στο παράθυρο Ιδιότητες. Μην μπερδέψετε αυτό το στοιχείο με το στοιχείο TextView που σύρετε από την παλέτα στο Βήμα 7. Με το επιλεγμένο κουμπί, όλα τα πεδία στο παράθυρο Ιδιότητες αναφέρουν το στοιχείο Button . Εάν η εμφάνιση της λέξης TextView στο παράθυρο Ιδιότητες σας προκαλεί σύγχυση, ανατρέξτε στο εικονίδιο Technical Stuff στο βήμα 4. (Εάν η λέξη TextView δεν σας συγχέει, μην κάνετε να διαβάσετε το εικονίδιο Technical Stuff!)
9. Στο παράθυρο Ιδιότητες, στο πεδίο με τίτλο κείμενο πληκτρολογήστε τη λέξη COPY. Όταν το κάνετε, η λέξη COPY εμφανίζεται στην επιφάνεια του στοιχείου . Μπορείτε να ελέγξετε αυτό κοιτάζοντας την οθόνη προεπισκόπησης wysiwyg.

   Στο παράθυρο Ιδιότητες, μπορεί να δείτε δύο πεδία με τίτλο κείμενο. Αν ναι, το ένα είναι για δοκιμή και το άλλο για την εκτέλεση της εφαρμογής. Όταν αμφιβάλλετε, δεν βλάπτει να πληκτρολογήσετε τη λέξη COPY και στα δύο αυτά πεδία.

10. Επαναλάβετε τα βήματα 8 και 9 με τα στοιχεία EditText και TextView της δραστηριότητάς σας, αλλά αυτή τη φορά μην τοποθετείτε τη λέξη COPY σε αυτά τα στοιχεία. Αντ 'αυτού, αφαιρέστε τους χαρακτήρες από αυτά τα στοιχεία.Όταν τελειώσετε, οι οθόνες προεπισκόπησης μοιάζουν με τις παρακάτω οθόνες. Εάν οι οθόνες προεπισκόπησης δεν φαίνονται ακριβώς όπως αυτό, μην ανησυχείτε γι 'αυτό. Τα εξαρτήματά σας ενδέχεται να είναι διάσπαρτα σε διαφορετικά μέρη στις οθόνες προεπισκόπησης ή οι δημιουργοί του Android Studio μπορεί να έχουν αλλάξει τον τρόπο εμφάνισης των οθονών προεπισκόπησης. Εφόσον διαθέτετε ένα στοιχείο EditText , ένα στοιχείο Κουμπί και ένα στοιχείο TextView , είστε εντάξει.
11. Επιλέξτε Αρχείο → Αποθήκευση όλων για να αποθηκεύσετε τη δουλειά σας μέχρι τώρα.