Vydělávej až 160.000 Kč měsíčně! Akreditované rekvalifikační kurzy s garancí práce od 0 Kč. Více informací.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

Jednoduché kreslení prstem pro Android v Javě

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:

Výsledná Java aplikace pro kreslení prstem pro Android - Základy vývoje Android aplikací v Javě

Úvod

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

Nový projekt v Android Studio - Základy vývoje Android aplikací v Javě

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

Výběr prázdné aktivity v Android Studio - Základy vývoje Android aplikací v Javě

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

Konfigurace nového projektu v Android Studio - Základy vývoje Android aplikací v Javě

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:

Zobrazení souřadnic dotyku - Základy vývoje Android aplikací v Javě

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.


 

Stáhnout

Stažením následujícího souboru souhlasíš s licenčními podmínkami

Staženo 29x (768.42 kB)
Aplikace je včetně zdrojových kódů

 

Předchozí článek
Kvíz - Základy vývoje Android aplikací v Javě
Všechny články v sekci
Základy vývoje Android aplikací v Javě
Článek pro vás napsal Petr Štechmüller
Avatar
Uživatelské hodnocení:
1 hlasů
Autor se věnuje primárně programování v Javě, ale nebojí se ani webových technologií.
Aktivity