
Naučte sa vyvíjať Android aplikácie – grafika II
Ak chcete kresliť zložitejšiu grafiku, prípadne grafiku, ktorá sa často aktualizuje, využijete s výhodou kreslenie na Canvas. Objekt Canvas znamená v praxi presne to, čo jeho preklad do slovenčiny – maliarske plátno, ktoré slúži ako podklad na vykresľovanie. Canvas umožňuje vykresľovanie objektov do súradnicového systému.
Kreslenie na plátno (canvas) s následným zobrazením grafiky na obrazovke zariadenia je principiálne možné realizovať dvoma spôsobmi:
využitím existujúceho objektu View – v prípade ak chcete doplniť statické grafické prvky k už existujúcim prvkom prostredníctvom existujúceho plátna
prostredníctvom novo vytvoreného plátna – v prípade dynamického obsahu, ktorý má byť pravidelne menený a prekresľovaný pričom v tom istom vlákne voláme metódu invalidate() a v samostatnom vlákne používame manažment cestou triedy SurfaceView, ktorá sprístupňuje aktuálnu plochu cestou triedy SurfaceHolder (getHolder(), SurfaceHolder.Callback), sprístupnenie plátna v rámci samostatného vlákna je v tomto prípade riešené metódou lockCanvas() a jeho odblokovanie po vykreslení všetkých požadovaných prvkov metódou unlockCanvasAndPost()
Najčastejšie budete v súvislosti s kreslením na Canvas využívať metódy drawText(), drawPoints(), drawColor(), drawOval() a drawBitmap().
Canvas umožňuje pokročilejšie vykresľovanie, môžete nastaviť rôzne farby a štýly, hrúbku čiar, veľkosť textu. Môžete nastaviť rôzne metódy grafickej optimalizácie, napríklad antialiasing na vyhladenie obrazu, aby sa odstránili zubaté šikmé čiary a podobne. Pre naznačené účely budete používať metódy setStrokeWidth(), setTextSize(), setColor(), či setAntiAlias().
Vykresľovanie na Canvas budeme demonštrovať na triviálnom príklade v ktorom vykreslíme obdĺžnik, čiaru a text.
Najskôr vytvoríme triedu Kreslenie
V kóde hlavnej aktivity nastavíme túto triedu ako kontextové View pre vykresľovanie v metóde SetContentView(). Z uvedeného vyplýva, že XML návrh hlavnej aktivity sa vôbec nepoužije
Kreslenie dotykom na Canvas
U prístrojov s dotykovým displejom sa námet na ďalšiu grafickú aplikáciu, plnú dynamiky ponúka sám –kresliť prstom po obrazovke. Pre tento účel trochu prerobíme triedu Kreslenie z predchádzajúceho príkladu.
Princíp je jednoduchý. V obslužnej procedúre onTouchEvent budeme snímať ako udalosti dotyky (MotionEvent.ACTION_DOWN) a pohyby prsta (MotionEvent.ACTION_MOVE) a ukladať súradnice kde ste sa displeja dotkli do poľa. Pre jednoduchosť budeme serializovať, to znamená ukladať súradnice x a y sériovo do jednorozmerného poľa. Následne vykreslíme čiaru ako spojnicu medzi dvomi poslednými bodmi. Všimnite si nastavenie hrúbky čiary.
Po identifikácii udalosti dotyku, alebo posunu prsta sa explicitne vyvolá udalosť invalidate(). V obsluhe tejto udalosti sa zavolá metóda onDraw pre prekreslenie obrazovky
V kóde hlavnej aktivity nastavíme túto triedu ako kontextové View pre vykresľovanie v metóde SetContentView(). XML návrh hlavnej aktivity sa vôbec nepoužije
Samozrejme aj tu platí, že za málo námahy, málo efektu, aplikácia má „drobné“ vady, napríklad ak kreslíte viac útvarov, spojí body kde ste pero zdvihli a znovu položili.
Dymamické vykresľovanie na Canvas s využitím View
Vykresľovanie na Canvas môžete realizovať cez View, alebo triedu odvodenú od View, ako v predchádzajúcich príkladoch. To v prípade ak aktualizácie grafiky budú menej časté. Pri často aktualizovanej grafike je lepšie použiť špecializovanú triedu SurfaceView.
Plátno je rozhraním medzi aktivitou a obrazovkou, resp. plochou (surface) zariadenia, na ktorú budú vykreslené grafické prvky. Prostredníctvom plátna sú vykonávané konkrétne príkazy určené na kreslenie – tzv. rendering pixelov. V konečnom dôsledku ide o zmenu farieb pixelov obrazovky čím vytvárame požadované grafické tvary. Informácie o farbe pixelov konkrétnych grafických prvkov sú umiestňované do pamäťového bloku objektu Bitmap, ktorý musíme vytvoriť spolu s objektom Canvas.
Námetom príkladu bude pohyb figúrky po ploche. Vzhľadom k tomu, že vykresľovanie cez View sa hodí pre menej často aktualizovanú grafiku, mohli by sme takto realizovať napríklad jednoduchú hru typu šachy. V reálnej aplikácii by sa figúrka pohybovala po ploche znázorňujúcej hernú scénu, napríklad po šachovnici.
Návrhový kód hlavnej aktivity bude využívať kontejner RelativeLayout
Skôr než pristúpite k tvorbe kódu na vykresľovanie, je potrebné realizovať dva prípravné kroky:
- Do adresára drawable vložte obrázok nejakej figúrky. Obrázok ľahko získate cez Google v sekcii obrázky.
- V súbore dimens.xml v zložke res\values definujte výšku a šírku obrázku.
Vykresľovanie sa realizuje v Java kóde hlavnej aktivity. Figúrka mení svoju polohu v sekundových intervaloch.
V metóde onCreate() vytvoríme inštanciu objektu Bitmap na zobrazenie obrázka z resourceov.
Vytvoríme triedu HraView odvodenú od View a pridáme ju do layoutu hlavnej aktivity
rl.addView(hraView);
Všimnite si v konštruktore triedy HraView spôsob získania informácie o rozlíšení obrazovky v horizontálnom aj vertikálnom smere. Pohyb figurky bude realizovaný ako postupné vykresľovanie, pričom jednotlivé iterácie sa realizujú v threade. V každej fáze pohybu je predtým vykreslený obrázok vymazaný a nakreslený na novej pozícii. Pre jednoduchosť meníme súradnice vykresľovania pripočítaním konštanty. Figúrka sa samozrejme vykreslí iba v prípade ak jej súradnice nie sú mimo zobrazovacej plochy. Taktovanie po sekundách sa vykonáva pomocou metódy
Thread.sleep(1000);
Na vykresľovanie sa využíva prekrytá metóda onDraw() a v nej canvas.drawBitmap()
Kompletný kód hlavnej aktivity
Rekapitulácia seriálu
1 – Prvá aplikácia
3 - Zorientujte sa v projekte aplikácie
4 – Princípy dizajnu a škálovania
5 – Uporiadanie prvkov používateľského rozhrania
6 – Obsluha udalostí
7 – Aplikácia s dvomi aktivitami
8 – Spustenie na reálnom zariadení
9 – Intenty, alebo kto to urobí
10 – Dotyky a gestá
11 - Dotyky a gestá II
12 - Zmena orientácie displeja
13 – Grafika 1
Zobrazit Galériu