Hirdetés

Alkalmazásfejlesztés badára: Többsoros label házilag

Bevezető

Mint minden frissen kiadott SDK, a badáé is tartalmaz komoly hiányosságokat. A napokban egy egyszerű alkalmazás fejlesztése során szükségem lett volna egy olyan UI komponensre, ami képes többsoros szöveg megjelenítésére, formázására, kvázi egy multi-line labelre. A grafikus UI szerkesztő többszörös végigbogarászása és egy laza Google-session után megtaláltam a megoldást: enriched text! Nem nagyon értem, miért nem voltak képesek egy többsoros címkét belerakni az SDK megalkotói, ha beviteli mezőből belepakoltak külön egy-, illetve többsoros változatot is (EditField és EditArea), de ezzel nem lehet mit csinálni, meg kell kerülni a problémát.

A fentebb említett EnrichedTextet nem tudjuk explicit hozzáadni a felülethez a grafikus szerkesztővel, hanem az úgynevezett canvas-ra tudunk rajzolni. Ez már ismerős lehet, hiszen OpenGL ES esetben is erre rajzolunk, azonban most a bada saját rajzoló függvényeit fogjuk használni. Egy olyan függvénykönyvtárat képzeljetek el az Osp::Graphics névtér személyében, ami körülbelül a Paint funkcionalitását látja el.

A kód

A canvas-t el kell kérni az adott komponenstől, mielőtt használhatjuk. A bada SDK doksit olvasgatva találtam meg a GetCanvasN() függvényeket, amellyel minden control osztályból leszármazott komponens rendelkezik. A lényege, hogy elkérhetjük a control “látható felületét”, és ezt a kedvünkre átszabhatjuk. Az ötlet jó, azonban a megvalósítás hagy némi kivetnivalót maga után: nem minden komponens esetén működik, egy fél napot szenvedtem azzal, hogy egy Popup vásznára rajzoljak, aztán inkább hagytam az egészet. Viszont Form esetben minden oké.

Hozzunk létre egy új Form-based Applicationt, ez generál nekünk egy alap formot egy ‘OK’ feliratú gombbal, ennek az ActionEventjébe pötyögjük majd be a kódunkat. Kérjük el a form vásznát a GetCanvasN-nel, majd hozzunk létre egy EnrichedText-et, ez lesz a szövegünk konténere. Ennek menjünk végig gyorsan a beállításain, azaz minden függvényén, ami Set-tel kezdődik. (Eclipse tipp: ahelyett, hogy megvárnánk a fél másodpercet, amire felugrik a content assist, hívjuk meg explicit a Ctrl+Space kombinációval.) A setAlignment... függvényekkel a függőleges és vízszintes pozícionálást, a setTextWrapStyle-lal a tördelést (ezt érdemes TEXT_WRAP_WORD_WRAP-re billenteni, így szavanként tördel), a SetSize-zal a méretet állíthatjuk, a SetTextAbbreviationEnabled bekapcsolásával pedig a konténerből kilógó karakterek esetén pontokat rajzol.

Ez után hozzuk létre a szövegünket, azaz a TextElement-eket. Ennek a Construct függvényével megadhatjuk, mit szeretnénk beleírni (ezt később módosíthatjuk a SetText-tel). Állítsunk be színt (SetTextColort), háttérszínt (SetBackgroundColor) és keretszínt (SetOutlineColor), majd hozzáadni az EnrichedTexthez. Ha már lúd, legyen kövér: állítsunk be egy saját betűtípust. Ehhez nem kell mást tenni, mint létrehozni egy új Font-ot, és a Construct függvényében megadni a tulajdonságait (érdemes a /Res könyvtárba másolni), majd a SetFont függvénnyel hozzárendelni a textelementhez. Ezzel végeztünk is, a szövegünk kirajzolható a canvas->drawText()-tel. Esetleg rajzolhatunk neki keretet a beépített draw metódussal, én a képen látható RoundRectangle-t használtam. Egy kis magyarázat a képhez: az első képernyőn nincs semmi bekapcsolva, a másodikon az Abbrevation van bebillentve, a harmadikon CHARACTER_WRAP, a negyediken WORD_WRAP tördelést használtam.

A példakód ismét letölthető, az általam használt betűtípus a Computerfont névre hallgat, ingyenesen leszedető a dafont.com-ról.

holdmester

Azóta történt

Előzmények