Ανάπτυξη εφαρμογών Android

Transcript

1 Ανάπτυξη εφαρμογών Android Σημειώσεις βασισμένες στην 'επίσημη' εκπαίδευση της Google από το Udacity και το StackOverflow Ιωάννης Γαβιώτης /6/2017 igaviotis@gmail.com - Ανάπτυξη εφαρμογών Android 1

2 Διαδικασία ανάπτυξης εφαρμογών Android 1 Σχεδίαση Ξεκινάμε σχεδιάζοντας σε χαρτί τη διεπαφή χρήστη (User Interface, UI) της εφαρμογής. Μεταφέρουμε στον υπολογιστή γράφοντας έγγραφο XML με ειδικές ετικέτες. Δοκιμάζουμε το αποτέλεσμα με τον οπτικοποιητή Λεξιλόγιο με εξήγηση των όρων (αγγλικά) developers.google.com/android/for-all/vocab-words/ 2 Προγραμματισμός Προσθέτουμε κώδικα που συνδέεται με συμβάντα του UI και υλοποιεί τη συμπεριφορά της εφαρμογής. Ο κώδικας γράφεται στη γλώσσα προγραμματισμού Java (αργότερα ίσως σε Kotlin). Απαιτείται να έχουμε εγκαταστήσει το περιβάλλον ανάπτυξης Java και το σχετικό πρόγραμμα της Google. (Υπάρχουν και εναλλακτικές.) Μπορεί να βιάζεσαι να λερώσεις τα χέρια σου στον κώδικα, αλλά ξεκίνα σχεδιάζοντας τις οθόνες της εφαρμογής στο χαρτί. 3 Έλεγχος Για να δοκιμάσουμε την εφαρμογή είτε τη στέλνουμε σε ένα κινητό και την εκτελούμε εκεί (γρήγορη εκτέλεση), είτε την εκτελούμε σε ένα προσομοιωτή κινητού που εκτελείται στο περιβάλλον ανάπτυξης (πλήρες debugging). 3/6/2017 igaviotis@gmail.com - Ανάπτυξη εφαρμογών Android 2

3 Σύνδεση συσκευής με υπολογιστή Βήμα 2 Από τις Ρυθμίσεις του κινητού στις "Επιλογές για προγραμματιστές", χρειάζεται να ενεργοποιήσεις "Εντοπισμός σφαλμάτων USB" και αργότερα "Εγκατάσταση μέσω USB". Εγκαθιστώ το (δωρεάν) πρόγραμμα MyPhoneExplorer από που διαχειρίζεται τη σύνδεση PC κινητού μέσω του MPE Client στο Android. Μπορείς να συνδέεσαι ασύρματα μέσω WiFi ή Bluetooth (δίχως καλώδιο USB), συγχρονίζεις κλήσεις, SMS, επαφές, ημερολόγια, κλπ (άχρηστο για εμάς), βλέπεις το σύστημα αρχείων του κινητού κατοπτρίζεις την οθόνη του κινητού στην οθόνη του PC. Βήμα 1 Εγκαθιστώ στο PC το πρόγραμμα διαχείρισης του κινητού ή της ταμπλέτας από τον κατασκευαστή (Xiaomi, Samsung, HTC, κλπ). Έτσι μπαίνουν οι drivers που επιτρέπουν την επικοινωνία PC κινητού. Καρφώνω το USB καλώδιο που συνδέει τις συσκευές. Αν η επικοινωνία είναι OK, το κινητό θα φαίνεται στις συσκευές μέσα στο "Ο υπολογιστής μου". Επίσης, θα αναγνωρίζεται στη "Διαχείριση Συσκευών" (ΔΕΝ πρέπει να υπάρχει κάποιο κίτρινο θαυμαστικό.) 3/6/2017 igaviotis@gmail.com - Ανάπτυξη εφαρμογών Android 3

4 Σχεδίαση όψης κειμένου TextView Όψη (View) είναι μια τετράγωνη περιοχή ορατή πάνω στην οθόνη. Έχει πλάτος (width), ύψος (height) και μερικές φορές χρώμα φόντου (background) και άλλες ιδιότητες. Θα δούμε τρεις βασικούς τύπους όψεων (υπάρχουν δεκάδες): TextView Προβάλει κείμενο. ImageView Προβάλει γραφικά, πχ σχέδιο ή φωτογραφία. Button Είναι μια TextView ευαίσθητη στην αφή: αν πατήσεις πάνω της με το δάκτυλό σου θα αποκριθεί κάνοντας κάτι. Επίσης, υπάρχουν τα ViewGroup (ομάδες όψεων) που είναι πάλι όψεις συχνά αόρατες που περιέχουν και τοποθετούν άλλες όψεις στο εσωτερικό τους. Λεξιλόγιο IDE = Integrated Development Environment = Περιβάλλον ανάπτυξης (Χρησιμοποιείται το Android Studio.) Κώδικας γράφεται σε γλώσσα Java. XML = γλώσσα μαρκαρίσματος Συντακτικό και όροι XML: element, tag, self-closing tags, attribute names & values Ονοματοδοσία camelcase Μονάδες μέτρησης Ξεχάστε εικονοστοιχεία (pixel) και χιλιοστά. Στο Android χρησιμοποιούμε density independent pixel (dp) να μετράμε φυσική διάσταση, πχ 48dp αντιστοιχούν σε ~9mm πραγματικού μεγέθους και ενδείκνυται για περιοχές αφής όπου πρέπει να ακουμπήσει το δάκτυλο.. Με scale independent pixel (sp) μετράμε πραγματικά εικονοστοιχεία της οθόνης. Αυτή τη μονάδα χρησιμοποιούμε για να μετράμε μεγέθη γραμμάτων, πχ 14sp. Σύμφωνα με τις σχεδιαστικές κατευθύνσεις της Google που ονομάζονται Material Design material.io/guidelines/material-design/introduction.html, συνιστάται να χρησιμοποιούμε sp για τα μεγέθη γραμματοσειρών. Όλες οι άλλες μετρήσεις πρέπει να είναι σε dp. Το πλήθος των pixels σε μια οθόνη συγκεκριμένου φυσικού μεγέθους καθορίζει την πυκνότητα pixel της. Πχ μια οθόνη 5.5 ιντσών (4,8in x 2,7in) και full high definition (1920x1080 pixel) έχει πυκνότητα 400ppi. <TextView android:layout_width="230dp" // ή wrap_content android:layout_height="145dp" // ή match_parent android:background="#ff0000" // εδώ κόκκινο, γενικά #RRGGBB android:text="surprise" // το κείμενο που εμφανίζεται android:textcolor="#ffffff" // ξέξασπρο android:textsize="42sp" // ή?android:textappearancemedium /> Στη διεύθυνση developer.android.com/reference θα βρείτε την επίσημη τεκμηρίωση της Google για τον προγραμματισμό εφαρμογών Android. Εκεί θα βρείτε πληροφορίες για όλες τις ιδιότητες των διαφόρων όψεων, όπως της TextView, καθώς και τις τιμές που παίρνουν. 3/6/2017 igaviotis@gmail.com - Ανάπτυξη εφαρμογών Android 4

5 Σχεδίαση όψης γραφικών ImageView Τα ImageView προορίζονται για την τοποθέτηση εικόνων πάνω στη διεπαφή χρήστη. Τα αρχεία που προβάλονται πρέπει να είναι μαζεμένα στο φάκελο res του project, μέσα στον υποφάκελο drawable/. Ο τύπος των γραφικών μπορεί να είναι png, jpg. Πιο σημαντική ιδιότητα του ImageView είναι η src που δέχεται ως τιμή το όνομα του αρχείου γραφικών που θα προβληθεί. Αλλά χωρίς την κατάληξη! Το αρχείο είναι αποθηκευμένο ως res/drawable/fish.jpg <ImageView //fish είναι όνομα αρχείου δίχως κατάληξη android:layout_width="wrap_content" // ή συγκεκριμένη τιμή σε dp android:layout_height="wrap_content" // όσο για να χωράει το περιεχόμενο android:scaletype="centercrop" // ή center /> Η ιδιότητα scaletype προσαρμόζει το γραφικό στο μέγεθος της όψης: center απλώς το κεντράρει χωρίς κάποια προσαρμογή μεγέθους. centercrop το κεντράρει προσαρμόζοντας το μέγεθος ώστε να χωράει στην όψη. Πειραματιστείτε αλλάζοντας το μέγεθος του ImageView, αντί για wrap_content σε match_parent ή συγκεκριμένες τιμές pixel (dp). Δοκιμάστε γραφικά μικρότερα από το μέγεθος της όψης, πχ εικονίδια, ή μεγαλύτερα, πχ φωτογραφίες. 3/6/ Ανάπτυξη εφαρμογών Android 5

6 Common Android Views Cheat Sheet 3/6/ Ανάπτυξη εφαρμογών Android 6

7 Υποδοχέας LinearLayout Οι υποδοχείς (ViewGroup) ομαδοποιούν όψεις, όπως TextView, ImageView, ή άλλους εμφωλιασμένους υποδοχείς. Έτσι σχηματίζεται μια ιεραρχία με γονικούς υποδοχείς που περιέχουν παιδιά, κοκ. Παιδιά του ίδιου γονέα είναι αδέλφια (προφανώς). Το LinearLayout οργανώνει τα περιεχόμενά του οριζόντια ή κατακόρυφα, ξεκινώντας από πάνω αριστερά. Το μέγεθος των όψεων μπορεί να δίνεται με απόλυτη τιμή (σε dp, κακό), ή όσο χρειάζεται (wrap_content) ή όσο ο γονιός (match_parent). <LinearLayout xmlns:android=" //δήλωση namespace android:orientation="vertical" // ή horizontal android:layout_width="match_parent" // σημαίνει όλη την οθόνη (full bleed) android:layout_height="match_parent" // ονοματισμένο χρώμα του Android <TextView // όψη (παιδί) που περιέχεται στον υποδοχέα (γονιό) android:text="ψωμί" android:layout_width="match_parent" // όσο είναι και του γονιού android:layout_height="0dp" // ή "wrap_content" για να χωράει το Ψωμί android:layout_weight="1" // σχετικό βάρος για ισοκατανομή android:background="#4caf50" // συγκεκριμένη τιμή χρώματος σε RGB android:textsize="24sp" /> Για σχετική κατανομή πολλών όψεων μέσα στον υποδοχέα, θέτεις το μέγεθός τους σε 0dp και χρησιμοποιείς το layout_weight για το σχετικό μέγεθος. <ImageView android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="2" // διπλάσιο βάρος από τα υπόλοιπα αδέρφια android:scaletype="centercrop" /> <TextView //αδέρφι του Ψωμί android:text="βούτυρο" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1" //καταλαμβάνει το 25% = 1/(1+2+1) του υποδοχέα android:textcolor="@android:color/white" android:textsize="24sp" /> </LinearLayout> 3/6/2017 igaviotis@gmail.com - Ανάπτυξη εφαρμογών Android 7

8 Υποδοχέας RelativeLayout <RelativeLayout xmlns:android=" android:layout_width="match_parent" android:layout_height="match_parent"> <TextView // ορίζει το όνομα android:layout_alignparentbottom="true" android:layout_alignparentleft="true" android:textsize="24sp" android:text="lyla" /> <TextView android:layout_alignparentbottom="true" στην όψη android:textsize="24sp" android:text="me" /> <TextView android:layout_alignparenttop="true" android:layout_centerhorizontal="true" android:textsize="24sp" android:text="ben" /> <TextView android:layout_alignparenttop="true" android:textsize="24sp" android:text="kunal" /> </RelativeLayout> Για να προσδιορίσεις μια όψη της δίνεις μοναδικό όνομα με το προσθέτει νέο όνομα στην περιοχή ονομάτων που πλέον μπορεί να χρησιμοποιείται ως προσδιοριστικό του αντικειμένου. Το όνομα πρέπει να είναι μοναδικό. Για να αναφερθείς στο αντικείμενο, η σύνταξη είναι χωρίς το +. Ποιος το σκέφτηκε αυτό! Στον υποδοχέα RelativeLayout η τοποθέτηση (Top, Bottom, Left, Right) γίνεται με σχέση με το γονιό. Ακόμα, μπορούμε να τοποθετήσουμε σε σχέση με τα αδέρφια (torightof, toleftof, above, below), χρησιμοποιώντας τα ονόματά τους. Μια όψη περικλείει ερμητικά τα περιεχόμενά της αν θέσουμε width και height στην τιμή wrap_content. Για να δώσουμε χώρο γύρω από τα περιεχόμενα, μπορούμε να ορίσουμε την ιδιότητα padding. Εξ ορισμού, δυο όψεις ακουμπούν όταν τοποθετούνται πλάι-πλάι. Για να μην εφάπτονται, μπορούμε να ορίσουμε layout_margin έξω από όλες τις πλευρές (Left, Right, Top, Bottom). 3/6/ Ανάπτυξη εφαρμογών Android 8

9 Εγκατάσταση και δοκιμή Android Studio Διαδικασία εγκατάστασης για την ανάπτυξη Android apps: 1. Εγκατάσταση εργαλείων Java Development Kit Για να ελέγξεις αν υπάρχει Java στο PC, άνοιξε παράθυρο διαταγών (cmd) και γράψε C:\> java version Αν δείξει >=7, κατά προτίμηση 8, είσαι OK. Διαφορετικά, κατέβασε το Java SE Development Kit από Oracle.com και εγκατάστησέ το. 2. Εγκατάσταση περιβάλλοντος ανάπτυξης Android Studio Κατέβασε το Android Studio και τρέξε το setup του, μόνον αφού έχει εγκατασταθεί το JDK. Είναι μεγαλούτσικο (2Gb) και κατά την εγκατάσταση κατεβάζει κι άλλα (2Gb). 3. Αρχικοποίησε την πλατφόρμαστόχος (πού θα τρέχει δοκιμαστικά η εφαρμογή κατά την ανάπτυξή της) Είτε σύνδεσε το κινητό σου με το καλώδιο USB και θέσε Settings/Programmer Options / USB options. Ή φτιάξε Android emulator για μια κινητή συσκευή που θα τρέχει στο PC. Δοκιμή μιας app Για να φτιάξεις μια app και να βεβαιωθείς ότι το περιβάλλον ανάπτυξης λειτουργεί σωστά: 1. Δημιουργία νέου project για mobile phone/tablet. Απαιτείται να ονομάσεις το project, πχ MyApp και να ορίσεις Company domain, πχ MyComp.com. Επιλέγεις Empty Activity και αφήνεις όλα τα υπόλοιπα όπως είναι. 2. Κατευθείαν τρέξε το στην πλατφόρμα-στόχο (πραγματική ή ιδεατή συσκευή) Με την δημιουργία ενός (άδειου και καλά) project, το IDE έχει φτιάξει μια ολόκληρη ιεραρχία φακέλων και αρχείων. Εξερεύνησε στο σελιδοδείκτη Project. Με το πράσινο τρίγωνο Run, ρωτάει πού θα εκτελεστεί το app. Εδώ έχουμε επιλέξει μια ιδεατή συσκευή Nexus 3/6/2017 igaviotis@gmail.com - Ανάπτυξη εφαρμογών Android 9

10 Σχεδίαση οθόνης με XML Το παρουσιαστικό της εφαρμογής είναι μια οθόνη που καθορίζεται από το XML έγγραφο που βρίσκεται στο αρχείο res/layout/activity_main.xml. Μπορείς να δεις το περιεχόμενο του αρχείου με δυο τρόπους: Design όπου εμφανίζει την ιεραρχία των υποδοχέων και όψεων στο Component Tree. Στα δεξιά δείχνει τις ιδιότητες Properties του επιλεγμένου αντικειμένου. Προσθέτουμε νέα αντικείμενα επιλέγοντάς τα από την Palette. Text όπου συναντούμε τις ετικέτες XML με τις ιδιότητές τους, στη γνωστή σύνταξη. Στα δεξιά του κείμενου δείχνει μια προεπισκόπηση. Είτε έτσι είτε αλλιώς, μπορούμε να τροποποιήσουμε το UI. Το Android Studio 2.3 προτείνει ConstraintLayout στο Empty Project. Άλλαξε την XML σε RelativeLayout. Θα φτιάξω μια app που θα υπολογίζει την τιμή των καφέδων που παραγγέλνω. 3/6/ Ανάπτυξη εφαρμογών Android 10

11 Οθόνη για Παραγγελία Διαμορφώνουμε το UI της app εισάγοντας υποδοχείς (LinearLayout, RelativeLayout) και διαρθρώνοντας όψεις (TextView, ImageView, Button). Διαδικασία: 1. Φτιάχνουμε τη διάρθρωση (ποιος είναι ο γονέας και τι παιδιά έχει), αρπάζοντας από την Palette τα κατάλληλα αντικείμενα και σέρνοντάς τα στο Component Tree. 2. Τοποθετούμε στην επιφάνεια και διαμορφώνουμε το μέγεθός τους. 3. Ονοματίζουμε τα αντικείμενα, 4. Δίνουμε τιμές στις ιδιότητες. 5. Δεν πειράζουμε τα υπόλοιπα που υπάρχουν μέσα και δεν ξέρουμε τι κάνουν. Μόλις προκύψει σφάλμα επαναφέρουμε τον κώδικα (Ctrl-Z, Undo = Αναίρεση). 6. Δεν παραμελούμε να το τρέχουμε πού-και-πού. Συμβουλές - Tips Μορφοποιήστε το XML έγγραφο με Code / Reformat για να τον κάνει ευανάγνωστο (οδόντωση, κενά, κλπ). Με Code / Rearrange αλλάζει τη σειρά των ιδιοτήτων στις ετικέτες XML σύμφωνα με πρότυπα κώδικα. Πώς καθορίζουμε χρώματα; Μπορούμε να βάζουμε συγκεκριμένες τιμές, πχ android:background="#fa45de" Στο αρχείο res/values/colors.xml μπορείς να δώσεις όνομα σε συγκεκριμένα χρώματα και μετά να χρησιμοποιείς το όνομα, πχ android:textcolor="@color/myfav" Για παράδειγμα, πάνω σε έναν υποδοχέα, έβαλα κατακόρυφα δυο TextBox και ένα Button, που όταν το πατάς δεν κάνει τίποτα. Η app ακόμη είναι 'διακοσμητική', ή mock-up. Η εργασία μέχρι τώρα είναι δουλειά του designer. <?xml version="1.0" encoding="utf-8"?> <resources> <color name="colorprimary">#3f51b5</color> <color name="colorprimarydark">#303f9f</color> <color name="coloraccent">#ff4081</color> <color name="colormyfav">#6905fd</color> </resources> txtposotita butparaggelia Στο έγγραφο XML, στην ετικέτα Button, προσθέτω μια ιδιότητα android:onclick. Αυτό είναι το πρώτο βήμα για να αποκτήσει συμπεριφορά το κουμπί. Η ιδιότητα λέει ότι όταν κάποιος κάνει κλικ πάνω στο κουμπί, να εκτελείται κάποιος κώδικας (ακόμα δεν τον έχουμε γράψει). <Button android:id="@+id/butparaggelia" android:layout_width="wrap_content" android:layout_height="wrap_content" android:padding="16dp" android:text="παραγγελία" android:onclick="parageile"/> 3/6/2017 igaviotis@gmail.com - Ανάπτυξη εφαρμογών Android 11

12 Παρατηρήστε πώς 'δένουν' τα ονόματα μεταξύ τους. Προσθήκη κώδικα Java Όταν δημιουργήσαμε το Empty Project περάσαμε στο ντούκου μια οθόνη που έφτιαχνε μια activity, που την ονόμασε MainActivity (μπορούμε να της αλλάξουμε όνομα). Activity, δραστηριότητα θα το μετάφραζα, είναι μια ενότητα κώδικα που κάνει κάτι. Φτιάχτηκε λοιπόν αυτόματα ένα αρχείο MainActivity.java που μπορούμε να το δούμε μέσα στη δομή του project και να πάρουμε μάτι τον κώδικά του. Αυτό αναλαμβάνει να προβάλει το layout που καθορίζεται στο activity_main.xml (και σε αυτό μπορούμε να αλλάξουμε όνομα). Στον κώδικα Java προσθέτουμε τον κώδικα που σημειώνω δίπλα με υπογράμμιση και εκτελείται όταν πατιέται το κουμπί. Αν προκύψει runtime error, η app κλείνει και, στην καλύτερη, βγάζει ένα μήνυμα "Unfortunately, MyApp has stopped". Γι αυτό χρειάζεται debugging, που στην απλούστερη, είναι να τρέχεις τον κώδικα γραμμή-γραμμή. Αντί για Code / Run, επιλέγω Code / Debug. package com.mycomp.myapp; import android.support.v7.app.appcompatactivity; import android.os.bundle; import android.view.view; import android.widget.textview; public class MainActivity extends AppCompatActivity protected void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.activity_main); public void parageile(view view) { TextView tvposotita = (TextView) findviewbyid(r.id.txtposotita); tvposotita.settext("1111"); Εκτελείται με το ξεκίνημα της app. Το όνομα του TextView που περιέχει την ποσότητα Το υπογραμμισμένο κείμενο το γράφουμε εμείς. 3/6/2017 igaviotis@gmail.com - Ανάπτυξη εφαρμογών Android 12

13 Προσθήκη βιβλιοθηκών Java Επιστρέφω στο αρχείο XML και προσθέτω δυο ακόμα TextView για την τιμή: ένα για την ετικέτα (lbltimi) και ένα για το κείμενο (txttimi) της τιμής. Είναι καλή συνήθεια να ακολουθείς συμβάσεις για την ονομασία των όψεων, αλλιώς θα μπερδέψεις τα μπούτια σου. Η οθόνη διαμορφώνεται έτσι: Προσθέτω κώδικα με τις μεταβλητές για την ποσότητα και την τιμή μονάδας. Υπολογίζω την τιμή όλων και εμφανίζω τα αποτελέσματα στην οθόνη. lblposotita txtposotita lbltimi txttimi Οι εντολές import στην αρχή του κώδικα Java είναι για εισαγωγή βιβλιοθηκών. Από το File / Settings στην ενότητα Editor / General / Auto Import βολεύει να τσεκάρεις όλες τις επιλογές.... import java.text.numberformat; // μπαίνει μαζί με τις υπόλοιπες import κοντά στην αρχή του κώδικα.... public void parageile(view view) { // είναι δεμένη με το συμβάν onclick int iposotita = 2; // του Button TextView tvposotita = (TextView) findviewbyid(r.id.txtposotita); tvposotita.settext("" + iposotita); // μετατρέπει την ποσότητα // από ακέραιο σε συμβολοσειρά double dtimimonadas = 1.6; // ας πούμε ότι τόσο κάνει ένας καφές double dtimi = iposotita * dtimimonadas;... TextView tvtimi = (TextView) findviewbyid(r.id.txttimi); tvtimi.settext(numberformat.getcurrencyinstance().format(dtimi)); Δοκίμασε αποσφαλμάτωση (debugging) βάζοντας σημεία διακοπής (breakpoints) σε συγκεκριμένα σημεία του κώδικα. 3/6/2017 igaviotis@gmail.com - Ανάπτυξη εφαρμογών Android 13

14 UI και κώδικας για παραγγελία Προσθέτω άλλα δυο Button στην οθόνη για να ανεβοκατεβάζουν την ποσότητα. Θέτω την ιδιότητα onclick κατάλληλα, ώστε να οδηγεί στις αντίστοιχες μεθόδους του κώδικα Java που θα εκτελούνται όταν πατιούνται τα κουμπιά. Επειδή θέλω να τοποθετήσω αυτά τα κουμπιά δίπλα στο TextView της ποσότητας, θα τα κλείσω όλα σε ένα οριζόντιο LinearLayout. Δίπλα φαίνεται η τελική μορφή του UI όπου σημειώνω τα ονόματα που αναφέρονται στον κώδικα. Με πράσινο χρώμα είναι τα ονόματα των όψεων και με μπλε οι μέθοδοι onclick. public class MainActivity extends AppCompatActivity { final double dtimimonadas = 1.6; // σταθερά int iposotita = 0; //μεταβλητή κλάσης txtposotita anevase katevase txttimi protected void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); // δεν πείραξα setcontentview(r.layout.activity_main); // τίποτα εδώ public void anevase(view view) { iposotita++; displayposotita(); public void katevase(view view) { if (iposotita > 0) // για να μην κατεβαίνει iposotita--; // σε αρνητικές ποσότητες displayposotita(); public void parageile(view view) { TextView tvtimi = (TextView) findviewbyid(r.id.txttimi); tvtimi.settext(numberformat.getcurrencyinstance(). format(iposotita * dtimimonadas)); public void displayposotita() { TextView tvposotita = (TextView) findviewbyid(r.id.txtposotita); tvposotita.settext("" + iposotita); Δηλώνω την dtimimonadas ως σταθερά για να είναι ευδιάκριτη κατά τη συντήρηση του κώδικα και να μην μπορεί να αλλάξει κατά λάθος. Δηλώνω μια μεταβλητή κλάσης iposotita. Την τιμή της θα προβάλει το txtposotita και θα μεταβάλουν τα κουμπιά -,+. Φτιάχνω τις μεθόδους anevase / katevase που ενημερώνουν κατάλληλα τη μεταβλητή και προβάλουν την ενημερωμένη τιμή της στην οθόνη. Παρατηρώ ότι ο κώδικας που προβάλει την iposotita επαναλαμβάνεται αυτούσιος τρεις φορές. Έτσι φτιάχνω μια μέθοδο displayposotita που κάνει τη δουλειά και την καλώ στα κατάλληλα σημεία (επαναχρησιμοποίηση). 3/6/2017 igaviotis@gmail.com - Ανάπτυξη εφαρμογών Android 14

15 Ξεκίνημα νέου έργου Android Δημιουργία έργου 1. Από μενού File / New / New Project 2. Συμπληρώνεις Application name και Company Domain για να είναι μοναδικό το Package name όταν θα το ανεβάσεις στο Google Play και αργότερα θα εγκατασταθεί στις συσκευές αυτών που θα το κατεβάσουν. 3. Καθορίζεις Project location, το φάκελο που θα αποθηκεύονται όλα τα αρχεία που χρειάζονται για την ανάπτυξη του app. 4. Επιλέγεις την πλατφόρμα που στοχεύει το app, λογικά Phone and Tablet. Minimum SDK είναι η αρχαιότερη έκδοση Android που θα εκτελείται. 'Help me choose' εμφανίζει την τρέχουσα κατανομή των εκδόσεων. 5. Επιλέγεις Empty Activity και διατηρείς τα προτεινόμενα ονόματα. Finish /6/2017 igaviotis@gmail.com - Ανάπτυξη εφαρμογών Android 15

16 Εκτέλεση Εκτέλεση έργου 1. Το κενό έργο περιλαμβάνει μια activity που έχει 1. μια οθόνη με ένα Textbox που αποθηκεύεται στο main_activity.xml 2. κώδικα Java που εκκινεί την app. 2. Από το μενού Run γίνεται μετάφραση και ξεκινά η εκτέλεση. 3. Ρωτάει πού να εκτελεστεί το app: 1. σε μια συνδεδεμένη συσκευή (Choose a running device) 2. σε έναν προσομοιωτή (Launch emulator), για τον οποίο επιλέγεις τι κινητό υποδύεται (μοντέλο & έκδοση Android) 4. Εκτελεί το app στην επιλεγμένη συσκευή /6/2017 igaviotis@gmail.com - Ανάπτυξη εφαρμογών Android 16

17 Ευχετήρια κάρτα <?xml version="1.0" encoding="utf-8"?> Φτιάχνουμε μια app που προβάλει μια φωτο με ευχές και τον αποστολέα; Χρειάζεται ένα ImageView για τη φωτό και δύο TextView για τα κείμενα. Λόγω της τοποθέτησης στα άκρα προτιμούμε να τα εντάξουμε σε ένα υποδοχέα RelativeLayout. Δείτε το όνομα που του δίνει και τις διαστάσεις που καλύπτουν όλη την οθόνη. Τοποθετούμε το ImageView, του δίνουμε όνομα, ορίζουμε διαστάσεις για να εκτείνεται σε όλο τον υποδοχέα. Αποθηκεύουμε μια φωτό στο φάκελο drawable του έργου και προσθέτουμε την ιδιότητα android:src να δείχνει στο αρχείο της φωτό, χωρίς την κατάληξη. Εισάγουμε τα δυο κείμενα μέσα στον υποδοχέα. Πρέπει να είναι μετά την εικόνα (γιατί;). Τοποθετούμε με τις κατάλληλες ιδιότητες align και λοιπά διακοσμητικά (μέγεθος, χρώμα). Στη σχεδίαση του παρουσιαστικού με XML εξοικειωθείτε με τις δυνατότητες που δίνουν τα παράθυρα 'Palette', 'Component Tree', 'Properties' για να βλέπεις και να αλλάζεις την XML. <RelativeLayout xmlns:android=" xmlns:tools=" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="com.mycomp.myapplication.mainactivity"> <ImageView android:layout_width="match_parent" android:layout_height="match_parent" android:scaletype="centercrop" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignparenttop="true" android:layout_centerhorizontal="true" android:text="καλό καρναβάλι" android:textsize="40dp" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignparentbottom="true" android:layout_alignparentright="true" android:text="ο δεινόσαυρος" android:textcolor="#ffffff" android:textsize="40dp" /> </RelativeLayout> 3/6/ Ανάπτυξη εφαρμογών Android 17

18 Ένα κατακόρυφο RelativeLayout με 2 περιεχόμενα Σκορ μπάσκετ: οθόνη Στο strings.xml άλλαξε το app_name. <View android:layout_width="1dp" android:layout_height="match_parent" android:layout_margin="8dp" android:background="@android:color/darker_gray" /> Για να μπει το κείμενο στο κέντρο, θέσε ιδιότητα gravity = center. Ένα κατακόρυφο RelativeLayout με 5 περιεχόμενα, 2 TextView και 3 Button. txtskora 1. Βρες τις όψεις 2. Οργάνωσέ τις σε ομάδες 3. Διακόσμησέ τις txtskorb Ένα οριζόντιο RelativeLayout με 2 περιεχόμενα Για καθένα από τα κουμπιά να ορίσεις την ιδιότητα onclick. Πχ για το τρίποντο της ομάδας Α, πες το syn3a, κοκ. midenise 3/6/2017 igaviotis@gmail.com - Ανάπτυξη εφαρμογών Android 18

19 Σκορ μπάσκετ: πρόγραμμα package com.mycomp.mybasket; import android.os.bundle; import android.support.v7.app.appcompatactivity; import android.view.view; import android.widget.textview; public class MainActivity extends AppCompatActivity { int iskora = 0; //τοπικές μεταβλητές για τα σκορ int iskorb = protected void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.activity_main); public void syn3a(view v){ iskora += 3; //τρίποντο displaya(); public void syn2a(view v){ iskora += 2; //δίποντο displaya(); public void syn1a(view v){ iskora ++; //ελεύθ. βολές displaya(); 1 public void syn3b(view v){ iskorb += 3; //τρίποντο displayb(); public void syn2b(view v){ iskorb += 2; //δίποντο displayb(); public void syn1b(view v){ iskorb ++; //ελεύθ. βολές displayb(); public void midenise(view v){ //για το κουμπί Μηδένισε! iskora = 0; displaya(); iskorb = 0; displayb(); private void displaya(){ TextView tvskora = (TextView) findviewbyid(r.id.txtskora); tvskora.settext("" + iskora); private void displayb(){ TextView tvskorb = (TextView) findviewbyid(r.id.txtskorb); tvskorb.settext("" + iskorb); //end class 2 3 3/6/2017 igaviotis@gmail.com - Ανάπτυξη εφαρμογών Android 19

20 Πόροι (Resources) // αρχείο MainActivity.java protected void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.activity_main); Τι στο διάολο είναι αυτά τα R.id. R.layout.; Δεν καταλαβαίνω Χριστό! activity_main.xml <TextView android:id="@+id/txtparaggelia" android:layout_width="wrap_content" android:layout_height="wrap_content" android:padding="16dp" android:text="περιγραφή παραγγελίας" android:textcolor="@android:color/black" /> <Button android:id="@+id/paraggeliabutton" android:layout_width="wrap_content" android:layout_height="wrap_content" android:onclick="parageile" android:padding="16dp" android:text="παραγγελία" /> Η app αποτελείται από: τον κώδικα Java που υλοποιεί τη συμπεριφορά της, δηλαδή πώς ανταποκρίνεται σε διάφορα συμβάντα, και βρίσκεται σε διάφορα αρχεία του φακέλου java διάφορους άλλους πόρους, όπως αρχεία γραφικών, ήχους, βίντεο, κείμενα, χρώματα, κλπ που πρέπει να τοποθετούνται στους υποφακέλους του φακέλου res. Κατά τη μετάφραση του έργου της app, από τα διάφορα resources φτιάχνεται μια Java κλάση που ονομάζεται R (φοβερό όνομα, περιγραφικό, και όλα τα καλά ) και περιέχει υποκλάσεις με τα αναγνωριστικά ονόματα όλων των πόρων. Όλα τα ονόματα των γραφικών που είναι στο φάκελο /res/drawable έχουν όνομα R.drawable.αρχείο Όλες οι συμβολοσειρές έχουν όνομα R.string.συμβολοσειρά 3/6/2017 igaviotis@gmail.com - Ανάπτυξη εφαρμογών Android 20

21 Αντικείμενα XML από κώδικα Java Στις εφαρμογές Android η διεπαφή χρήστη γράφεται σε XML, ενώ ο κώδικας σε Java. Μεταξύ τους υπάρχει χάσμα, αλλά είναι απαραίτητο να επικοινωνούν. Αν έχετε κάνει Visual Basic 15 χρόνια πριν, θα χτυπάτε το κεφάλι σας στον τοίχο τώρα. XML -> Java Χρειάζεται να ορίσουμε ποια μέθοδος Java θα εκτελείται όταν πυροδοτηθεί ένα συμβάν. Στην XML γράφουμε android:onclick="triapoulakia" για το Button της οθόνης, ενώ ορίζουμε τη μέθοδο στη Java ακριβώς έτσι. Αν κάνετε λάθος, παρότι το build ολοκληρώνεται χωρίς παράπονα, η εφαρμογή θα κρασάρει, χωρίς να λέει το λόγο! public class MainActivity extends AppCompatActivity { EditText et; // βήμα 1 όπου δηλώνουμε ονόματα TextView tv; // εμβέλειας κλάσης για protected void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.activity_main); et = (EditText) findviewbyid(r.id.edt); // βήμα 2 tv = (TextView) findviewbyid(r.id.txt); // αρχικοπ // όπου edt, txt είναι τα ονόματα των όψεων στην XML Java -> XML 1. Δηλώνουμε μέσα στην κλάση αντικείμενα του ίδιου τύπου με της XML. 2. Μέσα στην oncreate() αρχικοποιούμε τα αντικείμενα ώστε να δείχνουν στις αντίστοιχες όψεις της XML. 3. Χρησιμοποιούμε τις κατάλληλες μεθόδους για να διαβάζουμε / εγγράφουμε τα περιεχόμενά τους. public void triapoulakia(view v) { String s = et.gettext().tostring();//βήμα 3 διάβασμα tv.settext(s); // βήμα 3 αλλαγή τιμής Οι απαραίτητες μέθοδοι για να γίνει η δουλειά είναι: findviewbyid() ανακαλεί το αντικείμενο με συγκεκριμένο όνομα (id) μέσα από την XML. gettext() διαβάζει τα περιεχόμενα από ένα αντικείμενο που περιέχει κείμενο, πχ EditText ή TextView settext() αλλάζει τα περιεχόμενα του αντικειμένου Η σύνταξη είναι πιο περίπλοκη εξαιτίας μετατροπών στους τύπους δεδομένων που γίνονται με casting, πχ (EditText), ή με μεθόδους μετατροπής, πχ tostring(). Γι αυτά φταίει η Java. 3/6/2017 igaviotis@gmail.com - Ανάπτυξη εφαρμογών Android 21

22 Προσθέσετε κουμπιά Μπρος wvothoni.goforward() Πίσω wvothoni.goback() Επόπτης ιστοσελίδων (browser) Νέο έργο. Στο EditBox θα εισάγουμε μια διεύθυνση και πατώντας το Button θα προβάλει το περιεχόμενο της ιστοσελίδας. package com.mycomp.mybrowser; import android.os.bundle; import android.support.v7.app.appcompatactivity; import android.view.view; import android.webkit.webview; import android.webkit.webviewclient; import android.widget.button; import android.widget.edittext; public class MainActivity extends AppCompatActivity { EditText eturl; Button btgo; WebView protected void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.activity_main); eturl = (EditText) findviewbyid(r.id.edturl); btgo = (Button) findviewbyid(r.id.btngo); wvothoni = (WebView) findviewbyid(r.id.webothoni); wvothoni.setwebviewclient(new WebViewClient()); public void gotopage(view v) { String surl = eturl.gettext().tostring(); wvothoni.loadurl(" + surl); Υλοποιήσετε 'Αγαπημένα'. Πχ πληκτρολογώντας '1' να προβάλει ' 3/6/2017 igaviotis@gmail.com - Ανάπτυξη εφαρμογών Android 22

23 Δικαιώματα και εικονίδιο Στο αρχείο manifests/androidmanifest.xml δηλώνουμε τα δικαιώματα που πρέπει να έχει η εφαρμογή για να λειτουργεί σωστά. Για να προσπελάσει το Internet, η εφαρμογή χρειάζεται το δικαίωμα: <uses-permission android:name="android.permission.internet" /> (Διακοσμητικό) Για να μη βάζει ως εικονίδιο της εφαρμογής το άσχημο ανθρωποειδές (Android): Αποθηκεύουμε στο φάκελο res/drawable ένα png αρχείο. Στο AndroidManifest.xml στην ενότητα application προσθέτουμε την ιδιότητα android:icon να δείχνει προς το όνομα του αρχείου με το νέο εικονίδιο <?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android=" package="com.mycomp.mybrowser"> <uses-permission android:name="android.permission.internet" /> <application android:allowbackup="true" android:supportsrtl="true" <activity android:name=".mainactivity"> <intent-filter> <action android:name="android.intent.action.main" /> <category android:name="android.intent.category.launcher" /> </intent-filter> </activity> </application> </manifest> 3/6/ Ανάπτυξη εφαρμογών Android 23

24 Παραγγελία καφέδων Θα εξελίξουμε την εφαρμογή με περισσότερες επιλογές, πχ καφές με σαντιγύ. Θα υπολογίζει πόσο κάνουν οι καφέδες και θα τυπώνει ανάλογο μήνυμα. public class MainActivity extends AppCompatActivity { final double timikafe = 1.6; // σταθερές final double timisantigy = 0.5; int posotita = 0; //μεταβλητή protected void oncreate(bundle savedinstancestate) {... public void anevase(view view) {... public void katevase(view view) {... Όπου... δες τον κώδικα στη διαφάνεια 'UI και κώδικας για παραγγελία' txtposotita chkextra paraggeile txtparaggelia Για να μετακινείται κατακόρυφα η οθόνη σε περίπτωση που δεν χωράνε όλες οι όψεις στην οθόνη (ή γυρίσουμε σε οριζόντια διάταξη), τυλίγουμε όλες τις όψεις της διεπαφής στον υποδοχέα ScrollView. public void parageile(view view) { double axia; CheckBox cbextra = (CheckBox) findviewbyid(r.id.chkextra); String sextras; if (cbextra.ischecked()) { sextras = "Με σαντιγύ"; axia = posotita * (timikafe + timisantigy); else { sextras = "Χωρίς σαντιγύ"; axia = posotita * timikafe; String sparaggelia = "Ποσότητα: " + posotita + "\n" + sextras + "\nαξία: " + NumberFormat.getCurrencyInstance().format(axia) + "\nευχαριστώ πολύ!"; TextView tvparaggelia = (TextView) findviewbyid(r.id.txtparaggelia); tvparaggelia.settext(sparaggelia); public void displayposotita() {... 3/6/2017 igaviotis@gmail.com - Ανάπτυξη εφαρμογών Android 24

25 Προθέσεις (intents) Στην εφαρμογή των καφέδων, όταν πατιέται το κουμπί 'ΠΑΡΑΓΓΕΛΊΑ', θέλουμε να ετοιμάζεται μήνυμα . Η εφαρμογή μπορεί να εκδηλώσει την πρόθεσή της, πχ να σταλεί ή να προβληθεί μια ιστοσελίδα ή ένας χάρτης, κά. Το Android αναλαμβάνει να ανοίξει την κατάλληλη εφαρμογή για να διεκπεραιώσει. Αν υπάρχει μια εφαρμογή, την ανοίγει, της περνάει τα δεδομένα και την αφήνει να κάνει τη δουλειά. Αν δεν υπάρχει καμιά αρμόδια εφαρμογή, επιστρέφει η ροή ελέγχου πίσω. Αν υπάρχουν πολλές κατάλληλες εφαρμογές, εμφανίζεται παράθυρο για επιλογή αναμεταξύ τους. Τα δεδομένα της πρόθεσης περνιούνται με τη μορφή ενός URI (Uniform Resource Identifier). Αυτό το φροντίζει η Uri.parse(). public void parageile(view view) {... // ο κώδικας της μεθόδου, όπως ήταν από την προηγούμενη διαφάνεια // ονομάστε τη μεταβλητή όπως θέλετε, εγώ mailintent Intent mailintent = new Intent(Intent.ACTION_SENDTO); // κατασκευή πρόθεσης // ανοίγει τις διαθέσιμες εφαρμογές mailintent.setdata(uri.parse("mailto:")); // προσυμπληρώνει το θέμα του mailintent.putextra(intent.extra_subject, "Παραγγελία καφέδων για το Γιάννη"); // προσυμπληρώνει το κείμενο του mailintent.putextra(intent.extra_text, sparaggelia); // ψάχνει μπας και δεν έχεις καμιά εφαρμογή για mail στο κινητό σου. Χλωμό if (mailintent.resolveactivity(getpackagemanager())!= null) startactivity(mailintent); // end paraggeile Άλλες προθέσεις: ACTION_DIAL καλεί τηλεφωνικό αριθμό ACTION_INSERT εισάγει γεγονός στο ημερολόγιο ACTION_IMAGE_CAPTURE τραβάει φωτογραφία ACTION_VIEW δείχνει τοποθεσία στο χάρτη (geo) παίζει τραγούδι (mp3) προβάλει ιστοσελίδα(html) Για περισσότερα intents, κοιτάξτε 3/6/2017 igaviotis@gmail.com - Ανάπτυξη εφαρμογών Android 25

26 Οθόνη σύνδεσης (login) login_screen.xml LoginActivity.java Θα προσαρμόσουμε την εφαρμογή της παραγγελίας καφέ, έτσι ώστε να ξεκινάει απαιτώντας σύνδεση του χρήστη και μετά θα επιτρέπει συμπλήρωση, προεπισκόπηση και υποβολή της παραγγελίας. Στόχος είναι να δούμε πώς ανοίγουμε μια νέα οθόνη. Ας φτιάξουμε το layout της νέας οθόνης. Έχει δυο EditText για να πληκτρολογήσεις όνομα και σύνθημα, καθώς και ένα πλήκτρο. Τα υπόλοιπα είναι διακοσμητικά. Έχω δώσει ονόματα (android:id) εκεί που χρειάζεται και πουθενά αλλού. Το μόνο ενδιαφέρον και νέο είναι η ιδιότητα android:password="true" στο EditText για το σύνθημα που δείχνει αστεράκια όταν πληκτρολογείς. Σε μια νέα κλάση Java: Η διπλανή μέθοδος εκτελείται όταν πατηθεί το πλήκτρο. public void checklogin(view v) { EditText etusername = (EditText) findviewbyid(r.id.edtusername); String susername = etusername.gettext().tostring(); //πάρε username EditText etpassword = (EditText) findviewbyid(r.id.edtpassword); String spassword = etpassword.gettext().tostring(); //πάρε το password TextView tvsyndesi = (TextView) findviewbyid(r.id.txtsyndesi); if (susername.equals("gaviotis") && spassword.equals("123456")) { tvsyndesi.settext("επιτυχής σύνδεση!"); etusername.settext(""); etpassword.settext(""); tvsyndesi.settext("μη συνδεδεμένο"); Intent orderform = new Intent(this, OrderActivity.class); startactivity(orderform); else { tvsyndesi.settext("έκανες κάποιο λάθος! " + susername + ":" + spassword); //end method 3/6/2017 igaviotis@gmail.com - Ανάπτυξη εφαρμογών Android 26

27 Δραστηριότητες (activities) login_screen.xml order_screen.xml Το MainActivity.java ζητά στοιχεία και μετά από έλεγχό τους εκτελεί Intent parag = new Intent(this, OrderActivity.class); startactivity(parag); που ανοίγει την οθόνη της παραγγελίας. Στο OrderActivity.java συμπληρώνουμε την παραγγελία και την βλέπουμε ή τη στέλνουμε. Οι εφαρμογές συνήθως έχουν διάφορες οθόνες για την αλληλεπίδραση με το χρήστη. Στο Android ονομάζονται δραστηριότητες (activities) και υλοποιούνται με κλάσεις Java. Μέσα από αυτές τις κλάσεις ανοίγονται τα κατάλληλα XML layouts. Όλες οι δραστηριότητες που συμμετέχουν στην εφαρμογή δηλώνονται στο AndroidManifest.xml. Εδώ έχουμε δύο, την MainActivity.java που ανοίγει την οθόνη login_screen.xml, και την OrderActivity.java που ανοίγει την οθόνη order_screen.xml. Προσέξτε πώς ξεχωρίζει η αρχική: <activity android:name=".mainactivity"> <intent-filter> <action android:name="android.intent.action.main" /> <category android:name="android.intent.category.launcher" /> </intent-filter> </activity> <activity android:name=".orderactivity"></activity> Εδώ έχει ανοίξει η εφαρμογή και είναι έτοιμη να στείλει το μήνυμα. 3/6/2017 igaviotis@gmail.com - Ανάπτυξη εφαρμογών Android 27

28 Έχεις αγνές προθέσεις; Για να στείλουμε ένα και για να ανοίξουμε μια νέα οθόνη χρησιμοποιήσαμε τις προθέσεις. Αλλά η σύνταξη των εντολών διαφέρει. Γιατί; Υπάρχουν δυο είδη προθέσεων (πέρα από τις αγνές και τις πονηρές): Υπονοούμενες (implicit) Καθορίζουν την ενέργεια που θέλουμε να εκτελεστεί, αλλά όχι ποιος θα την εκτελέσει. Τέτοια πρόθεση χρησιμοποιήσαμε για να στείλουμε το . Δεν ξέρουμε ποια εφαρμογή θα στείλει το όταν γράφουμε τον κώδικα, θα επιλεγεί ένας mail client από αυτούς που είναι εγκατεστημένοι στο κινητό (Gmail, , K-9 Mail, κλπ). Ρητές (explicit) Καθορίζουν το όνομα της εφαρμογής που θα αναλάβει την εκτέλεση της πρόθεσης. Στην περίπτωση ανοίγματος νέας οθόνης, η νέα δραστηριότητα εκτελείται από την εφαρμογή μας. 3/6/ Ανάπτυξη εφαρμογών Android 28

29 Τοπικοποίηση (localization) Το Android project μπορεί να διαμορφώνει διαφορετική εμφάνιση και συμπεριφορά ανάλογα με τον τύπο της συσκευής που εκτελείται, πχ αν πρόκειται για κινητό τηλέφωνο ή ταμπλέτα, ή τα χαρακτηριστικά της, πχ την ανάλυση της οθόνης ή την έκδοση του Android που υποστηρίζει. Επίσης, μπορεί να εμφανίζει διαφορετικά κείμενα ανάλογα με τη γλώσσα που έχει επιλεγεί από Ρυθμίσεις / Γλώσσα και Εισαγωγή / Γλώσσα (Settings / Language & Input / Language) της συσκευής. Διαδικασία 1. Εντοπίζουμε τις λέξεις που εμφανίζονται στις οθόνες της εφαρμογής, πχ σε ετικέτες, πλήκτρα του κώδικα XML. 2. Στο αρχείο res/values/strings.xml φτιάχνουμε εγγραφές για κάθε συμβολοσειρά (όνομα και τιμή). 3. Αντικαθιστούμε τις καρφωτές συμβολοσειρές στον κώδικα XML. 4. Φτιάχνουμε ξεχωριστό φάκελο και αρχείο για κάθε άλλη γλώσσα και εκεί μεταφράζουμε τις συμβολοσειρές. 5. Η ίδια διαδικασία ακολουθείται και για λέξεις που είναι μέσα στον κώδικα Java, μόνο που για να ανακαλέσεις το περιεχόμενο της συμβολοσειράς μέσα από τη Java, πρέπει να κάνεις Φοβερό, ε; res/values/strings.xml <resources> <string name="app_name" translatable="false">my browser</string> <string name="gobuttonlabel">go</string> <string name="urlhint">enter address</string> <string name="selidatext">page:</string> <string name="hello">hello, world!</string> </resources> res/values-el/strings.xml Αυτές οι συμβολοσειρές είναι οι εξ ορισμού και θα εμφανίζονται για όλες τις γλώσσες. <?xml version="1.0" encoding="utf-8"?> Αυτές θα εμφανίζονται <resources> όταν επιλέξεις ελληνικά. <string name="gobuttonlabel">άντε</string> <string name="urlhint">πληκτρολόγησε διεύθυνση</string> <string name="selidatext">σελίδα:</string> <string name="hello">γεια χαραντάν!</string> </resources> String shello = getresources().getstring(r.string.hellogreeting); Η διαδικασία γίνεται απλούστερη, αν κάνεις το βλάκα: ξεκίνα χωρίς συμβολοσειρές στο strings.xml, γράφοντας το χειρότερο που θα μπορούσες: καρφωτές λέξεις μέσα στην XML και στη Java. Όταν τελειώσεις το πρωτότυπο, στη λάμπα της επιφοίτησης της Αγίας Google διάλεξε Extract String Resource και θα σε καθοδηγήσει. Πρόσθεσε γλώσσες με Translations Editor. 3/6/2017 igaviotis@gmail.com - Ανάπτυξη εφαρμογών Android 29

30 Στιλ (styles) Κατά τη σχεδίαση των διαφόρων όψεων που συμμετέχουν στο Layout τους προσθέτουμε ιδιότητες, πχ padding, margin, background (χρώμα ή εικόνα), alpha (διαφάνεια), κλπ. Λογικά οι όψεις που έχουν κάποια λογική συσχέτιση, θα πρέπει να μοιάζουν στο παρουσιαστικό. Αλλιώς η οθόνη μας θα είναι σαν τσίρκο. Έτσι καταλήγουμε να έχουμε μεγάλα XML αρχεία όπου επαναλαμβάνονται οι ίδιες ιδιότητες με τις ίδιες τιμές σε συναφείς όψεις, πχ TextView. Ακόνη χειρότερα, αν αλλάξουμε μια ιδιότητα σε κάποια όψη, θα πρέπει να θυμηθούμε να την αλλάξουμε και στις υπόλοιπες της ίδιας ομάδας για να έχουμε ομοιομορφία. Γι αυτό φτιάχνουμε ένα αρχείο styles.xml που δίνει όνομα σε ένα σύνολο ιδιοτήτων με τις τιμές τους. Μετά επικαλούμαστε το όνομα του στιλ στις όψεις του layout. res/layout/activity_main.xml <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal"> <EditText android:layout_width="wrap_content" android:layout_height="wrap_content" android:inputtype="text" android:text="ομάδα Α"/> drawable/round_rect.xml Μια γραμμή κειμένου res/values/styles.xml <resources> <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android=" android:shape="rectangle"> <corners android:radius="20dp"/> <padding android:bottom="10dp" android:top="10dp"/> <solid android:color="#e1bee7"/> </shape> <style name="layoutstyle"> <item name="android:alpha">0.7</item> <item name="android:background">#cddc39</item> </style> <style name="livetextstyle"> <item name="android:padding">8dp</item> <item <item name="android:gravity">center</item> <item name="android:textcolor">#1b5e20</item> </style> </resources> Επίσης, μπορούμε να ορίσουμε 'σχήματα' και να τα χρησιμοποιήσουμε. Η φάση αυτή θυμίζει τη δουλειά που κάνουν τα CSS στις HTML σελίδες. Όπως εκεί, έτσι κι εδώ δίνεται μια άσχημη λύση σε ένα υπαρκτό πρόβλημα (γλώσσες με διαφορετικές συντάξεις). 3/6/ Ανάπτυξη εφαρμογών Android 30

31 Αρχεία Android έργου Κάθε Android project έχει συγκεκριμένη δομή φακέλων και αρχείων που τη φτιάχνει το Android Studio και ΔΕΝ την πειράζουμε. Μια βλακεία είναι ότι αυτοί οι φάκελοι απεικονίζονται διαφορετικά στο Studio από ότι είναι πραγματικά στο σύστημα αρχείων. Μπλιαχ... Περιέχει τα ονόματα των δραστηριοτήτων που συμμετέχουν στην εφαρμογή, ποια είναι η αρχική. Δηλώνει όνομα και εικονίδιο εφαρμογής, καθώς και δικαιώματα που απαιτεί για τη λειτουργία της. app manifests java AndroidManifest.xml com.example.myapp drawable Εικόνες MainActivity.java SecondActivity.java Στο φάκελο java υπάρχει υποφάκελος με το όνομα του έργου και εκεί μέσα είναι αρχεία που περιέχουν προγράμματα Java με τον κώδικα που υλοποιεί τη συμπεριφορά της εφαρμογής. Περιέχει τις εικόνες που χρειάζονται για την εφαρμογή. res layout activity_main.xml activity_second.xml Τα αρχεία εμφάνισης περιέχουν υποδοχείς και όψεις για τη διεπαφή χρήστη κάθε δραστηριότητας. values colors.xml strings.xml styles.xml Αρχείο για τους καλλιτέχνες που ενδιαφέρονται να δώσουν ονόματα στα χρώματα... Περιέχει ονόματα και τιμές για τις συμβολοσειρές που χρειάζονται για την εφαρμογή. Μπορεί να υπάρχουν διαφορετικά αρχεία για κάθε γλώσσα (δες τοπικοποίηση). Περιέχει διακοσμητικές μπούρδες, ανάλογες με τα CSS των ιστοσελίδων. 3/6/ Ανάπτυξη εφαρμογών Android 31

32 Σκορ ντόμινο Στο παιχνίδι του ντόμινο χάνει όποιος ξεπεράσει πρώτος το όριο (πχ 31 πόντοι). Καταχωρούμε για κάθε παρτίδα ποιος έχει πάνω του πόντους και ενημερώνουμε το σκορ. Καταγράφεται το ιστορικό των παρτίδων. Ιδιότητες έργου Πρόγραμμα Φόντο οθόνης Εικονίδιο εφαρμογής Φόντο στρογγυλεμένο Ορισμός διεπαφής Στιλ 3/6/ Ανάπτυξη εφαρμογών Android 32

33 Σκορ ντόμινο: πόροι Ορίζει νέο σχήμα που χρησιμοποιείται ως φόντο από κάποιες όψεις. Είναι στο res/drawable. <shape xmlns:android="..." android:shape="rectangle"> <corners android:radius="20dp"/> <padding android:bottom="10dp" android:left="10dp" android:right="10dp" android:top="10dp"/> <solid android:color="#e1bee7"/> </shape> <?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android=" package="com.mycomp.domino"> <application android:allowbackup="true" android:supportsrtl="true" <activity android:name=".mainactivity" <intent-filter> Παραπέμπει σε αρχείο με το εικονίδιο. Ορίζει το όνομα της εφαρμογής. <action android:name="android.intent.action.main"/> <category android:name="android.intent.category.launcher"/> </intent-filter> </activity> </application> </manifest> Ορίζει στιλ που μπορούν να χρησιμοποιούν οι όψεις της διεπαφής. Κάτι σαν τα CSS για την HTML. Είναι στο res/values. <resources> Διαφάνεια <style name="layoutstyle"> <item name="android:alpha">0.7</item> <item name="android:background">#cddc39</item> </style> </resources> 3/6/ Ανάπτυξη εφαρμογών Android 33

34 Σκορ ντόμινο: διεπαφή Layout της activity Αποτελείται από υποδοχείς LinearLayout που οργανώνουν σε ομάδες EditText, TextView, Button. <LinearLayout... android:orientation="vertical"> Εικόνα παρασκηνίου <EditText android:inputtype="text" android:text="ομάδα Α"/> Παραπέμπει σε στιλ για ομοιομορφία. Μία γραμμή κειμένου <TextView android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:background="#11ee11" android:onclick="anevase1" android:text="0"/> Για ισοκατανομή Για ισοκατανομή Μέθοδος που εκτελείται στο κλικ <EditText Δεκαδικός αριθμός android:inputtype="numberdecimal" android:text="31"/> 3/6/ Ανάπτυξη εφαρμογών Android 34

35 Σκορ ντόμινο: πρόγραμμα Υλοποιεί τη συμπεριφορά της εφαρμογής, δηλαδή πώς ανταποκρίνεται στα συμβάντα. package com.mycomp.domino; //όνομα πακέτου import android.graphics.typeface; //βιβλιοθήκες που χρησιμοποιεί... Οι 'προχω' δεν χρησιμοποιούν την ιδιότητα android:onclick της XML για να ορίσουν το χειριστή, όπως δείχνω στα παραδείγματά μου. Ορίζουν listener ένα ανώνυμο στιγμιότυπο μιας κλάσης της οποίας μια μέθοδο έχουν υπερφορτώσει. Χέστηκε η φοράδα στο αλώνι! Δυστυχώς ένας ιδιαίτερα άσχημος και δυσνόητος κώδικας είναι απαραίτητος για να ορίσεις χειριστή για το παρατεταμένο κλικ. Η Google τσιγγουνεύτηκε να φτιάξει ιδιότητες android:onlongclick, κλπ. Γι αυτό λουστείτε το... public class MainActivity extends AppCompatActivity { //ονόματα για τις ποσότητες που παρακολουθεί int iskor1 = 0, iskor2 = 0; //σκορ παιχνιδιού //ονόματα για τα αντικείμενα της διεπαφής EditText etomada1, etomada2, etorio; TextView tvskor1, tvskor2; LinearLayout llkoympia; Button protected void oncreate(bundle savedinstancestate) {... //σύνδεση των ονομάτων της Java με τα ονόματα της XML tvpartida2 = (TextView) findviewbyid(r.id.partida2); //εκτελείται όταν κρατά παρατεταμένα πατημένο το πλήκτρο tvpartida2.setonlongclicklistener(new View.OnLongClickListener() { public boolean onlongclick(view v) { ); ipartida2 = 0; tvpartida2.settext("0"); return true; Τραγικό... 3/6/2017 igaviotis@gmail.com - Ανάπτυξη εφαρμογών Android 35

36 Σκορ ντόμινο: πολυμέσα Είναι εύκολο να παίξει ένας ήχος: 1. Στο φάκελο res φτιάχνουμε έναν υποφάκελο raw. Εκεί μέσα, κατά σύμβαση, βάζουμε τα αρχεία πολυμέσων (τραγούδια, βίντεο) που θα συνοδεύουν την εφαρμογή. 2. Για να παίξει το champions.mp3: MediaPlayer mp = MediaPlayer.create(this, R.raw.champions); mp.start(); Εντελώς άσχετο με πολυμέσα. Όλες οι εφαρμογές που έχουμε φτιάξει έχουν έκδοση 1. Καθώς τις εξελίσσουμε μπορεί να θέλουμε να τους ανεβάσουμε αριθμό έκδοσης. Αυτό γίνεται στα Gradle Scripts που αναλαμβάνουν την οικοδόμηση (Build) της εφαρμογής. Στο αρχείο build.gradle ανεβάζουμε τις ιδιότητες: versioncode 2 versionname "1.2 Σιγά μη γινόταν απλά και με προφανή τρόπο! Ονόματα αρχείων πρέπει να ξεκινούν με πεζό γράμμα. Για να προβάλουμε βίντεο, αφού βάλουμε το αρχείο του βίντεο στο φάκελο raw: 1. Τοποθετούμε μια όψη τύπου VideoView μέσα στο layout και την ονοματίζουμε, πχ vid_frame για να μπορούμε να τη «δούμε» από τη Java. 2. Της περνάμε το όνομα του αρχείου που περιέχει το βίντεο, πχ VideoView vv = (VideoView) findviewbyid(r.id.vid_frame); //δέσιμο XML και Java String p = "android.resource://" + getpackagename() + "/" + R.raw.somebody; vv.setvideouri(uri.parse(p)); // το πλήρες όνομα του αρχείου που θα προβληθεί vv.start(); 3/6/2017 igaviotis@gmail.com - Ανάπτυξη εφαρμογών Android 36

37 Αποσπάσματα κώδικα (Snippets) //Τοποθέτηση κειμένου σε TextView TextView tvetos = (TextView) findviewbyid(r.id.txtetos); tvetos.settext("2017"); //Ανάγνωση κειμένου από EditText EditText etxora = (EditText) findviewbyid(r.id.edthora); String s = ethora.gettext().tostring(); CheckBox cb = (CheckBox) findviewbyid(r.id.isok); String s; if (cb.ischecked()) { s = "Εντάξει"; else { s = "Πρόβλημα"; //Αποστολή Intent i = new Intent(Intent.ACTION_SENDTO); i.setdata(uri.parse("mailto:")); i.putextra(intent.extra_subject, "Γεια"); if (i.resolveactivity(getpackagemanager())!= null) startactivity(i); //Άνοιγμα οθόνης με όνομα activity Othoni2.java Intent i = new Intent(this, Othoni2.class); startactivity(i); //Στιγμιαία ειδοποίηση import android.widget.toast; Toast.makeText(getApplicationContext(), "Γεια χαρά...", Toast.LENGTH_SHORT).show(); //Παίζει τραγουδάκι από το αρχείο /res/raw/asong.mp3 import android.media.mediaplayer; MediaPlayer mp = MediaPlayer.create(this, R.raw.aSong); mp.start(); VideoView vv = (VideoView) findviewbyid(r.id.vid_frame); //δέσιμο XML και Java String p = "android.resource://" + getpackagename() + "/" + R.raw.someVideo; vv.setvideouri(uri.parse(p)); //το πλήρες όνομα του αρχείου που θα προβληθεί vv.start(); //ξεκινά να παίζει το βίντεο 3/6/2017 igaviotis@gmail.com - Ανάπτυξη εφαρμογών Android 37

38 Βάσεις δεδομένων Το Android περιλαμβάνει από κατασκευής την SQLite, ένα σύστημα διαχείρισης ΒΔ ελεύθερου κώδικα, απλό, αλλά με περιορισμένες δυνατότητες (πχ τύπους δεδομένων, διαχείριση χρηστών, επιδόσεις). Έτσι κι αλλιώς δεν έχουμε άλλη επιλογή. Η SQLite αποθηκεύει τη ΒΔ σε ένα αρχείο που εξ ορισμού πακετάρεται μαζί με την εφαρμογή και ΔΕΝ μπορείς να το προσπελάσεις (μεσαίωνας)! Μόνο με χακεριές και μόνο για τη δική σου εφαρμογή. Αλλωνών τις ΒΔ δεν μπορείς να τις δεις, παρά μόνον αν έχεις κάνει root το κινητό σου. Το ευχάριστο είναι ότι τουλάχιστον υποστηρίζει γλώσσα SQL. Για διευκόλυνση δίνεται μια βοηθητική κλάση και πάνω της χτίζουμε. Θα φτιάξουμε μια εφαρμογή που θα δημιουργεί έναν πίνακα στη ΒΔ και θα εκτελούμε προσθήκη, προβολή, διαγραφή εγγραφών. Διαδικασία 1. Ξεκινάμε με νέο project. 2. Διαμορφώνουμε το activity_layout, έτσι ώστε να δείχνει τα στοιχεία μιας εγγραφής. 3. Προσθέτουμε και τα πλήκτρα, χωρίς να κάνουν τίποτα, βέβαια. 4. Δημιουργούμε τη ΒΔ και τον πίνακα με τα πεδία του. 5. Προσθέτουμε εγγραφές. 6. Προβάλουμε εγγραφές. 7. Διαγράφουμε εγγραφές. 3/6/ Ανάπτυξη εφαρμογών Android 38

39 Ζωγραφιά: οθόνη Η διεπαφή είναι ένα κατακόρυφο LinearLayout μέσα στο οποίο είναι δυο TableLayout (θα μπορούσε να έχει και ScrollView, αν δεν χωράει). Tο πρώτο TableLayout είναι 6 Χ 2. Η αριστερή στήλη έχει TextView με τις ετικέτες των πεδίων του πίνακα. H δεξιά στήλη έχει τις τιμές σε EditText και για ποικιλία έβαλα ένα CheckBox και ένα RadioGroup. Το δεύτερο TableLayout είναι 2 Χ 3 και περιέχει τα πλήκτρα. Το TableLayout περιέχει TableRow που περιέχουν τα στοιχεία της κάθε γραμμής. Η λογική του μοιάζει με την ετικέτα <table> της HTML. Για να κρατήσω μικρό το XML έχω χρησιμοποιήσει styles. Ονόματα έχουν μόνον οι όψεις που αναφέρονται από τη Java. Χρησιμοποίησα android:hint στα EditText, μου αρέσει. To RadioGroup περικλείει αμοιβαία αποκλειόμενες επιλογές (RadioButton). Ορίζεται μία ως αρχικά επιλεγμένη και αν επιλέξεις διαφορετική, απόεπιλέγεται η προηγούμενη. 3/6/2017 igaviotis@gmail.com - Ανάπτυξη εφαρμογών Android 39