Crează un Slideshow

Designul Ecranului

Pentru această aplicație vei crea un slideshow care va permite utilizatorului să navigheze prin diferite imagini. Când vei face designul ecranului, vei pune o imagine și butoane pentru ca utilizatorul printr-un clic să treacă la o altă imagine. Va trebui să setezi asta mai întâi în screen designer.

  1. Adaugă o imagine pe ecranul tău.
    • Ajustează-i dimensiunile după înălțimea și lățimea ecranului!
    • Noi am ales să facem imaginea noastră “fill parent”. Când selectezi “fill parent” tu îi spui componentei să umple spațiul, oricare ar fi el. Imaginea1 este în ecran, însă tastele sunt înăuntrul containerului de aranjament orizontal. Tu poți vedea ce lucruri sunt înăuntrul altor lucruri după cum ele sunt in lista componentelor din meniu.
  2. Adaugă o amplasare orizontală ecranului mai jos de imagine.
  3. Trage și plasează două butoane în poziție orizontală.
    • Fă clic pe butoane în componenta meniu
      • Redactează textul butoanelor în ‘Precedent’ și ‘Următor’.
      • Ar trebui, de asemena, să schimbi numele butoanelor ca să-ți amintești care este funcția lor! Noi le-am schimbat pe ale noastre în ‘Precedent’ și ‘Următor’. Tu poți face asta apăsând “redenumește” sub componente.
  4. Descarcă o imagine pe care vrei să o folosești în slideshow!
  5. Selectează imaginea care va fi proiectată prima în slideshow-ul tău.
    • Fă clic pe “Imagine1” în meniul “Componente” și apoi “Imagine” în meniul de proprietăți. Poți apoi selecta imaginea descărcată.
  6. Poți adăuga încă două ecrane. Pentru slideshow-ul nostru, am folosit trei ecrane dar tu poți adăuga câte dorești.
    • Pentru moment nu e nevoie să faci ceva cu ecranele, dar, după ce vei codifica blocuri, vei adăuga butoane și imagini pentru ele, așa cum ai făcut pentru acest ecran.

designer

Programarea blocurilor

Explicație: Acum, dacă ai ecranul configurat, e nevoie să-l programezi să facă ceva. Atunci când utilizatorul apasă pe butoane, tu dorești ca aplicația ta să deschidă un alt ecran cu o altă imagine pe ea. Pentru a face acest lucru, se va utiliza butonul handler de eveniment.

  1. Fă clic pe butonul pe care l-ai numit ‘Precedent’ pentru a vizualiza toate blocurile pe care le poți utiliza. Apucă blocul when button.click și trage-l pe spațiul tău de lucru.
  2. Fă clic pe ‘control’ și găsește blocul open another screen screenName (deschide alt ecran Numele ecranului).
  3. Ia o casetă de text goală și fă clic în blocul open another screen screenName. Tastează numele ultimului ecran care va fi în slideshow-ul tău. Pentru noi, a fost Ecran3.
  4. Fă clic pe butonul „Următor” și apucă blocul when button.click din nou.
  5. Ia un alt bloc open another screen screenName din control.
  6. Ia un bloc de text gol și tastează în următorul ecran care va apărea în slideshow-ul tău. (Pentru noi, a fost Ecran2.)

blocks

Punct de Verificare!!

Înainte de a trece mai departe, să ne asigurăm că codul pe care tocmai l-ai creat lucrează. E o deprindere bună să verifici fragmente de cod înainte de a scrie întreaga aplicație, pentru a te asigura că ea funcționează. În caz contrar, s-ar putea să creezi o aplicație cu mai multe caracteristici care nu funcționează și ar putea fi dificil să afli de ce aplicația nu lucrează!

Împerechează App Inventor cu telefonul, tableta si emulatorul. Lucrează butoanele conform așteptărilor? Butoanele noastre au funcționat: „Precedent” ne-a adus la un Ecran3 gol și „Următor”, ne-a adus la un Ecran2 gol. În cazul în care butoanele nu funcționează cum te așteptai, încearcă să te întorci înapoi și să te asiguri că codul este corect.

Sugestie: Pentru că pe Ecran2 sau Ecran3 nu este încă nimic, ne-am întors la Ecran1 prin mutare înapoi folosind App Inventor pe computerul nostru. App Inventor permite navigarea prin diferite ecrane de pe telefonul conectat sau emulator cu ajutorul computerului. Acesta este un truc bun pentru a fi utilizat mai târziu.

Finisarea aplicației

Explicație: Acum, dacă ai configurat cu succes un ecran și l-ai programat, ai posibilitatea să codifici restul ecranelor! Poți adăuga mai multe ecrane dacă dorești ca slideshow-ul tău să aibă mai multe imagini, dar să ai grijă să fie întotdeauna cel puțin trei. Diagramele de mai jos arată fluxul de ecrane și modul în care butoanele le controlează.

  1. 1. Repetă pașii 1-12 pentru fiecare ecran al slideshow. Verifică ca butonul ‘Următor’ să te ducă întotdeauna la ecranul următor și butonul ‘Precedent’ să te întoarcă la ecranul precedent.


3screen-diagram
4screen-diagram

Punctul de verificare final!!

Asigură-te că aplicația ta lucrează! Probează fiecare buton „Următor” și „Precedent”. Te va duce fiecare din ele la un ecran nou? Dacă nu, verifică lucrul, vezi dacă ai întrodus numele ecranelor corect.

Felicitări! Tocmai ai finisat prima ta provocare de programare! Ar trebui să te simți perfect! Nu sunt mulți oameni care au codificat o aplicație!

Mai ești blocată? Descarcă codul nostru sursă. Aici sunt instrucțiuni despre cum se descarcă și se utilizează codurile sursă :

instrucțiuni cod sursă .


DESCARCĂ COD SURSĂ