Paint App

Εφαρμογή Paint στο AppInventor

Θα φτιάξουμε εφαρμογή στο app inventor που θα μπορούμε να ζωγραφίζουμε με το δάχτυλό μας σε έναν καμβά

Designer

Eδώ θα αναλύσουμε το designer κομμάτι της εφαρμογής, δηλαδή το πώς είναι δομημένη και ποια components του app inventor χρησιμοποιήθηκαν.

ARRANGEMENTS

Δύο από τα πιο σημαντικά components που θα χρησιμοποιήσουμε είναι τα δύο είδη από arrangements, το vertical και το horizontal. Τα arrangements αυτά είναι ουσιαστικά άδεια δοχεία/κουτιά που τα χρησιμοποιούμε για να στοιχίζουμε άλλα components πιο εύκολα. Το vertical arrangement κάνει κάθετη διάταξη από πάνω προς τα κάτω και το horizontal arrangement κάνει οριζόντια διατάξει από αριστερά προς τα δεξιά. Χρησιμοποιούνται κυρίως για να μας βοηθούν στην οργάνωση καθώς και ώστε να μην χαλάει η διάταξη της εφαρμογής μας σε άλλα μεγέθη οθονών καθώς τα arrangements αυτόματα προσαρμόζονται σε κάθε μέγεθος οθόνης. Μπορεί επίσης να γίνει τοποθέτηση του ενός arrangement μέσα στο άλλο και έτσι μπορούμε να πετύχουμε ένα αποτέλεσμα όπως αυτό.

Εδώ έχουμε ουσιαστικά 3 Horizontal Arrangements μέσα σε ένα Vertical Arrangement, οπότε καταλήγουμε με 3 πολύ καλά οργανωμένες σειρές, οι οποίες είναι και ευθυγραμμισμένες και κάθετα.

βήμα 1ο) ξεκινάμε με ένα Vertical Arrangement το οποίο βάζουμε στην οθόνη και αλλάζουμε στο δεξί μέρος της οθόνης το width (μήκος) και το height (ύψος) του σε fill parent.

βημα 2ο) εισάγουμε μέσα στο Vertical Arrangement ένα canvas και αλλάζουμε πάλι το height και width σε fill parent

βημα 3ο) εισάγουμε μέσα στο Vertical Arrangement 2 Horizontal Arrangements και αλλάζουμε σε όλα το width να είναι fill parent

βημα 4ο) εισάγουμε 3 κουμπιά στο πρώτο Horizontal Arrangement στα οποία:

• αλλάζουμε το width σε fill parent

• αφαιρούμε το προϋπάρχον κείμενο στο πεδίο text

• αλλάζουμε το backround color σε κόκκινο, μπλε και πράσινο αντίστοιχα (εσείς αν θέλετε μπορείτε να βάλετε διαφορετικά χρώματα)

• κάνουμε rename τα κουμπιά στα χρώματα που τα θέσαμε για να διευκολυνθούμε αργότερα στον κώδικα

βημα 5ο) στο τρίτο Horizontal Arrangement αλλάζουμε πρώτα το Align horizontal στο center : 3 και εισάγουμε μέσα του ένα κουμπί στο οποίο αλλάζουμε το text του σε ΣΒΗΣΕ ΟΛΑ

καθώς και το κάνουμε rename σε clear_all για να διευκολυνθούμε στον κώδικα

1. blocks/κωδικας

canvas:

για να ζωγραφίσουμε στο canvas θα χρησιμοποιήσουμε το when canvas dragged block που είναι block του αντικειμένου canvas.

και τέλος στο draw circle στο πεδίο radius θα βάλουμε την αντίστοιχη πράξη

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

color buttons:

για τα κουμπιά που θα αλλάζουν το χρώμα ζωγραφικής μας θα χρησιμοποιήσουμε το when button click block που έχουν τα κουμπιά

και μέσα θα βάλουμε το set canvas paint color block του canvas

clear all button:

και τέλος για το κουμπί που καθαρίζει τον καμβά θα χρησιμοποιήσουμε πάλι το when button click block και μέσα του θα βάλουμε το set canvas backroundimage block που είναι άλλο ένα block του canvas