Bevezető
Biztosan mindenki találkozott már olyan mobil alkalmazással, amelynek a funkciói közül a címsorban lévő füleket megérintve lehet válgatni. Ez egy gyakori és jól bevált dolog az alkalmazásfejlesztők körében, hiszen segítségével egy jól átlátható és egyszerű módszerrel rejthetjük el az épp nem használt aloldalakat, ráadásul így gyakran kevesebb helyet is foglalunk el a felületből, mintha erre virtuális gombokat használnánk. Ezt fogjuk a mai bejegyzésben megvalósítani.
Fülelj ide
Mint szinte minden form alapú megjelenítési módszert bada alatt, a dolog nagy részét most is meg lehet valósítani kódból és a UI builderből egyaránt, viszont esetünkben muszáj egy kicsit pötyögnünk is, hogy korrektül működjön a dolog. De először a UI builderben kell tevékenykednünk, a fő Form beállításaival kell egy kicsit szórakozni. A fülek megjelenítéséhez a Properties fülön lévő Show Tab változót kell átírni. Két lehetőségünk van, a fülek címe lehet szöveges vagy kép alapú (text és icon), sajnos a kettő egyszerre nem használható. Valamint érdemes még hamisra állítani a Show Indicator tulajdonságot, ez a legfelső állapotsáv megjelenítését szabályozza, ha kikapcsoljuk, nem látjuk a töltöttséget, térerőt stb, viszont cserébe egy megnövekedett felhasználói felületet kapunk. A másik térnyerő lehetőség a felső sorban olvasható címsáv kiiktatása, ezt a Show Title hamisra állításával tehetjük meg.
Na de térjünk vissza a fülekre! Az egyes tabokhoz különálló UI-k tartoznak, ezek lehetnek további formok, vagy panel típusú elemek, a bejegyzésben az utóbbit nézzük meg. Három fajta panelből választhatunk, az alap Panel a legegyszerűbb, egy mezei konténert kapunk, az OverlayPanel videólejátszó és kamera beágyazását teszi lehetővé, a harmadik lehetőség, a ScrollPanel pedig igazából egy görgethető konténer, utóbbit fogjuk használni a poszt során. A legegyszerűbb módja a ScrollPanel felvételének és testreszabásának, ha a UI builderben a fő formra felveszünk egyet, ez után ezt kiválasztva a Resource Explorerben egy új, üres formot találunk, amelyet kedvünkre benépesíthetünk a megfelelő vezérlőkkel. Persze nem rakhatunk rá minden típusból, a Frame-et, a Formot és a PopUpot ki kell hagynunk a játékból. A felület felső sávjában elhelyezkedő tab-listában egyszerre maximum három fül lehet látható, viszont többet is hozzáadhatunk, ekkor automatikusan egy vízszintesen lapozható címsort kapunk, ezzel semmi programozói teendőnk nincsen.
Miután felvettük a paneleket a UI építővel, itt az ideje, hogy lekódoljuk a fülek közötti váltásokat. Ehhez fel kell vennünk a formunk inicializációs függvényében egy Tab típust, majd le kell kénünk a fülekre mutató pointert a GetTab() függvénnyel. Ez után egyenként hozzáadatajuk a füleket az Additem() függvénnyel, amely egy címet (ikonos nézet esetén ehelyett egy kép kerül ide) és az előzőleg felvett panelek megfelelő ID-jét kell megadnunk. Ez után hozzá kell adnunk egy actionlistenert, és készen is vagyunk az inicializációs fázissal.
Most már csak azt kell megoldani, hogy az adott fület megérintve a neki megfelelő tab kerüljön előtérbe. Ezt szokásos módon az OnActionPerformed() fügvényben tehetjük meg, a megfelelő ID case ágában annyi a teendőnk, hogy a megjenelíteni kívánt panel ShowState tulajdonságát igazra álítjuk, a többi fül ugyanezen paraméterét pedig hamisra, ezt a SetShowState függvénnyel tehetjük meg. Persze ezek után újra kell rajzolnunk a formot, ezt a RequestRedraw() metódus segítségével érhetjük el.
A példaalkalmazás egy nagyon primitív zeneboltot fog megvalósítani, ahol a funkciük között az egyes füleket megérintve váltogathatunk. A mai bejegyzés során magát a formot építettük fel, a következőkben pedig az interneten keresztüli letöltést fogjuk megnézni. Az alkalmazás felépítése a következő: az első fülön a letölthető zeneszámok listáját látjuk, a másodikon a már letöltött muzsikák figyelnek, a harmadikon pedig a beállítások kapnak helyet.
A kód természetesen ismét elérhető a Mobilarénás svn tárhelyről, a MusicStore nevű projektet kell kicsekkelni.
dr. Kind
