Jednoduché kreslení prstem pro Android v Javě

V předchozím kvízu, Kvíz - Základy vývoje Android aplikací v Javě, jsme si ověřili nabyté zkušenosti z kurzu.

V dnešním Android tutoriálu si ukážeme jak vytvořit jednoduchou aplikaci pro kreslení. Ta se nám může hodit, když budeme chtít něco načrtnout a někomu to ukázat (například při vysvětlování) nebo jen tak pro chvilky nudy. A samozřejmě k procvičení programování

Ukažme si motivační opbrázek hotové aplikace, ať nám to jde lépe od ruky:

Úvod

Projekt budeme vyvíjet v Android Studiu. Spustíme program a zvolíme založit nový projekt.

Vybereme, že chceme vytvořit novou prázdnou aktivitu:

Dále nakonfigurujeme samotný projekt. Vyplníme jméno, název balíčku a lokaci, kam umístíme projekt:

Konfiguraci potvrdíme tlačítkem Finish a zobrazí se nám samotné vývojové prostředí.

onTouchEvent()

Než se pustíme do samotného kreslení, seznámíme se s událostí onTouchEvent(MotionEvent event). Tato událost je volána vždy, když dojde k dotyku na obrazovku. My si pro začátek do TextView vypíšeme souřadnice, na které jsme se obrazovky dotkli.

Přidáme tedy do XML layoutu TextView. V aktivitě si uložíme referenci na TextView pomocí metody findViewById(), což provedeme v metodě 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);
    }
}

Nyní přepíšeme chování metody onTouchEvent(), čímž budeme reagovat na dotyk prstem na obrazovku. Aktuální pozici (souřadnice) prstu vypíšeme, abychom viděli, zda se zjišťují správně:

@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;
}

Pokud aplikaci nyní spustíme a budeme jezdit prstem po obrazovce, budou se souřadnice zobrazovat v TextView:

Canvas

Když již umíme zobrazit souřadnice, tak na nich můžeme začít kreslit. Z metody onCreate() odstraníme vše kromě volání super.onCreate(). Z layoutu rovněž odmažeme přidaný TextView, protože jej již nebudeme potřebovat. Napíšeme si totiž vlastní, na kterém budeme zobrazovat naše čárance.

Třída MyCanvas

Vytvořme si nyní novou třídu, například MyCanvas. To uděláme pravým klikem na package projektu a výběrem Add/Class. Zde vyplníme pouze název a potvrdíme. Vytvoří se nám prázdná třída:

package cz.devbook.aepaint;

public class MyCanvas {

}

Klíčovým slůvkem extends podědíme View. To znamená, že třída reprezentuje něco, co se dá zobrazovat:

public class MyCanvas extends View

Klepnutím přidáme import a necháme za nás IDE i doplňit konstruktor (ten první s parametrem Context).

Objekt Paint

Vytvoříme třídní proměnnou paint typu Paint:

private Paint paint = new Paint();

Ta nyní obsahuje vlastnosti k nastavení pera. To si teď nastavíme v kontruktoru naší nové třídy, hned pod klíčovým slovem super, kterým se volá kontruktor předka. Můžete použít jaké nastavení chcete, zde si vysvětlíme co která metoda dělá.

Výchozí barva pera je černá. Zadává se ve formátu 0xffxxxxxx, kde x reprezentuje klasickou CSS notaci barev. Po naimportování import android.graphics.Color; lze volit barvy i příjemnější cestou pomocí konstant:

paint.setColor(Color.RED);

Dále zapneme vyhlazování:

paint.setAntiAlias(true);

A určíme styl vykreslení. Budeme používat cestu, kterou když namalujeme, tak se automaticky uzavře. Proto použijeme styl Paint.Style.STROKE, což je okraj. Ten nám zobrazí jen křivku, kterou kreslíme:

paint.setStyle(Paint.Style.STROKE);

Dále nastavíme zaoblení koncové a začáteční špičky křivky a bodů v ohybu:

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

Konečně nastavíme i tloušťku pera v pixelech:

paint.setStrokeWidth(5);

Path

Můžete vyzkoušet i další nastavení, tato však považuji za nejpřínosnější. Nyní si vytvoříme další třídní proměnnou path typu Path. Ta bude užita pro uchovávání souřadnic cesty.

private Path path = new Path();

onTouchEvent()

Do třídy přidáme událost onTouchEvent(), kterou již známe. Lehce ji však pozměníme. Pomocí cesty budeme kreslit čáru. Počátek bude v bodě, kde došlo k dotyku. Dále budeme kreslit do bodu, kde došlo k pohybu nebo ke skončení dotyku.

Čáru kreslíme proto, že displej neregistruje všechny body na křivce, kterou prstem kreslíme, ale pouze některé. Kdybychom je nespojili čárou, kreslili bychom tečkovaně.

@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()

Teď ještě přidáme rychlý event vykreslování onDraw(), kde cestu vykreslíme:

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

Hlavní třída

Přepneme se do hlavní třídy a vytvoříme třídní proměnnou myCanvas:

private MyCanvas myCanvas;

Té v metodě onCreate() přiřadíme instanci naší třídy a použijeme ji:

@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);
}

Nyní aplikaci vyzkoušíme.

Pokud nám kreslení funguje v pořádku, můžete si vyzkoušet měnit nějaké hodnoty a pohrát si s nastavením. Pak budeme pokračovat. Ještě přidáme nějaké drobnůstky.

V druhé části tutoriálu aplikaci vylepšíme, např. přidáme podporu pro multi-touch, čištění plátna a další vychytávky.