Εργαστηριακές Σημειώσεις

Transcript

1 Πολυμεσικές Υπηρεσίες στην Υγεία [κωδ. μαθήματος ΛΟΓ51] Εργαστηριακές Σημειώσεις ΑΝΑΠΤΥΞΗ ΕΦΑΡΜΟΓΩΝ ΣΕ ΠΕΡΙΒΑΛΛΟΝ ANDROID Μανώλης Τσικνάκης, Αλέξανδρος Ρονιώτης, Ευαγγελία Μανιαδή Ηράκλειο 2016

2 κεφαλαιο Εισαγωγή στο Android Studio Το Android είναι το λειτουργικό σύστημα που έχει αναπτύξει η εταιρεία Google για τις έξυπνες συσκευές (smart devices), δηλαδή τα σύγχρονα κινητά, tablets, wearables, κλπ. Το Android Studio είναι το επίσημο ολοκληρωμένο περιβάλλον ανάπτυξης (IDE) της Google για την ανάπτυξη εφαρμογών που τρέχουν στο λειτουργικό σύστημα Android. Αυτή την πλατφόρμα, θα χρησιμοποιήσετε και στο μάθημα. Ελάχιστες προδιαγραφές Το Android Studio είναι ήδη εγκατεστημένο στο εργαστήριο σε λειτουργικό σύστημα Windows 7, αλλά προτείνεται να το εγκαταστήσετε και σε δικό σας υπολογιστή που τρέχει λειτουργικό Windows, Mac ή Linux. Οι επίσημες προδιαγραφές του υπολογιστή που τρέχει το Android είναι αυτές: Microsoft Windows 10/8/7/Vista/2003 (32 or 64-bit). RAM 2 GB RAM minimum, προτεινόμενο 8 GB RAM 5500 MB ελεύθερο χώρο στο σκληρό δίσκο για το Android Studio, τουλάχιστον 4.5 GB για το Android SDK, το emulator και κάποια caches Όλα τα απαραίτητα προγράμματα για να τρέξετε το Android Studio είναι ανοιχτού κώδικα και μπορείτε να τα βρείτε με απλή αναζήτηση στο διαδίκτυο. Για να ξεκινήσετε θα πρέπει να εγκαταστήσετε τα εξής προγράμματα: Android Studio 2 Java Development Kit (JDK) 8 Βήμα 1 - Εγκατάσταση JDK 8 Κατεβάζουμε το Java Development Kit (JDK) 8 από την επίσημη ιστοσελίδα της Java και κάνουμε την εγκατάσταση, πατώντας Next σε όλες τα στάδια εγκατάστασης. Το JDK είναι το πακέτο ανάπτυξης της Java, η οποία από το 2006 είναι γλώσσα ανοιχτού κώδικα (GPL). Η Java είναι η γλώσσα που θα γράφουμε τις εφαρμογές Android στο μάθημα και κατά την έναρξη του εργαστηρίου θεωρούμε ότι όλοι οι φοιτητές έχουν ήδη γνώσεις Java. Θα γίνουν μερικές επαναληπτικές διαλέξεις για τις βασικές έννοιες της Java, αλλά αν δεν έχετε ήδη γνώσεις, θα πρέπει να μάθετε τη γλώσσα από μόνοι σας. Σελίδα 2

3 Βήμα 2 - Εγκατάσταση Android Studio στον δικό σας υπολογιστή Αφού εγκαταστήσετε το JDK 8, ανοίξτε το αρχείο εγκατάστασης που κατεβάσατε από την επίσημη ιστοσελίδα του Android Studio. Σε κάποια συστήματα κάποια από αυτά τα βήματα είναι λίγο διαφορετικά Στη συνέχεια επιλέξτε όλα τα components και πατήστε επόμενο Αποδεκτείτε τους όρους (I Agree) και συνεχίστε Σελίδα 3

4 Επιλέξτε το φάκελο που θα εγκατασταθεί το Android Studio και το SDK. *μπορείτε να αφήσετε τα προεπιλεγμένα και απλώς να επιλέξετε επόμενο Επιλέξτε Εγκατάσταση Σελίδα 4

5 και ξεκινάει η εγκατάσταση που θα πάρει αρκετή ώρα. Όταν ολοκληρωθεί πατήστε Επόμενο.. και όταν τελειώσει επιλέγουμε Τέλος για να ξεκινήσει το Android Studio Με γεια! Μερικές φορές κατά την εγκατάσταση ή μετά την εκκίνηση του Android Studio μπορεί να εμφανιστούν κάποιες περεταίρω ρυθμίσεις ή προβλήματα. Ο ευκολότερος τρόπος για να τις αντιμετωπίσετε είναι να αναζητήσετε σε μια μηχανή αναζήτησης, όπως το google, για το συγκεκριμένο πρόβλημα. Το πιθανότερο είναι να υπάρχουν χιλιάδες άτομα που έχουν δει το ίδιο πρόβλημα. Γενικότερα, να θυμάστε ότι ο καλύτερος φίλος ενός καλού προγραμματιστή είναι το google. Σελίδα 5

6 Βήμα 3 - Η πρώτη σας εφαρμογή Hello World 3.1 Αρχικοποποίηση προγράμματος Αφού έχετε εγκαταστήσει το JDK 8 και το Android Studio, είστε σε θέση πλέον να δημιουργήσετε την πρώτη σας εφαρμογή για έξυπνες συσκευές. Εκκινήστε το Android Studio στον υπολογιστή σας κι επιλέξτε την επιλογή Start a new Android Studio Project για να δημιουργήσετε ένα νέο Project Επιλέξετε ένα όνομα για την εφαρμογή σας, π.χ. My First Demo Στο Company Domain μπορείτε να το αφήσετε ως έχει (είναι ουσιαστικά το site της εταιρείας που δημιουργεί μια εφαρμογή π.χ. google.com). Παρατηρήστε ότι αυτό επηρρεάζει το Package Name του Project Το Project Location είναι ο φάκελος που θα αποθηκευτεί το Project σας (αφήστε το ως έχει) Σελίδα 6

7 Στη συνέχεια θα μας ζητηθεί να ορίζουμε σε ποια πλατφόρμα θα εργαστούμε. Μπορείτε να επιλέξετε Android κινητό τηλέφωνο ή tablet, wearable, TV, auto και glass. Μπορείτε να επιλέξετε το κινητό API 21: Android 5.0 Lollipop, με το οποίο θα εργαστούμε επί το πλείστον στο μάθημα. *όσο νεότερη πλατφόρμα επιλέγετε, τόσο πιο πολλές δυνατότητες θα έχετε αλλά θα αποκλείσετε παλιότερες συσκευές να τρέχουν την εφαρμογή σας. Στη συνέχεια επιλέγουμε το είδος του Activity*. Υπάρχουν έτοιμα activites για χάρτες, μενού, settings, κλπ τα οποία θα δούμε αργότερα. Στα αρχικά μαθήματα θα επιλέγουμε το Empty Activity (μπορεί να σας βγαίνει κι ως Blank Activity) Επιλέξτε Empty Activity και Επόμενο *ένα Activity είναι ουσιαστικά μια σελίδα στο app μας, μια εφαρμογή έχει συνήθως πολλά activities. Σελίδα 7

8 Τελευταίο βήμα πριν ανοίξει το κυρίως περιβάλλον του Android Studio, είναι να ορίσουμε τα ονόματα για το Activity και το Layout Αφήστε το Default και πατήστε Τέλος για να ξεκινήσει το κυρίως πρόγραμμα, όπου γράφουμε κώδικα. *όταν έχετε πολλά activities σε μια εφαρμογή, καλό είναι να δίνετε δικά σας ονόματα για να ξέρετε εύκολα σε ποια activity αναφέρεστε. Το Developer Tool ξεκινάει με το Gradle, που είναι η Build Engine για το Android. Το Gradle είναι κάτι σαν compiler και θα το βλέπετε συνεχώς όταν τρέχετε τις εφαρμογές σας να τις κάνει πριν compile Σελίδα 8

9 Πιθανό σφάλμα όταν ανοίξετε το Android Studio για πρώτη φορά: δεν έχουν οριστεί σωστά οι τοποθεσίες του SDK και του JDK 8. Για να σιγουρευτείτε, επιλέξτε File -> Project Structure Φροντίζετε να έχετε σωστά τους φακέλους για το SDK και το JDK (προσοχή να είναι στο jdk1.8 κι όχι σε προγενέστερη έκδοση) To NDK δεν σας ενδιαφέρει αυτή τη στιγμή, αγνοήστε το. Αφού είσαστε εντάξει, επιλέγουμε ΟΚ Σελίδα 9

10 3.2 Ρύθμιση Emulator Ο emulator είναι μια εικονική συσκευή στην οποία δοκιμάζετε τις εφαρμογές σας. Στο παρόν κεφάλαιο, θα επιλέξετε ένα εικονικό κινητό τηλέφωνο. Επιλέγετε το εικονίδιο AVD Manager, όπως στην εικόνα. Αν για κάποιο λόγο δεν σας εμφανίζεται, μπορείτε να πάτε κι από το μενού Tools -> Android -> AVD Manager Την πρώτη φορά δεν θα υπάρχει κάποια έτοιμη εικονική συσκευή Επιλέγετε Create Virtual Device Σελίδα 10

11 Σας εμφανίζονται οι συσκευές που μπορείτε να επιλέξετε. Επιλέξτε Nexus 5x Αν ο υπολογιστής σας τρέχει λειτουργικό σύστημα 64bit, επιλέξτε Lollipop API 22 x86_64 Αν τρέχει 32bit σύστημα, επιλέξτε Lollipop API 22 x86 Σελίδα 11

12 Αφήστε τις προεπιλογές ως έχουν και Τέλος Πλέον η εικονική σας συσκευή έχει αποθηκευτεί για να τρέχετε εκεί τις μελλοντικές σας εφαρμογές. Κλείστε τον AVD Manager 3.3 Εκτέλεση εφαρμογής Πλέον είσαστε λογικά έτοιμοι για να εκτελέσετε την πρώτη σας εφαρμογή. Αρχικά θα πρέπει να ανοίξετε το αρχείο activity_main.xml όπου θα σας εμφανίσει ένα κινητό τηλέφωνο με ένα TextView που έχει ήδη τη φράση Hello World. Αυτό είναι που θα δείτε αν τρέξετε το πρόγραμμα Σελίδα 12

13 Για να τρέξετε την εφαρμογή αυτή στην εικονική συσκευή που φτιάξατε πριν λίγο, πατήστε το πρασίνο βελάκι ή πατήστε Shift+F10 Επιλέξτε την εικονική συσκευή που δημιουργήσατε και πατήστε ΟΚ Σελίδα 13

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

15 1.2 Επισκόπηση του Android Studio Την πρώτη φορά που θα ανοίξετε το Android Studio, ίσως σας αγχώσουν τα πολλά εργαλεία και παράθυρά που έχει το περιβάλλον του. Σε αυτό εδώ το σύντομο κεφάλαιο, θα πάρετε μια σύντομη ιδέα για τα βασικά στοιχεία που θα χρειαστείτε, ειδικά στα αρχικά σας βήματα, και με τον καιρό θα μαθαίνετε περισσότερα. Παρακάτω βλέπετε την αρχική σελίδα του Android Studio (αν δεν σας εμφανίζεται έτσι, ανοίξτε το activity_main.xml, όπως το προηγούμενο κεφάλαιο. Μπάρα εργαλείων Στο πάνω μέρος βλέπετε την μπάρα εργαλείων, από όπου θα χρησιμοποιήσετε σχεδόν αποκλειστικά μόνο το κουμπί Run App που φορτώνει την εφαρμογή σας στην εικονική συσκευή (AVD). Υπάρχουν και τα κλασικά κουμπιά για άνοιγμα, αποθήκευση αρχείων, Cut/Copy/Paste κλπ. Τρέχων φάκελος / αρχείο Κάτω από τη μπάρα εργαλείων, βλέπετε το path του φακέλου ή αρχείου, στο οποίο εργάζεστε. Σελίδα 15

16 Τα βασικά αρχεία του Project Αριστερά στο Android Studio βλέπετε το δέντρο με τα αρχεία/φακέλους που υπάρχουν στο project μας Από εδώ μπορείτε να ανοίγετε αρχεία του project σας, να δημιουργείτε νέα, κλπ Το αρχείο manifest Παρακάτω βλέπετε το αρχείο AndroidManifest.XML. Στο αρχείο αυτό αποθηκεύετε την βασική πληροφορία της εφαρμογής σας, όπως το theme (στυλ), τον τίτλο, το εικονίδιο, κλπ. Όλα αυτά γράφονται σε μορφή XML, μια γλώσσα σήμανσης, που χρησιμοποιείται ευρέως για την αναπαράσταση αυθαίρετων δομών δεδομένων. Μην αγχώνεστε αν δεν την ξέρετε ήδη. Σελίδα 16

17 Το αρχείο MainActivity Στο φάκελο Java, θα δείτε το αρχείο MainActivity, στο οποίο μέσα θα γράφετε τον κώδικα (Java) για την εφαρμογή σας. Είναι ουσιαστικά το αρχείο που θα επεξεργαζόσαστε περισσότερο από όλα στο μάθημα. Ο φάκελος res Στο φάκελο res (από το resources) υπάρχουν όλα τα αρχεία που έχουν να κάνουν με τους πόρους που χρησιμοποιεί η εφαρμογή. Για παράδειγμα στο φάκελο drawable θα βάζετε τις εικόνες που πιθανόν να χρησιμοποιείτε, στο φάκελο raw τα αρχεία ήχου, κλπ Σελίδα 17

18 Το αρχείο activity_main.xml Το σημαντικότερο αρχείο του φακέλου res είναι το activity_mail.xml, το οποίο συνήθως εμφανίζεται και στην πρώτη εκκίνηση της εφαρμογής. Το αρχείο αυτό περιέχει πληροφορία για το πώς θα φαίνεται η εφαρμογή στη συσκευή. Όταν ανοίξετε το activity_main.xml, θα εμφανιστεί ένα «screenshot» της εφαρμογής σε ένα κινητό, δηλαδή το design της εφαρμογής Την πρώτη φορά θα έχει μόνο ένα text field με το Hello World. *το Design της διπλανής εικόνας ίσως είναι λίγο διαφορετικό από αυτό που βλέπετε στον δικό σας υπολογιστή Σελίδα 18

19 Αριστερά από τη συσκευή υπάρχει η λίστα με τα widgets που μπορείτε να εισάγετε στην εφαρμογή όπως κείμενο, εικόνα, κουμπιά, progress bars, κλπ Όταν θέλετε να χρησιμοποιήστε κάτι από αυτά, το πιάνετε από τη λίστα και το σέρνετε στην επιφάνεια της συσκευής Στην πάνω μεριά υπάρχουν μερικά εργαλεία όπως ο προσανατολισμός (orientation) του κινητού, το πρότυπο (theme), zoom in και zoom out, κλπ Αν επιλέξετε το Text είτε από κάτω από τη συσκευή, είτε από το εικονίδιο τότε θα εμφανιστεί το design της εφαρμογής σε μορφή κώδικα XML. Μπορείτε να επιστρέψετε, επιλέγοντας το Design. Σελίδα 19

20 Αν από τέρμα δεξιά επιλέξετε το Preview, τότε θα βλέπετε ταυτόχρονα τον κώδικα XML και το Design της εφαρμογής. Αυτή είναι μια πολύ βολική απεικόνιση της εφαρμογής μας, καθώς όπως θα δείτε αργότερα, πολλές φορές θα πρέπει να γράφετε στο XML απευθείας. Στην δεξιά μπορείτε να δείτε το δέντρο από τα components που υπάρχουν στο design. Αρχικά θα δείτε ένα Layout του τύπου RelativeLayout (σκεφτείτε το σαν το κενό μέρος της οθόνης κάτω από τον μπλε τίτλο). Μέσα σε αυτό υπάρχει ένα component TextView που είναι το κείμενο του Hello World. Αν κάνετε double click στο Hello World πάνω στη συσκευή, τότε μπορείτε να αλλάξετε το κείμενο, αλλά και να του ορίσετε ένα id ώστε να μπορείτε να το αναζητήσετε μέσα στον κώδικά σας. (θα δούμε αργότερα περισσότερα) Σελίδα 20

21 Δεξιά κάτω υπάρχουν τα properties για το component που έχετε επιλέξει στο Component Tree. Π.χ. εδώ βλέπετε τα Properties το component TextView Μπορείτε να αλλάξετε ότι θέλετε, όπως το μέγεθος των γραμμάτων, τη γραμματοσειρά, το χρώμα, κλπ. Σελίδα 21

22 1.3 Μορφοποίηση Κειμένου Στο προηγούμενο κεφάλαιο είδατε το παράθυρο με τα Properties ενός Component. Εδώ θα δοθεί λίγο περισσότερο βάρος στη μορφοποίηση κειμένου μέσα από τα properties και κάποια εισαγωγικά θέματα με το κείμενο. Απλώς ακολουθήστε τα βήματα του παραδείγματος για να αλλάξετε το κείμενό σας. Αρχικά τροποποιήστε το Hello World με το κείμενο Hi NAME, όπου NAME βάλετε το όνομά σας. Στη συνέχεια θα επικεντρωθείτε στο Properties layout:margin Βάλτε στο all την τιμή 30 και πατήστε Enter. Παρατηρήστε ότι αφήνει περιθώριο (margin) περιμετρικά από το αντικείμενο. Όμως τι είναι αυτά τα 30; Pixels, cm, τι; Παρατηρήστε ότι εκεί που γράψατε 30 τώρα γράφει 30dp Σελίδα 22

23 dp density independent pixel Το dp βασίζεται στην πυκνότητα των pixel της κάθε οθόνης Χοντρικά είναι 1/160 της ίντσας σε απόσταση. Το χρησιμοποιούμε για να φαίνεται όσο το δυνατόν παρόμοια η εφαρμογή μας σε συσκευές με διαφορετικές αναλύσεις οθονών. Τώρα μπορείτε να ορίσετε διαφορετικό margin ανά κατεύθυνση, όπως δίπλα. layout:centerinparent Αλλάξτε το σε horizontal, vertical και both Παρατηρήστε ότι αλλάζει η στοίχιση του αντικειμένου σας ως προς το parent (εδώ το parent είναι το RelativeLayout, δηλαδή όλη η λευκή επιφάνεια) Επαναφέρετε το στην αρχική θέση όταν τελειώσετε style Πατήστε στο κουτάκι και θα σας ανοίξει ένα νέο παράθυρο. Εδώ μπορείτε να επιλέξετε προεπιλεγμένα στυλ κειμένου. Παίξτε λίγο και παρατηρήστε ότι αλλάζει το στυλ του κειμένου σας Σελίδα 23

24 background Υπάρχουν διάφοροι τρόποι να επιλέξετε ένα χρώμα για το υπόβαθρο. Στην αναζήτηση γράψτε ένα χρώμα, π.χ. blue και επιλέξτε το. Μπορείτε να επιλέξετε και εικόνα ή να ορίσετε ακριβώς το RGB κωδικό του χρώματος. Όταν τελειώσετε, αφήστε το χρώμα για τα επόμενα βήματα. minwidth, maxwidth, minheight, minlines Μπορείτε να ορίσετε το ελάχιστο και το μέγιστο εύρος του κειμένου. Για παράδειγμα, ορίστε το minwidth σε 160dp και παρατηρήστε τη διαφορά. Επαναφέρετε στο 0 όταν τελειώσετε Σελίδα 24 Quiz: Μπορείτε να βρείτε πόσα περίπου dps είναι η οθόνη; Padding Το padding είναι το «εσωτερικό» περιθώριο, δηλαδή το περιθώριο ανάμεσα στο κείμενο και στην εξωτερική περίμετρο του αντικειμένου. Γιατί όμως να το κάνουμε να ακούγεται τόσο δύσκολο, αφού μπορείτε να το καταλάβετε αμέσως με ένα παράδειγμα. Ορίστε μια τιμή 10dp και παρατηρήστε τι είναι το padding. Αντίστοιχα με το margin, μπορείτε να βάλετε άλλες τιμές δια δεξιά, αριστερά, πάνω και κάτω.

25 textsize Ορίστε την τιμή 50sp και πατήστε Enter. Θα μεγαλώσουν τα γράμματα. Τι είναι όμως πάλι αυτό το sp; sp scale independent pixel Το sp μοιάζει με το dp, αλλά βασίζεται και στην προτίμηση του χρήστη για μεγέθη κειμένου. Προτείνεται να το χρησιμοποιείτε πάντα για τον ορισμό μεγέθους κειμένου. Μπορεί να μη διακρίνετε διαφορά αν χρησιμοποιήστε dp αντί για sp, αλλά σε περιπτώσεις που κάποιος έχει ορίσει default διαφορετικό μέγεθος γραμματοσειράς (π.χ. κάποιος με πρόβλημα όρασης), τότε η εφαρμογή σας δε θα προσαρμοστεί στις προτιμήσεις του. Golden Rule for Android Developer! Χρησιμοποιώ για τα πάντα dp, εκτός από τα κείμενα που χρησιμοποιώ sp άσκηση 1 Στην προηγούμενη εφαρμογή, προσθέστε ένα δεύτερο TextView κάτω από το ήδη υπάρχον, που: έχει την φράση You Only Live Once! έχει κίτρινα γράμματα έχει μέγεθος γραμμάτων 20sp έχει πράσινο φόντο έχει padding 5dp τριγύρω του έχει περιθώριο από αριστερά 50dp Αφού την έχετε έτοιμη, εκτελέστε την στον Emulator Σελίδα 25

26 1.4 Buttons Εδώ θα δείτε κάποια εισαγωγικά πράγματα για το πώς βάζετε κουμπιά στην εφαρμογή σας. Θα δημιουργήσετε ένα κουμπί που θα στέλνει ένα μήνυμα στα logs του Android Monitor (θα δείτε το Android Monitor κάτω αριστερά στο περιβάλλον του Android Studio). Αρχικά πηγαίνετε στα widgets και «τραβήξτε» ένα νέο κουμπί (Button) πάνω στην οθόνη του κινητού. Το κουμπί θα εμφανιστεί στην επιφάνεια του κινητού. Τώρα θα «παίξετε» λίγο με κάποιες βασικά Properties. Από τα Properties αλλάξτε το χρώμα του κουμπιού από το background σε ότι θέλετε (π.χ. κόκκινο) Αλλάξτε το κείμενο σε «Say Hello» Μπορείτε είτε να κάνετε διπλό κλικ πάνω στο κουμπί, είτε να αλλάξετε το property text. Μόλις πατήσετε enter, το κείμενο πάνω στο κουμπί θα αλλάξει Σελίδα 26

27 Αν εκτελέσετε την εφαρμογή στον emulator, τώρα θα εμφανιστεί και το κουμπί. Όταν πατάτε όμως πάνω του δεν θα αποκρίνεται. Αυτό είναι αναμενόμενο, καθώς δεν έχετε ορίσει ακόμη κάποια λειτουργικότητα. Στη συνέχεια, θα προσθέσετε και λίγη διαδραστικότητα, ώστε όταν πατάτε το κουμπί να εμφανίζει ένα μήνυμα στο console Αρχικά, από το φάκελο της Java, ανοίξτε το αρχείο mainactivity.java που είχαμε αναφέρει σε προηγούμενο κεφάλαιο. Στο αρχείο mainactivity.java θα δείτε κάποιον προϋπάρχοντα κώδικα, που δημιουργείται αυτόματα την πρώτη φορά που άνοιξε το Project μας. Όπως έχει ήδη αναφερθεί, σε αυτό το αρχείο θα γράφετε τον κυρίως κώδικά σας. Προς το παρόν, αγνοήστε το τι κάνει επακριβώς ο κώδικας που έχει μέσα το αρχείο. Στον κώδικα θα δείτε τη μέθοδο oncreate η οποία εκτελείται την πρώτη φορά που ανοίγει η εφαρμογή σας (κάτι αντίστοιχο με τη συνάρτηση main των άλλων γλωσσών προγραμματισμού) Σκοπός μας, είναι να δημιουργήσουμε μια νέα μέθοδο σε java που θα εκτελείται όταν πατάμε το κουμπί. Η μέθοδος αυτή θα γράφει ένα μήνυμα στα logs του console. Επιστρέφουμε στα Properties του Button και στο onclick γράψτε clickfunction, δηλαδή το όνομα της συνάρτησης που θα καλείται όταν πατάτε το Button. Σελίδα 27

28 mainactivity.java Μέσα στο class MainActivity γράφουμε τον παραπάνω κώδικα για το clickfunction. Η μέθοδος αυτή καλείται από ένα Button και το Button είναι type View. Γι αυτό γράφουμε και το import android.view.view; ώστε να είναι διαθέσιμες οι ορισμοί των μεθόδων / κλάσεων του View. Επίσης μέσα στη μέθοδο, γράφουμε το Log.i, το οποίο περνάει πληροφορία στα log του console τα δύο του ορίσματα ως String. Αν τρέξουμε τώρα την εφαρμογή και πατήσουμε το κουμπί, τότε θα δούμε ότι κάθε φορά που πατάμε γράφει το μήνυμά μας στα logs του Android Monitor Μπορεί να μη σας φαίνεται πολύ εντυπωσιακό, αλλά μόλις φτιάξατε την πρώτη διαδραστική σας εφαρμογή! Συγχαρητήρια!!! άσκηση 2 Φτιάξτε μια εφαρμογή από την αρχή με όνομα mybuttondemo Η εφαρμογή θα έχει ένα κουμπί (Button) που θα γράφει πάνω Click me! Όταν το κουμπί πατιέται να εμφανίζει στα Logs το μήνυμα «You clicked me!!!» Σελίδα 28

29 1.6 TextFields Εδώ θα πάτε λίγο παραπέρα σε σχέση με τη διαδραστικότητα της εφαρμογής σας και θα δείτε κάποια πράγματα για τα TextFields, δηλαδή τα πεδία που μπορείτε να γράψετε κείμενο. Σκοπός είναι να δημιουργήσετε μια εφαρμογή όπου θα γράφετε κείμενο σε ένα πεδίο TextField και όταν πατάτε το κουμπί, η πληροφορία από το TextField θα γράφεται στο Android Monitor Από τα Widgets πάρτε το TextField -> Plain Text και σύρτε το στην επιφάνεια της συσκευής. Στη γλώσσα του Android αυτό λέγεται edittext Στην αρχή είναι πολύ λεπτό. Για να «πιάσει» μεγαλύτερο χώρο, στα Properties αλλάξτε το layoutwidth σε fill_parent Το fill_parent δεσμεύει όλο το χώρο του parent, δηλαδή εδώ του RelativeLayout που είναι όλη η λευκή περιοχή της οθόνης. Το επόμενο βήμα είναι να τροποποιήσετε τη μέθοδο clickfunction του προηγούμενου παραδείγματος ώστε να γράφει στο Android Monitor το περιεχόμενο του textfield. Για να γίνει αυτό, πρέπει κάπως να ξέρει ποιο είναι textfield Σελίδα 29 Το πρώτο βήμα είναι να δώσετε ένα id στο textfield,

30 public void clickfunction(view view) { EditText mytextfield = (EditText) findviewbyid(r.id.myedittext); Log.i("Message","Hello there! You only live once!"); } κάνοντας διπλό κλικ. Δώστε το id myedittext Μετά δημιουργήσετε μια μεταβλητή mytextfield τύπου EditText Έτσι θα μπορεί η clickfunction να μπορεί να έχει πρόσβαση στο textfield Το findviewbyid(r.id.myedittext); βρίσκει το textfield με id myedittext Η εντολή findviewbyid βρίσκει από τα Resources (R) κάτι που να έχει id myedittext, δηλαδή το TextField που φτιάξατε public void clickfunction(view view) { EditText mytextfield = (EditText) findviewbyid(r.id.myedittext); Log.i("Your Message", mytextfield.gettext().tostring()); } Στη συνέχεια παίρνετε το κείμενο από το mytextfield και το περνάτε στα logs. Τρέξτε την εφαρμογή, γράψτε κάτι μέσα στο textfield και πατήστε το κουμπί. Παρατηρήστε τα logs στο Android Monitor. Πρέπει να βλέπετε τα μηνύματά σας! άσκηση 3 Φτιάξτε μια νέα εφαρμογή με όνομα mytextfielddemo. Η εφαρμογή θα έχει ένα κουμπί (Button) που θα γράφει πάνω Submit! Πάνω από το κουμπί βάλτε δύο fields, ένα για username κι ένα για password(για το password πάρτε το ανάλογο TextField από τα Widgets). Όταν το κουμπί πατιέται να εμφανίζει στα Logs τα username και password που θα έχουν περαστεί Σελίδα 30

31 1.7 Messages Όλα καλά ως τώρα, αλλά το μόνο που έχετε κάνει διαδραστικό είναι να στέλνετε πληροφορία στα logs του Android Monitor. Τώρα είσαστε έτοιμοι να μάθετε να στέλνετε πληροφορία στην οθόνη του κινητού σας. Εδώ θα δημιουργήσετε μια εφαρμογή που θα προβάλει ένα μήνυμα στην οθόνη. Για το σκοπό αυτό θα μάθετε την εντολή Toast. Το περίεργο αυτό όνομα προέρχεται από τον τρόπο που πετάγεται το μήνυμα στην οθόνη που θυμίζει τον τρόπο που πετάγονται οι φρυγανιές από μια φρυγανιέρα (toaster) public void clickfunction (View view) { Toast.makeText(getApplicationContext(), "Hi Alex!", Toast.LENGTH_LONG).show(); //EditText mytextfield = (EditText) findviewbyid(r.id.myedittext); //Log.i("Your Message", mytextfield.gettext().tostring()); } Αλλάξτε την μέθοδο clickfunction της προηγούμενης εφαρμογής όπως δίπλα Δηλαδή προσθέστε τη μέθοδο Toast και βάλτε τον κώδικά που στέλνει τα logs σε σχόλια Ας δούμε τώρα τι κάνει η εντολή που βάλαμε Toast.makeText(getApplicationContext(), "Hi Alex!", Toast.LENGTH_LONG).show(); Το maketext δημιουργεί κείμενο και παίρνει τρία ορίσματα. Το πρώτο είναι το Context, που χονδρικά δείτε το σαν πληροφορία για την εφαρμογή που τρέχει (αυτό αρκεί να ξέρετε για την ώρα). Το δεύτερο είναι το String που θα περαστεί ως μήνυμα. Το τρίτο αφορά το χρόνο που θα εμφανιστεί στην οθόνη και μπορεί να πάρει τιμή Toast.LENGTH_LONG, Toast.LENGTH_SHORT ή κάποια τιμή σε ms που θα δώσετε (π.χ για 3 δευτερόλεπτα) Τέλος, για να εμφανιστεί το μήνυμα, εκτελούμε σε όλο το κείμενο το show() Τρέξτε την εφαρμογή και δείτε ότι πράγματι εμφανίζει μήνυμα όταν πατάτε το κουμπί. Σελίδα 31

32 άσκηση 4 Φτιάξτε μια νέα εφαρμογή με όνομα mytoastdemo. Η εφαρμογή θα έχει ένα κουμπί (Button) που θα γράφει πάνω Submit! Πάνω από το κουμπί βάλτε ένα TextField για name. Όταν το κουμπί πατιέται να εμφανίζει στην οθόνη Hi XXXX όπου XXXX θα είναι το όνομα που θα έχετε περάσει στο TextField. tip: για να ενώσετε δύο string A και B μπορείτε να χρησιμοποιήσετε το A+B Σελίδα 32

33 1.8 Images Είσαστε σχεδόν έτοιμοι για την πρώτη σας εφαρμογή στην Υγεία. Πριν από αυτό, ας δούμε κάποια εισαγωγικά πράγματα για τις εικόνες στο Android. Θα δείτε πως βάζετε εικόνες στο Android Studio και πως μπορείτε να τις αλλάξετε μέσα από τον κώδικα. Αρχικά κατεβάστε από τη σελίδα του μαθήματος στο eclass -> Έγγραφα -> Υλικό Εργαστηρίου» Υλικό» 1.8 Εικόνες για εργασία τις εικόνες heart.png και lungs.png Τις εικόνες στο Android Studio θα τις αποθηκεύετε στο φάκελο res/drawable. Για να τον ανοίξετε, πατήστε δεξί κλικ πάνω του και μετά Show in Explorer. Ανοίξτε το φάκελο και μεταφέρετε τα αρχεία heart.png και lungs.png εκεί Σελίδα 33

34 Είσαστε έτοιμοι να βάλετε μια εικόνα στην εφαρμογή σας από το Widgets -> ImageView Σύρετε ένα ImageView στην πάνω δεξιά γωνία της οθόνης. Αλλάξτε το layout: width σε match_parent Τώρα βάλτε την εικόνα heart.png πατώντας το src και μετά Drawable. Βρείτε το αρχείο και επιλέξτε ΟΚ για να εμφανιστεί Παίξτε λίγο με το Property scaletype για να δείτε πώς προσαρμόζεται η εικόνα μέσα στο ImageView public void clickfunction(view view) { ImageView myimage = (ImageView) findviewbyid(r.id.imageview); myimage.setimageresource(r.drawable.lungs); } Η πρώτη γραμμή βρίσκει το ImageView με το id imageview Η δεύτερη γραμμή αλλάζει την εικόνα στο Lungs. Σελίδα 34 Τώρα, θα αλλάξετε λίγο την λειτουργικότητα και θα αλλάξετε την εφαρμογή: Να αλλάζει η εικόνα από heart.png στην lungs.png όταν πατήσετε το κουμπί. Αλλάξετε την clickfunction όπως δίπλα

35 Τρέξτε το. Αν πατήσετε το κουμπί θα αλλάξει η εικόνα σε lung. Παρόλο που δεν είχε κάποιο ιδιαίτερο νόημα η τελευταία εφαρμογή, έχετε πλέον τις απαραίτητες γνώσεις για να λύσετε την πρώτη εργασία για το μάθημα! Καλή επιτυχία! Σελίδα 35