Για να κάνουμε μια εικόνα να εξαφανίζεται και μια να εμφανίζεται (cross fade), κάνουμε τον συνδυασμό των από πάνω

Transcript

1 4. Media Έχετε ήδη δει πως βάζετε μια εικόνα στο Android Studio με το ImageView. Σε αυτό το κεφάλαιο θα μάθετε πώς μπορείτε να κάνετε κάποια βασικά animation και να διαχειριστείτε Video και Audio. 4.1 Animations με εικόνες Fade out Ένα από τα πιο κοινά animations με εικόνες είναι το fade in και fade out. Αν έχετε μια εικόνα σε ImageView, μπορείτε να τρέξετε το παρακάτω για να αλλάξετε το alpha από 1 (100% εμφανές) σε 0 (0% εμφανές δηλαδή διάφανο). ImageView image = (ImageView) findviewbyid(r.drawable.myimage); image.animate().alpha(0f).setduration(2000); Fade In Για να εμφανιστεί μια εικόνα αντίστοιχα από εκεί που έχει διαφάνεια 100% (alpha = 1f) ImageView image = (ImageView) findviewbyid(r.drawable.myimage); image.animate().alpha(1f).setduration(2000); Cross Fade Για να κάνουμε μια εικόνα να εξαφανίζεται και μια να εμφανίζεται (cross fade), κάνουμε τον συνδυασμό των από πάνω ImageView image1 = (ImageView) findviewbyid(r.drawable.myimage1); ImageView image2 = (ImageView) findviewbyid(r.drawable.myimage2); image1.animate().alpha(0f).setduration(2000); Image2.animate().alpha(1f).setDuration(2000); άσκηση 1 Κάνετε δύο κουμπιά (button) T1 MRI και T2 MRI Στη συνέχεια κατεβάστε τις δύο εικόνες από το eclass για το εργαστήριο (Υλικό 4.1) και κάντε Cross fade τις εικόνες ανάλογα με το τι πατάει ο χρήστης. Translations Τα Translations είναι για την μεταφορά μιας εικόνας π.χ. έξω από την οθόνη, πάνω, κάτω κλπ. H εντολή image.animate().translationyby(1000f).setduration(2000); θα μεταφέρει την εικόνα 1000 pixel κάτω (δηλαδή κατά τον άξονα Υ). Αντίστοιχα η Μανώλης Τσικνάκης, Αλέξανδρος Ρονιώτης, Ευαγγελία Μανιαδή Ηράκλειο 2016

2 image.animate().translationχby(-500f).setduration(2000); θα μεταφέρει αριστερά κατά 500 pixel κατά τον άξονα Χ. Αν δεν θέλω animate και θέλω να μεταφέρω κάτι (ώστε π.χ. μετά με το animation να το φέρω πίσω στην οθόνη) μπορώ να χρησιμοποιήσω την εντολή image.settranslationx(-1000f); και στη συνέχεια να καλέσω το image.animate().translationχby(1000f).setduration(2000); για να επανέλθει με animation. Rotation Για να γίνει περιστροφή μιας εικόνας π.χ. για 180 μοίρες σε 2 δευτερόλεπτα χρησιμοποιούμε την εντολή: image.animate().rotationby(180f).setduration(2000); Αν βάλω 1800f, τότε θα κάνει 5 περιστροφές πλήρεις ScaleX και ScaleY Για να γίνει Σμίκρυνση / μεγέθυνση είτε στον Χ, είτε στον Υ, είτε και στα δύο χρησιμοποιούμε την εντολή: image.animate().scalex(0.5f).scaley(0.5f).setduration(2000); Γενικά μπορώ να χρησιμοποιώ όποιο συνδυασμό animation θέλω σε μια εντολή μόνο, απλώς χωρίζοντας τις με την τελεία (.) άσκηση 2 Πάρτε μια οποιαδήποτε εικόνα και εκτελέστε οποιαδήποτε 3 animation από αυτά που μάθατε σήμερα. Στην oncreate μπορείτε να απομακρύνετε την εικόνα σας και στο τέλος του animation να κάνετε επαναφορά της εικόνας στην αρχική θέση με τις τρεις εντολές της αρεσκείας σας. Σελίδα 2

3 4.2 Video Η χρήση video σε μια εφαρμογή είναι πολύ εντυπωσιακή, αλλά θα πρέπει να έχετε υπόψιν ότι μπορεί να είναι «βαριά». Πρέπει να είσαστε πολύ προσεκτικοί, καθώς μεγάλα αρχεία σε κάποιες συσκευές με χαμηλές τεχνικές προδιαγραφές ίσως δεν ανοίγουν καθόλου. Το ίδιο πρόβλημα μπορεί να αντιμετωπίσετε αν προσπαθήσετε να τρέξετε ένα video στον emulator του Android Studio. Ίσως δεν καταφέρετε ποτέ να παίξετε ένα video αν ο υπολογιστής σας δεν διαθέτει αρκετή μνήμη για τον emulator, αλλά είναι αρκετά συνηθισμένο γι αυτό μην απογοητεύεστε. Folder Αν χρησιμοποιήσετε video που βρίσκεται αποθηκευμένο μέσα στη συσκευή (κι όχι π.χ. σε κάποιο online repository ή cloud), θα πρέπει αρχικά να το αποθηκεύσετε σε ένα φάκελο. Για το εργαστήριο, φτιάξτε ένα φάκελο με όνομα raw μέσα στον φάκελο res. Στη συνέχεια κατεβάστε το αρχείο sample.mp4 από το υλικό του εργαστηρίου στο eclass και αποθηκεύστε το μέσα στο φάκελο raw. VideoView Όπως και τα περισσότερα widgets που έχουμε δει ως τώρα, έτσι και το video μπορείτε να το φορτώστε μέσα από ένα VideoView. Δημιουργήστε ένα VideoView με id videoview. Στη συνέχεια μόλις με τις παρακάτω τρεις εντολές μπορείτε να ανοίξετε και να εκτελέσετε το video VideoView videoview = (VideoView) findviewbyid(r.id.videoview); videoview.setvideopath("android.resource://"+ getpackagename()+ "/" + R.raw.sample); videoview.start(); Σελίδα 3

4 Παίζει κανονικά, ωστόσο από το video λείπουν τα video controllers, δηλαδή τα πλήκτρα που συνήθως βλέπουμε σε video players όπως η ένταση του ήχου, το pause, να μπορείτε να πατήστε play, κλπ. Για το λόγο αυτό θα πρέπει να χρησιμοποιήσουμε ένα MediaController όπως παρακάτω. Στη δεύτερη εντολή, ορίζετε τη θέση του αρχείου που θα διαβάσει το video. Αν θέλετε να ανοίξετε ένα video π.χ. από ένα URL, τότε εδώ είναι που θα το αλλάξετε. VideoView videoview = (VideoView) findviewbyid(r.id.videoview); videoview.setvideopath("android.resource://"+ getpackagename()+ "/" + R.raw.sample); //this is the current session MediaController mediacontroller = new MediaController(this); //attach the controller to video mediacontroller.setanchorview(videoview); //attach video to controller (so both ways) videoview.setmediacontroller(mediacontroller); videoview.start(); Πλέον θα μπορείτε να δείτε τα κουμπιά ελέγχου στο video! Σελίδα 4

5 4.3 Audio Σε αυτό το υποκεφάλαιο θα μάθετε να βάζετε audio στην εφαρμογή σας, αλλά θα το προχωρήσουμε λίγο παραπέρα. Συγκεκριμένα θα δείτε πως μπορείτε να δημιουργήσετε δικά σας εργαλεία ελέγχου για να ελέγξετε τον ήχο (π.χ. ένταση, σημείο στο χρόνο). εργαστηρίου στο eclass. Αναπαραγωγή Σε ένα νέο Project δημιουργήστε ένα φάκελο raw μέσα στο res και αποθηκεύστε το αρχείο heart.mp3 από το υλικό του // Create media player with our specific file MediaPlayer mediaplayer = MediaPlayer.create(this, R.raw.heart); //play! mediaplayer.start(); Τώρα θα χρησιμοποιήσουμε τον MediaPlayer και με μόλις δύο γραμμές κώδικα (παραπάνω) θα παίξει ο ήχος! Ωστόσο πάλι δεν υπάρχουν controllers και πρέπει να τους φτιάξουμε Controllers Play and Pause Σε ένα νέο Project δημιουργήστε ένα φάκελο raw μέσα στο res και αποθηκεύστε το αρχείο heart.mp3 από το υλικό του εργαστηρίου στο eclass. // Create media player with our specific file MediaPlayer mediaplayer = MediaPlayer.create(this, R.raw.heart); //play! mediaplayer.start(); Τώρα θα χρησιμοποιήσουμε τον MediaPlayer και με μόλις δύο γραμμές κώδικα (παραπάνω) θα παίξει ο ήχος! Ωστόσο πάλι δεν υπάρχουν controllers και πρέπει να τους φτιάξουμε άσκηση 3 Βάλτε δύο κουμπιά Play και Pause. Όταν πατάτε Play να παίζει τον ήχο και όταν πατάτε Pause να σταματάει tip: για το Pause εκτελέστε την mediaplayer.pause() Σελίδα 5

6 Volume Για να δημιουργήσουμε ένα Component για να ελέγχουμε την ένταση του ήχου θα χρησιμοποιήσουμε ένα seek bar (βάλτε ένα στο layout σας και δώστε id volumeseekbar. Αρχικά, πριν κάνετε την διασύνδεση της seekbar με την ένταση του ήχου, δείτε πως λειτουργεί, βάζοντας τις παρακάτω εντολές στην oncreate. Εδώ βάζουμε ένα onchangelistener, δηλαδή τι πρέπει να κάνει η εφαρμογή όταν εντοπίσει ότι κάποιος «σέρνει» την SeekBar. SeekBar volumeseekbar = (SeekBar) findviewbyid(r.id.volumeseekbar); volumeseekbar.setonseekbarchangelistener(new SeekBar.OnSeekBarChangeListener() { public void onprogresschanged(seekbar seekbar, int progress, boolean fromuser) { Log.i("SeekBar Value", Integer.toString(progress)); public void onstarttrackingtouch(seekbar seekbar) { //όταν ξεκινάει να σέρνει public void onstoptrackingtouch(seekbar seekbar) { //όταν σταματάει να σέρνει ); Παίξετε λίγο και δείτε τι τιμές περνούν στα logs. Θα δείτε ότι οι default τιμές πάνε από 0 έως 100. Στη συνέχεια θα βάλουμε έναν audiocontroller για να μπορούμε να ελέγξουμε τον ήχο της συσκευής... AudioManager audiomanager;... Σελίδα 6

7 protected void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.activity_main); // Create media player with our specific file mediaplayer = MediaPlayer.create(this, R.raw.song); //Allows to work with the audio of the device audiomanager = (AudioManager) getsystemservice(context.audio_service); //Get info about the device at the moment for Media int maxvolume = audiomanager.getstreammaxvolume(audiomanager.stream_music); int curvolume = audiomanager.getstreamvolume(audiomanager.stream_music); SeekBar volumeseekbar = (SeekBar) findviewbyid(r.id.volumeseekbar); volumeseekbar.setmax(maxvolume); volumeseekbar.setprogress(curvolume); volumeseekbar.setonseekbarchangelistener(new SeekBar.OnSeekBarChangeListener() { public void onprogresschanged(seekbar seekbar, int progress, boolean fromuser) { Log.i("SeekBar Value", Integer.toString(progress)); audiomanager.setstreamvolume(audiomanager.stream_music,progress,0); ); public void onstarttrackingtouch(seekbar seekbar) { public void onstoptrackingtouch(seekbar seekbar) { Time Controller Για να κάνω τον time controller θα πρέπει να χρησιμοποιήσω ένα 2 ο seekbar και έναν timer που θα αλλάζει την τιμή του αυτόματα κάθε δευτερόλεπτο. final SeekBar timeseekbar = (SeekBar) findviewbyid(r.id.timeseekbar); timeseekbar.setmax(mediaplayer.getduration()); timeseekbar.setprogress(mediaplayer.getcurrentposition()); // Create a new timer to do something every 1 second new Timer().scheduleAtFixedRate(new TimerTask() { public void run() { //update time seek bar timeseekbar.setprogress(mediaplayer.getcurrentposition());, 0, 1000); // 0 is number of seconds to delay (so here is immediately), 1000 is for 1 second (do every one second) timeseekbar.setonseekbarchangelistener(new SeekBar.OnSeekBarChangeListener() { public void onprogresschanged(seekbar seekbar, int progress, boolean fromuser) { //Log.i("Time Value", Integer.toString(progress)); if (fromuser) //if i ignore this if, I will have pauses! mediaplayer.seekto(progress); Σελίδα 7

8 public void onstarttrackingtouch(seekbar seekbar) { ); public void onstoptrackingtouch(seekbar seekbar) { Σελίδα 8