Jednoduché kreslenie prstom pre Android v Jave

V dnešnom Android tutoriále si ukážeme ako vytvoriť jednoduchú aplikáciu pre kreslenie. Tá sa nám môže hodiť, keď budeme chcieť niečo načrtnúť a niekomu to ukázať (napríklad pri vysvetľovaní) alebo len tak pre chvíľky nudy. A samozrejme k precvičenie programovanie

Ukážme si motivačné opbrázek hotové aplikácie, nech nám to ide lepšie od ruky:

Úvod

Projekt budeme vyvíjať v Android Studiu. Spustíme program a zvolíme založiť nový projekt.

Vyberieme, že chceme vytvoriť novú prázdnu aktivitu:

Ďalej nakonfigurujeme samotný projekt. Vyplníme meno, názov balíčka a lokáciu, kam umiestnime projekt:

Konfiguráciu potvrdíme tlačidlom Finish a zobrazí sa nám samotné vývojové prostredie.

OnTouchEvent ()

Než sa pustíme do samotného kreslenia, zoznámime sa s udalosťou onTouchEvent(MotionEvent event). Táto udalosť je volaná vždy, keď dôjde k dotyku na obrazovku. My si pre začiatok do TextView vypíšeme súradnice, na ktoré sme sa obrazovky dotkli.

Pridáme teda do XML layoutu TextView. V aktivite si uložíme referenciu na TextView pomocou metódy findViewById(), čo vykonáme v metóde onCreate():

public class MainActivity extends AppCompatActivity {
    private TextView coords;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        coords = findViewById(R.id.coords);
    }
}

Teraz prepíšeme správanie metódy onTouchEvent(), čím budeme reagovať na dotyk prstom na obrazovku. Aktuálnu pozíciu (súradnice) prsta vypíšeme, aby sme videli, či sa zisťujú správne:

@Override
public boolean onTouchEvent(MotionEvent event) {
    // Získání souřadnic
    float xPos = event.getX();
    float yPos = event.getY();

    // Zobrazení na textView
    this.coords.setText(getString(R.string.label_coords) + (int) xPos + "x" + (int) yPos);

    return true;
}

Ak aplikáciu teraz spustíme a budeme jazdiť prstom po obrazovke, budú sa súradnice zobrazovať v TextView:

Canvas

Keď už vieme zobraziť súradnice, tak na nich môžeme začať kresliť. Z metódy onCreate() odstránime všetko okrem volaní super.onCreate(). Z layoutu takisto odmazať pridaný TextView, pretože ho už nebudeme potrebovať. Napíšeme si totiž vlastný, na ktorom budeme zobrazovať naše čárance.

Trieda MyCanvas

Vytvorme si teraz novú triedu, napríklad MyCanvas. To urobíme pravým klikom na package projektu a výberom Add / Class. Tu vyplníme len názov a potvrdíme. Vytvorí sa nám prázdna trieda:

package cz.devbook.aepaint;

public class MyCanvas {

}

Kľúčovým slovkom extends podědíme View. To znamená, že trieda reprezentuje niečo, čo sa dá zobrazovať:

public class MyCanvas extends View

Kliknutím pridáme import a necháme za nás IDE aj doplniť konštruktor (ten prvý s parametrom Context).

Objekt Paint

Vytvoríme triedny premennú paint typu Paint:

private Paint paint = new Paint();

Tá teraz obsahuje vlastnosti na nastavenie pera. To si teraz nastavíme v kontruktoru našej novej triedy, hneď pod kľúčovým slovom super, ktorým sa volá kontruktor predka. Môžete použiť aké nastavenia chcete, tu si vysvetlíme čo ktorá metóda robí.

Predvolená farba pera je čierna. Zadáva sa vo formáte 0xffxxxxxx, kde x reprezentuje klasickú CSS notáciu farieb. Po naimportovaní import android.graphics.Color; možno voliť farby aj príjemnejšie cestou pomocou konštánt:

paint.setColor(Color.RED);

Ďalej zapneme vyhladzovanie:

paint.setAntiAlias(true);

A určíme štýl vykreslenia. Budeme používať cestu, ktorú keď namaľujeme, tak sa automaticky uzavrie. Preto použijeme štýl Paint.Style.STROKE, čo je okraj. Ten nám zobrazí len krivku, ktorú kreslíme:

paint.setStyle(Paint.Style.STROKE);

Ďalej nastavíme zaoblenie koncovej a začiatočné špičky krivky a bodov v ohybe:

paint.setStrokeCap(Cap.ROUND);
paint.setStrokeJoin(Join.ROUND);
paint.setStrokeMiter(.5f);

Konečne nastavíme aj hrúbku pera v pixeloch:

paint.setStrokeWidth(5);

Path

Môžete vyskúšať aj ďalšie nastavenia, táto však považujem za najprínosnejšie. Teraz si vytvoríme ďalšie triedne premennú path typu Path. Tá bude použitá na uchovávanie súradníc cesty.

private Path path = new Path();

OnTouchEvent ()

Do triedy pridáme udalosť onTouchEvent(), ktorú už poznáme. Ľahko ju však zmeníme a doplníme. Pomocou cesty budeme kresliť čiaru. Počiatok bude v bode, kde došlo k dotyku. Ďalej budeme kresliť do bodu, kde došlo k pohybu alebo k skončeniu dotyku.

Čiaru kreslíme preto, že displej neregistruje všetky body na krivke, ktorú prstom kreslíme, ale iba niektoré. Keby sme ich nespojili čiarou, kreslili by sme bodkovaným.

@Override
public boolean onTouchEvent(MotionEvent event) {
    // Deklarace proměnných pro ukládání pozice dotyku
    float xPos = event.getX();
    float yPos = event.getY();

    // Zpracování akcí
    switch (event.getAction()) {
        // Při dotyku, se vyresetuje výchozí pozice
        case MotionEvent.ACTION_DOWN:
            path.moveTo(xPos, yPos);
            break;

        // Při pohybu nebo opuštění obrazovky
        case MotionEvent.ACTION_MOVE:
        case MotionEvent.ACTION_UP:
            // Nastaví se současné souřadnice
            path.lineTo(xPos, yPos);
            break;
    }

    // Překreslení
    invalidate();
    return true;
}

OnDraw ()

Teraz ešte pridáme rýchly event vykresľovanie onDraw(), kde cestu vykreslíme:

@Override
public void onDraw(Canvas canvas) {
    canvas.drawPath(path, paint);
}

Hlavná trieda

Prepneme sa do hlavnej triedy a vytvoríme triedne premennú myCanvas:

private MyCanvas myCanvas;

Tej v metóde onCreate() priradíme inštanciu našej triedy a použijeme ju:

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    // Přepnutí zobrazování na naši vlastní třídu
    myCanvas = new MyCanvas(this);
    setContentView(myCanvas);
}

Teraz aplikáciu vyskúšame.

Ak nám kreslenie funguje v poriadku, môžete si vyskúšať meniť nejaké hodnoty a pohrať sa s nastavením. Potom budeme pokračovať. Ešte pridáme nejaké drobnôstky.

V druhej časti tutoriálu aplikáciu vylepšíme, napr. Pridáme podporu pre multi-touch, čistenie plátna a ďalšie vychytávky.