Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Android SDK
Code

Android SDK: Δημιουργήστε μια Εφαρμογή Ζωγραφικής - Διάδραση Αφής

by
Difficulty:IntermediateLength:LongLanguages:
This post is part of a series called Create a Drawing App on Android.
Android SDK: Create a Drawing App - Interface Creation
Android SDK: Create a Drawing App - Essential Functionality

Greek (ελληνικά) translation by Iris Diakoumi (you can also view the original English article)

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


Δομή Σειράς

Η σειρά πάνω στην Δημιουργία μιας Εφαρμογής Ζωγραφικής θα είναι σε τρία μέρη:


Τελική Προεπισκόπηση

Drawing App

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


1. Ετοιμαστείτε για Ζωγραφική

Βήμα 1

Την προηγούμενη φορά δημιουργήσαμε μια κλάση με το όνομα “DrawingView”, που είναι μια παραμετροποιημένη Όψη στην οποία θα εκτελεστούν οι συναρτήσεις της ζωγραφικής. Δημιουργήσαμε το περίγραμμα της δήλωσης της κλάσης και μια μέθοδο με το όνομα “setupDrawing” - θα την υλοποιήσουμε τώρα. Στην κλάση σας DrawingView, προσθέστε τις παρακάτω δηλώσεις import:

Έπειτα προσθέστε μερικές μεταβλητές στιγμιοτύπου στην κορυφή της κλάσης:

Όταν ο χρήστης αγγίζει την οθόνη και κουνάει το δάχτυλο για να ζωγραφίσει, θα χρησιμοποιήσουμε ένα Path για να ακολουθήσουμε την ενέργεια τους στον καμβά. Τόσο ο καμβάς, όσο και η ζωγραφιά που βρίσκεται πάνω του αντιπροσωπεύονται από αντικείμενα Paint. Το αρχικό χρώμα της μπογιάς αντιστοιχεί στο πρώτο χρώμα της παλέτας που δημιουργήσαμε την προηγούμενη φορά, που θα είναι αρχικά επιλεγμένο όταν ξεκινήσει η εφαρμογή. Τέλος δηλώνουμε μεταβλητές για τον καμβά και το bitmap - τα μονοπάτια χρήστη που σχεδιάζονται με drawPaint θα σχεδιαστούν πάνω στον καμβά, που σχεδιάζεται με canvasPaint.

Βήμα 2

Στη μέθοδο setupDrawing, ας αρχικοποιήσουμε μερικές από αυτές τις μεταβλητές για να σετάρουμε αυτήν την κλάση για σχεδιασμό. Πρώτα αρχικοποιήστε τα σχεδιαστικά αντικείμενα Path και Paint:

Έπειτα ορίστε το αρχικό χρώμα:

Τώρα ορίστε τις αρχικές ιδιότητες του μονοπατιού:

Θα μπορούμε να αλλάξουμε μέρος του παρόντος κώδικα στο επόμενο σεμινάριο, όταν υλοποιήσουμε τη δυνατότητα να επιλέγουμε τα μεγέθη πινέλου, για τώρα ορίζουμε ένα τυχαίο μέγεθος πινέλου. Αν ορίσουμε το anti-alias, το stroke join και τα cap styles θα κάνουμε τις ζωγραφιές του χρήστη να φαίνονται πιο ομαλές.

Ολοκληρώστε τη μέθοδο setupDrawing αρχικοποιώντας το αντικείμενο του καμβά, Paint:

Αυτή τη φορά ορίζουμε το dithering περνώντας μια παράμετρο στο δημιουργό.

Βήμα 3

Πρέπει να κάνουμε override σε μερικές μεθόδους για να ορίσουμε την παραμετροποιημένη συνάρτηση View ως σχεδιαστική View. Πρώτα, μέσα στην κλάση DrawingView, κάνουμε override τη μέθοδο onSizeChanged, που θα κληθεί όταν δοθεί μέγεθος στην παραμετροποιημένη View:

Μέσα σε αυτήν τη μέθοδο, πρώτα καλέστε την μέθοδο υπερκλάσης:

Τώρα αρχικοποιήστε το σχεδιαστικό καμβά και το bitmap χρησιμοποιώντας τις τιμές πλάτους και ύψους:

Βήμα 4

Για να επιτρέψετε στην κλάση να λειτουργήσει ως μια προσαρμοσμένη Προβολή σχεδίασης, πρέπει επίσης να κάνετε override τη μέθοδο onDraw, οπότε προσθέστε τη στην κλάση τώρα:

Στο εσωτερικό της μεθόδου, σχεδιάστε τον καμβά και τη διαδρομή σχεδίασης:

Δεν έχουμε υλοποιήσει ακόμη τη δυνατότητα για το χρήστη να σχεδιάζει το Path χρησιμοποιώντας το χρώμα σχεδίασης, αλλά μόλις το κάνουμε αυτό θα το παρουσιάσουμε στην Προβολή (View). Κάθε φορά που ο χρήστης ζωγραφίζει με διάδραση αφής, θα ακυρώνουμε την Προβολή, προκαλώντας τη μέθοδο onDraw να εκτελεστεί.


2. Διευκολύνετε τη Ζωγραφική

Βήμα 1

Όταν η Προβολή σχεδιασμού βρίσκεται στην οθόνη της εφαρμογής, θέλουμε τα αγγίγματα του χρήστη πάνω της να καταγράφονται σαν ενέργειες σχεδιασμού. Για να το κάνουμε αυτό πρέπει να "ακούμε" για γεγονότα αφής. Στην κλάση drawingView, προσθέστε την ακόλουθη μέθοδο:

Μέσα στη μέθοδο, ανακτήστε τις θέσεις Χ και Υ του αγγίγματος του χρήστη:

Βήμα 2

Η παράμετρος MotionEvent στη μέθοδο onTouchEvent θα μας επιτρέψει να ανταποκριθούμε σε συγκεκριμένα γεγονότα αφής. Οι ενέργειες που μας ενδιαφέρουν για να υλοποιήσουμε το σχεδιασμό είναι οι down, move και up. Προσθέστε μια δήλωση switch στη μέθοδο για να ανταποκριθείτε σε κάθε ένα από αυτά:

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

Βήμα 3

Μετά τη δήλωση switch, ολοκληρώστε τη μέθοδο απενεργοποιώντας την Προβολή και επιστρέφοντας τιμή True:

Καλώντας την invalidate θα κάνει τη μέθοδο onDraw να εκτελεστεί.


3. Επιλέγοντας Χρώματα

Βήμα 1

Ας υλοποιήσουμε τώρα τη δυνατότητα για το χρήστη να επιλέγει χρώματα από την παλέτα. Στην κύρια Activity της εφαρμογής, προσθέστε τα ακόλουθα imports:

Προσθέστε τις ακόλουθες μεταβλητές στιγμιοτύπου στην κλάση:

Αυτό αντιπροσωπεύει το στιγμιότυπο της προσαρμοσμένης Προβολής που προσθέσαμε στη διάταξη. Μέσα στην onCreate, ύστερα από τον υπάρχοντα κώδικα, αρχικοποιήστε αυτήν τη μεταβλητή ανακτώντας μια αναφορά σε αυτή από την διάταξη:

Έτσι τώρα έχουμε την Προβολή που εμφανίζεται στο Activity πάνω στην οποία μπορούμε να καλέσουμε τις μεθόδους της κλάσης DrawingView.

Βήμα 2

Ορίσαμε το αρχικό χρώμα μπογιάς στην κλάση drawingView, ας ρυθμίσουμε τώρα τη διεπαφή χρήστη έτσι ώστε αυτό να φαίνεται και να μπορεί να διαχειριστεί. Στην κύρια κλάση Activity, προσθέστε άλλη μια μεταβλητή στιγμιοτύπου για να αντιπροσωπεύσετε το κουμπί με το χρώμα μπογιάς στην παλέτα:

Μέσα στην onCreate, θέλουμε τώρα να ανακτήσουμε το πρώτο κουμπί με χρώμα μπογιάς στην περιοχή της παλέτας, που θα είναι επιλεγμένο αρχικά. Πρώτα ανακτήστε το Linear Layout μέσα στο οποίο περιέχεται:

Πάρτε το πρώτο κουμπί και αποθηκεύστε το σαν μεταβλητή στιγμιοτύπου:

Θα χρησιμοποιήσουμε μια διαφορετική εικόνα πάνω στο κουμπί για να δείξουμε ότι είναι επιλεγμένο αυτή τη στιγμή:

Προσθέστε αυτό το αρχείο στα drawables της εφαρμογής σας, δίντοντας του το όνομα "paint_pressed.xml" και εισάγοντας το παρακάτω σχήμα:

Αυτό είναι αρκετά παρόμοιο με το "paint.xml" drawable που δημιουργήσαμε την προηγούμενη φορα, αλλά με ένα πιο σκούρο χρώμα γύρω από την μπογιά.

Βήμα 3

Τώρα μπορούμε να αφήσουμε το χρήστη να επιλέξει χρώματα. Όταν δημιουργήσαμε τη διάταξη την άλλη φορά, αναφέραμε ένα γνώρισμα onClick για τα κουμπιά της χρωματικής παλέτα - προσθέστε την μέθοδο στην κύρια κλάση σας Activity:

Μέσα σε αυτήν τη μέθοδο, πρώτα ελέγξτε αν ο χρήστης έχει πατήσει ένα χρώμα μποργιάς που δεν είναι το ήδη επιλεγμένο:

Μέσα στο μπλοκ if, ανακτήστε το tag που έχουμε ορίσει για κάθε κουμπί μέσα στη διάταξη, αντιπροσωπεύοντας το επιλεγμένο χρώμα:

Πρέπει να προσθέσουμε την προσαρμοσμένη κλάση View για να ορίσουμε το χρώμα. Πηγαίνετε τώρα στην κλάση DrawingView και προσθέστε την ακόλουθη μέθοδο:

Μέσα στη μέθοδο, ξεκινήστε απενεργοποιώντας την Προβολή:

Στη συνέχεια διαβάστε και ορίστε το χρώμα για τη ζωγραφική:

Πίσω στη βασική σας Activity, στη μέθοδο paintClicked μετά την ανάκτηση της ετικέτας χρώματος, καλέστε τη νέα μέθοδο στο προσαρμοσμένο αντικείμενο σχεδιασμού View:

Τώρα ανανεώστε το UI για να αντικατοπτρίζει τη νέα επιλεγμένη μπογιά και ορίστε την προηγούμενη στο κανονικό:


Συμπέρασμα

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

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.