Android programozás Appinventor segítségéval

1. Rajzok készítése Android
rendszerben
Festővászon, pontok, vonalak, fotók
készítése
Forrás: http://www.appinventor.org/PaintPot2
Készítette: Moór Róbert
NK: LXO9OS
Szak: Tanári mesterség IKT alapjai

2. Mit fogunk tanulni? - Bevezetés
A tananyag az alábbiakba vezet be
minket:
• Festővászon használata
• Az érintőképernyő, valamint a „fogd
és vidd” technika kezelése
• Képernyőelrendezések
• Változók használata, hogy
emlékezzenek a ceruza színére és
méretére
A programot az Appinventor2 alkalmazással készítjük el:
• Lépjünk be az Appinventor2 felületre
• Hozzunk létre egy új projektet PaintPot néven
• Válasszuk a Component Designer felületet a képernyőterv készítéshez
• Tekintsd meg az 1. és 2. filmet http://www.appinventor.org/paintpot2-
steps

3. Alkotóelemek tervezése
A következő alkotóelemeket készítjük el:
• Három nyomógombot vízszintes elrendezésben a vörös, zöld és
kék színek kiválasztásához;
• Egy nyomógombot a rajzunk törléséhez és kettőt a ceruza
méretének változtatásához;
• Egy festővásznat a rajzoló felülethez. A vászon háttérképe a
HelloPurr feladatból megismert kitty.png kép lesz. A háttérképet
később a kamerával készített felvétellel módosítani tudjuk.

4. Angol elnevezések a Designer Editor-on

5. Színeket váltó gombok
Először készítsük el a színeket váltó gombokat. Kövesd az
utasításokat:
• Húzd a Button component-t a Viewer-re és cseréld a Text
tulajdonságot Red-re, a BackgroundColor-t vörös színűre.
• Kattints a Button1-re a komponens listában, majd nevezd át
RedButton névre.
• Hasonlóképpen járj el a másik két gombnál is, BlueButton-nak és
GreenButton-nak nevezd el őket.

6. Helyezzük el vízszintesen a gombokat
Ha a gombokat vízszintesen akarod elhelyezni használd a
HorizontalArrangement komponenst az alábbiak szerint:
• A Layout palettáról válaszd a HorizontalArrangement komponenst és
helyezd el a gombok alatt.
• A Properties panelen a Width tulajdonságnál válaszd a "Fill parent"
opciót, így az teljes szélességben kitölti a rendelkezésre álló teret a
képernyőn.
• Húzd a három gombot a HorizontalArrangement komponensbe.

7. Adjuk hozzá a festővásznat
A festővászon egy olyan objektum, ahol a felhasználók rajzolhatnak köröket
és vonalakat.
• A Drawing and Animation palettáról húzzuk be a Canvas komponenst a
Viewer-re és nevezzük át DrawingCanvas-re.
• Állítsuk be a Width tulajdonságnál a "Fill parent„, a Height tulajdonságnál
a 300 pixels opciót.
• A Canvas háttere a Kitty.png kép legyen.
• A PaintColor tulajdonságot állítsuk vörösre.

8. Az alsó gombok és a kamera komponens elhelyezése
A palettáról húzzunk egy HorizontalArrangement elemet a festővászon alá.
Húzunk a HorizontalArrangement elemre négy gombot az alábbi beállításokkal:
1. A név legyen TakePictureButton, a Text tulajdonság "Take Picture".
2. A név legyen WipeButton, a Text tulajdonság "Wipe”.
3. A név legyen BigButton, a Text tulajdonság "Big Dots„.
4. A név legyen SmallButton, a Text tulajdonság "Small Dots„.
A Media palettáról húzzunk egy Camera komponenst a Viewer elemre. Ez egy
nem látható objektum lesz.

9. Angol elnevezések a Block Editor-on

10. Érintés esemény – pont rajzolása
A Blokkszerkesztő DrawingCanvas
fiókjából a DrawingCanvas.Touched
blokkot húzzuk a munkaterületre!
Húzzuk a DrawingCanvas.DrawCircle
parancsot a DrawingCanvas.Touched
eseménykezelő részébe!
Húzzuk a get x és get y paramétereket
a DrawingCanvas.DrawCircle parancsba,
ezek tartalmazzák az érintés x és y
koordinátáit!
Húzzuk az 5-ös számot a Number
fiókból a Canvas.DrawCircle parancsba,
így megadtuk, hogy a rajzolt pont
sugara 5 egység legyen!

11. Vonszolás esemény – vonal rajzolása
A Blokkszerkesztő DrawingCanvas
fiókjából a DrawingCanvas.Dragged
blokkot húzzuk a munkaterületre!
Húzzuk a DrawingCanvas.DrawLine
parancsot a DrawingCanvas. Dragged
eseménykezelő részébe!
Húzzuk a get prevx és get prevy
paramétereket a DrawingCanvas.
DrawLine parancsba, ezek tartalmazzák
az ujjunk jelenlegit megelőző
helyzetének x és y koordinátáit! Ezek
után húzzuk a get currentx és get
currenty paramétereket a
DrawingCanvas. DrawLine parancsba,
ezek tartalmazzák az ujjunk jelenlegi
helyzetének x és y koordinátáit!

12. Gombok programozása az eseménykezelőben
Húzzuk a RedButton.Click blokkot a
munkaterületre! Adjuk hozzá a set
DrawingCanvas.PaintColor parancsot és
állítsuk be piros színre. Járjunk így el a
többi színbeállító gombnál is.
Húzzuk a WipeButton.Click blokkot a
munkaterületre! Adjuk hozzá a
DrawingCanvas.Clear parancsot. Ezzel a
gombbal törölhetjük a képernyőt.

13. Kép készítése kamerával
Húzzuk a Camera1.AfterPicture blokkot
a munkaterületre! Adjuk hozzá a set
DrawingCanvas.BackgroundImage
parancsot és állítsuk be a get image
paramétert. Így a Canvas háttérképe a
kamerával készített kép lesz.
Húzzuk a TakePictureButton.Click blokkot
a munkaterületre! Adjuk hozzá a
Camera1.TakePicture parancsot. és
állítsuk be a get image paramétert. Ezzel
a gombbal készíthetünk képet a mobil
eszközünk kamerájával.

14. Pont méret változtatása változók
segítségével
A Blokkszerkesztő Variables fiókjából
az initialize global blokkot húzzuk a
munkaterületre és nevezzük el dotSize
névre! Adjunk neki kezdőértéket a
Numeric fiókból. Így létrehoztunk egy
globális változót a pontméret
beállítására.
Húzzuk a SmallButton.Click blokkot a
munkaterületre! Adjuk hozzá a set
global dotSize parancsot. Ezzel a
gombbal állítjuk 2 egységre a
pontméretet. Hasonlóan járjunk el a
BigButton gombbal is.

15. A teljes alkalmazás: PaintPot

16. Köszönöm a figyelmet!