MIT App Inventor – egyszerű android menü

Több képernyős android alkalmazásoknál praktikus lehet egy menü. Ehhez nyújthat segítséget a MIT App Inventor – android app fejlesztését bemutató sorozat következő cikke.

A cikkhez kapcsolódó zip fájlokban megtalálható a projekt fájl(.aia) és a telepíthető alkalmazás (.apk) is. Nincs széleskörűen tesztelve, kizárólag a saját telefonomon próbáltam, ezért csak saját felelőségedre telepítsd.

A Projektfájlok letölthethetők innen: MenuExample.zip

Tehát először készítsük el a ‘Designer’ részt. Szükségünk lesz egy ‘HorizontalArrangement’ elrendezésre. Erre helyezzünk egy ‘Label’ és egy ‘ListPicker’ komponenst. A ‘Label1’ ‘Text’ értékéhez „Kezdőlap” értéket adtam. Ez lesz az alkalmazás címsora. A ‘ListPicker’ a „Menü” nevet kapta.

A ‘ListPicker’ beállításai közt találjuk az ‘ElementsFromString’ attribútumot, ide vesszővel elválasztva írjuk be a menüelemeket. Az alább letölthető (.zip) fájlban található projektfájlban (.aia) ezeket a beállításokat is megtalálod. Ez egy jó kiindulási alap, a komponensek méreteit színeit módosíthatod a saját ízlesed szerint.

Ezzel megvagyunk, jöhet a többi oldal. A következő ‘Az Appról’ képernyő. Kattintsunk az ‘Add Screen…’ gombra, majd a felugró ablakban adjuk meg a képernyő nevét, jelen esetben ez az „About”.

Húzzuk az alábbi képen látható komponenseket a telefonra. Az első elrendezésben a ‘Label1’ lesz a képernyő címe. A ‘Button1’ a „Bezár” feliratot kapja. Ezek a komponensek szükségesek a menü működéséhez. A további összetevők a képernyő tartalmát töltik fel tartalommal. A ‘Label2’ egy szöveges mező, pár szó az alkalmazásról.

A fenti példában elhelyeztem egy nem látható komponenst, ez a ‘ActivityStarter’. Ennek az összetevőnek a segítségével indíthatunk el egy másik alkalmazást a készülékünkön, jelen esetben az ‘Image1’ képre vagy a ‘Button2’ gombra kattintáskor elindítja a webböngészőt a megadott paraméterekkel.

Adjunk hozzá még egy képernyőt, legyen a neve „Settings”. Adjunk hozzá egy vizszintes elrendezést, ebbe egy szöveges mezőt „Beállítások”, és egy gombot „Bezár” felirattal.

A kész menü a telefonon:

Ezzel kész a ‘Designer’ szakasz. Lássuk a blokkszerkesztő részt. Kezdjük a ‘Screen1’ képernyővel. Ha a ‘ListPicker’ valamelyik elemét kiválasztjuk, a hozzá tartozó kód lefut. Például ha rányomunk a ‘Beállitások’ menüelemre, ami az 1. indexelésű elem a listán (A lista elemek indexelése 1- től kezdődik és nem 0-tól!) megnyílik a ‘Settings’ képernyő.

A példában a lista 3. indexelésű eleme a „Kilépés”, ezt a menüelemet választva az alkalmazás bezáródik.

A ‘Settings’ képernyőhöz tartozó kód nem igényel különösebb magyarázatot. A ‘Button1’ megnyomása esetén bezáródik a ‘ Settings ‘ képernyő

És végül az ‘About’ képernyő blokkjai. Az első blokk bezárja az aktuális képernyőt. A második a ‘Button2’ gombra kattintáskor meghívja az ‘ActivityStarter’ komponenst, ami megnyitja a böngészőt az előzőleg megadott paraméterekkel. A harmadik blokk ugyanezt teszi, ha rákattintunk az ‘Image1’ képre.

Ez a kis menü példa jó alap lehet bővebb android alkalmazás fejlesztéséhez.

Jó szórakozást hozzá!