Embedded Files
Aquesta lliçó té 3 seccions: Secció 1 | Secció 2 | Secció 3
En aquesta primera lliçó crearàs una aplicació de dibuix que permet dibuixar a la pantalla del telèfon escollint un color i després arrossegant el dit per la pantalla. L'app també permet utilitzar a càmera del telèfon per a fer una nova foto i utilitzar-la com el llenç (canvas) per a dibuixar.
El que estàs construint
Amb l'app PaintPic pots:
Submergir el dit en un pot de pintura virtual per a dibuixar en aquest color.
Arrossegar el dit per la pantalla per a dibuixar una línia.
Pressionar la pantalla per a fer punts.
Utilitzar el botó avall per a netejar la pantalla.
Incloure una imatge com a fons del dibuix.
El que aprendràs
Després de construir l'app PaintPic, comprendràs:
Arrossegament i toc en el component llenç per a dibuixar
El control de disseny de la pantalla amb els components Screen Arrangement
Els controladores d'events que prenen arguments
Variables globals per a recordar informació, mentre que l'app s'executa
Accedir a l'app de la càmera del telèfon
Detalls de la lliçó
Detalls de la lliçó
DISSENY: Dissenyador App Inventor
Pas 1: Inicia un nou projecte
Assegura't de que el teu ordinador i el teu telèfon estan configurats per a utilitzar App Inventor i ves al lloc web App Inventor a http://appinventor.mit.edu.
Pas 2: Establir un nou títol de la pantalla
Hi ha tres noms a App Inventor i és fàcil confondre'ls:
El nom que escullis per al teu projecte a mesura que treballes en ell (en aquest cas, PaintPic). Aquest també serà el nom de l'aplicació si s'empaqueta per al telèfon.
El nom "Screen1", que és el nom del component de pantalla. Veuràs que apareix al panell Components del dissenyador. No es pot canviar el nom del component de la pantalla en la versió actual de l'aplicació, però es pot canviar la propietat Title.
La propietat Title de la pantalla, que és el que veuràs a la barra de títol del telèfon. El títol comença sent "Screen1", però el pots canviar si vols. Comença canviant el nom del títol de la pantalla per a PaintPic ara (Screen1 seleccionar en la llista de components i, a continuació, cerca a la part dreta del panell Propietats de la propietat Title).
Pas 3: Fes tres botons
A la columna esquerra del Designer, obre la paleta bàsica i arrossega primer tres botons al Visor
Pas 4: Codi de colors i canviar el nom dels botons
Clica al component Button1 al panell Components del visor per a ressaltar-lo (és possible que ja estigui ressaltat) i utilitza el botó Canviar nom (Rename Component) per a canviar el nom de "Button1" a "BotoVermell" (# 1).
Canvia l'atribut Text del botó a "Red" al panell de propietats (# 2) i fer el seu BackgroundColor "vermell" (# 3).
De la mateixa manera, fes dos botons més (Button2 i Button3) per al blau i el verd. Anomena'ls "BotoBlau" i "BotoVerd", col·locant-los verticalment a sota del botó vermell.
Pas 5: Afegir un contenidor de disposició horitzontal
Al panell Paleta, clica a la paleta Disposició de la pantalla i arrossega un component HorizontalArrangement i col·loca'l a sota dels botons al visor (# 1). Canvia el nom d'aquest component d'"HorizontalArrangement1" a "TresBotons" (# 2). Al panell Propietats, canvia l'ample de TresBotons a "Fill parent" (ajustar-se al contenidor) per a que ocupi tota l'amplada (Width) de la pantalla (# 3).
Pas 6: Col·loca tres botons horitzontalment
Arrossega el botó vermell a l'interior del component TresBotons. A continuació, arrossega el botó blau al costat del botó vermell, i fes el mateix amb el botó verd. Al panell Components veuràs els tres botons en sagnia al TresBotons mostrant que ara són els seus subcomponents.
Pas 7: Afegir un llenç
Des de la paleta Basic, arrossega un component llenç (Canvas) al Visor. Canvia el nom a "DrawingCanvas," i estableix la seva amplada a "Fill Parent" (omple el contenidor). Estableix la seva altura en 300 píxels.
Pas 8: Afegir un component càmera
Des de la paleta de Mitjans, arrossega un component càmera al Visor. Observa que s'encaixarà en l'àrea de components invisibles a la part inferior de la pantalla.
Pas 9: Afegir un botó per a activar la càmera
Des de la paleta bàsica, arrossega el component Button i col·loca'l just a sota de la disposició horitzontal (# 1). Canvia la seva propietat de text a "treu una foto!" (# 2) i canvia el nom del botó a "CameraButton" (# 3).
Pas 10: Afegir un botó Netejar i alinear horitzontalment amb el botó de la càmera
Des de la paleta bàsica, arrossega un altre component Button i col·loca'l a sota de la ButtonCamera que acabes de crear. Canvia el nom a "ButtonEsborrar", així com el seu atribut Text a "Esborrar". Des de la paleta Disposició de pantalla (Screen Arrangement), arrossega un component HorizontalArrangement i col·loca'l just a sota del component TresBotons (la disposició horitzontal en primer lloc) al Visor. Porta el ButtonCamera i el ButtonEsborrar a la disposició horitzontal, igual que vas fer amb els tres botons en el pas 5.
Així ha de quedar la teva pantalla al Dissenyador:
Page updated
Google Sites
Report abuse