Category Archives: Resurssit

Nine-patch Androidissa

Graafinen käyttöliittymä vaatii paljon kuvaresursseja, ja mikäli on tarkoitus tukea erilaisia Android-laitteita, joudutaan tekemään samoista kuvista eriresoluutioiset versiot. Työ vähenee huomattavasti, jos kuvat venyvät sopivaan kokoon.

Nine-patch tarjoaa mahdollisuuden venyttää kuvia järkevästi, eli se venyttää vain määriteltyjä osia kuvasta. Muu osa kuvasta pysyy sellaisena, kuin se on kuvassa, eikä veny. Venyviä alueita voi kuvassa olla useita ja niiden kokojen suhteet pysyvät aina samoina.

Nine-patch-kuvaan on myös mahdollista määritellä alue, johon sisältö tulee. Tämä on erityisen käytännöllistä tehtäessä grafiikoita säiliöihin, kuten nappeihin. Kun napin kuvasta tekee pienen ja asettaa sen kasvamaan sisällön mukaan ja kun sisältö on määritelty napin keskelle, grafiikka tulee automaattisesti oikean kokoiseksi.

Kuinka tehdä 9-patch kuvia

Nine-patch kuvat ovat normaaleja png-kuvia, joissa on yhden kuvapisteen paksuinen reuna joka on joko täysin läpinäkyvä tai valkoinen. Tälle reunalle piirretään yhden kuvapisteen levyistä mustaa viivaa ja kahden eri sivuilla olevan viivan määrittämä leikkaava alue rajaa venyvän ja sisällön täyttävän alueen. Android laitteella nämä kuvat on talletettava muotoon “.9.png”, jotta Android tietää kuvien olevan nine-patchejä.

Vasemmalla ja ylhäällä olevat mustat viivat rajaavat venyvän alueen. Oikealla ja alhaalla olevat viivat taas rajaavat kuvan sisällön alueen.

Kuvat voi tehdä millä tahansa kuvankäsittelyohjelmalla, mutta helpoin tapa on käyttää Android SDK:n mukana tulevaa työkalua “draw9patch”. Ohjelma löytyy “tools” kansiosta.

Ohjelma lisää kuvaan yhden kuvapisteen kokoiset reunat ja antaa muokata kuvaa vain näiden reunojen alueelta. Ohjelma myös näyttää oikeassa laidassa miltä kuva näyttää eri tavoilla venytettynä.

Avattuasi ohjelman voit raahata haluamasi kuvan ohjelmaan. Tämän jälkeen näet kuvan venytyksen tuloksen oikealla ja kuvan muokattavana vasemmalla. Kuvassa kannattaa valita tasaisia – usein vain yhden pikselin mittaisia – alueita venyväksi, koska tällöin kuvan väritys ei muutu. On myös tapauksia, missä on järkevää venyttää väritystä niin että isommilla ko’oilla väritys muuttuu tasaisesti.

Voit asettaa kuvassa editorissa venyvän alueen näkyväksi “show patches” valinnalla. Venyvät alueet ovat violetit alueet, jossa vihreät viivat kohtaavat. Samalla tavalla saat sisällön alueen näkyviin “show content” valinnalla.

Huomaa miten kuvassa olevat yksityiskohdat pysyvät tarkkoina, vaikka muu kuva venyy täyttämään koko näytön.

Viime viikon animaatioartikkelissa on käytetty tässä esimerkkinä olevaa nine-patch kuvaa. Nine-patch kuvien käyttö onnistuu applikaatiossa täysin samalla tavalla kuin normaalien kuvien. Android itse hoitaa kuvan koon ja sisällön asettelun.

Esimerkkikuva ilman nine-patchiä.

Esimerkkikuva nine-patchin jälkeen.

Androidin resurssit, orientaatio ja kuvan tarkkuus

Mobiililaitteille koodatessa tarvitsee usein ottaa huomioon, että käyttäjä saattaa käyttää laitettaan muussakin, kuin pystysuunnassa. Ohjelmiston ulkonäköä eri asennoissa tulisi miettiä ja vain harvoin orientaation lukitseminen yhteen asentoon on toimiva ratkaisu.

Androidissa pystyy hyvin pienellä vaivalla tekemään uusia pohjia (layout) tai käyttämään eri kuvia riippuen laitteen orientaatiosta. Android ottaa nämä pohjat ja kuvat automaattisesti käyttöön orientaatiosta riippuen, jos ne on asetettu oikeisiin kansioihin ja nimetty oikein.

Projektin resurssien peruskansiot ovat drawable ja layout. Näihin kansioihin asetetut resurssit tulevat köyttöön näytön tarkkuudesta tai orientaatiosta riippumatta. Android kuitenkin hakee resursseja ensisijaisesti kansiosta, joka vastaa nöytön tarkkuutta ja/tai orientaatiota. Mikäli pohja main.xml löytyy kansiosta “layout-land” sekä “layout”, valitaan tiedosto “layout-land”-kansiosta, kun laitetta pidetään vaakatasossa ja layout-kansiosta muissa tapauksissa.

Uutta projektia luotaessa Eclipse ei luo kaikkia kansioita suoraan, vaan joudut itse lisäämään ne. Kansioiden nimissä on aina joko “drawable” tai “layout” alussa. Alun jälkeen voi kansioille antaa viivalla eroteltuna sääntöjä siitä millaisessa tilanteessa tämän kansion resursseja tulisi käyttää. Täydellinen lista käytettävissä olevista parametreista löytyy osoitteesta:
http://developer.android.com/guide/topics/resources/providing-resources.html#AlternativeResources

Kuvien kanssa voi helposti tulla ongelmia, jos xml pohjat vaativat erilaisia kuvia eri orientaatioissa. Huono ratkaisu olisi tehdä uusi pohja haluttuun orientaatioon ja uudet kuvat, mitkä nimettäisiin jokainen yksilöllisesti. Xml:n osista, kuten kuvista on kuitenkin mahdollista tehdä uudet versiot samalla nimellä oikeisiin kansioihin. Näin Android osaa hakea oikean kuvaresurssin orientaatiosta tai resoluutiosta riippuen ilman xml-pohjan muuttamista.

Kuvien tarkkuuksien kanssa kannattaa olla varovainen. Mikäli Android löytää kuvan drawable-hdpi kansiosta, mutta ei drawable-mdpi kansiosta se automaattisesti skaalaa kuvan pienemmäksi. Tämä johtaa usein suttuisiin kuviin. Android 3.2 on tuonut lisää mahdollisuuksia näyttöjen koon ja tarkkuuden erittelyyn ja näihin perehdytään lähemmin erillisessä artikkelissa.

Jos kuva on vain drawable-kansiossa sitä ei skaalata vaan näytetään sellaisenaan. Drawable-kansioon ei tulisi laittaa kuvia, vaan täällä on suositeltavaa pitää vain xml:llä luotuja bittikarttoja tai kuvaresursseja, joiden luomista käsittelen myöhemmässä artikkeliss

Mikäli samaa kuvaa käytetään eri näyttötarkkuuden laitteilla tulevat kuvat erittäin isoiksi huonoilla tarkkuuksilla tai erittäin pieniksi suurilla tarkkuuksilla. Tarkempi kuvaus kuvien tarkuuksien käytöstä löytyy:
http://developer.android.com/guide/practices/screens_support.html#density-independence