Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Android SDK
Code

Android SDK: Izradite Aplikaciju za Crtanje - S Interakcijom na Dodir

by
Difficulty:IntermediateLength:LongLanguages:
This post is part of a series called Create a Drawing App on Android.
Android SDK: Create a Drawing App - Interface Creation
Android SDK: Create a Drawing App - Essential Functionality

Croatian (Hrvatski) translation by Maja Petek (you can also view the original English article)

U ovoj seriji ćemo izraditi aplikaciju za Android koja omogućuje crtanje prstom koristeći interakciju na dodir. Korisnik će moći birati boje iz palete, birati veličinu kista, brisati, izraditi novi crtež ili pohraniti postojeći u galeriju na uređaju.


Serija Formata

Ova serija o Izradi Aplikacije za Crtanje će imati tri dijela:


Konačni Pregled

Drawing App

U prvom dijelu serije izradili smo korisničko sučelje. U drugom dijelu ćemo implementirati crtanje na platnu i odabir boja. U završnom dijelu serije ćemo predstaviti mogućnost brisanja kako bi se mogli kreirati novi crteži i pohraniti u galeriju na uređaj korisnika. U nadolazećim tutorialima ćemo pogledati opcije koje možete upotrijebiti da unaprijedite ovu aplikaciju, uključujući uzorke za ispunjavanje, prozirnost i interakciju neovisnu o zaslonu na dodir.


1. Pripremite se za Crtanje

1. korak

Prošli put smo kreirali klasu nazvanu "DrawingView" koja je prilagođeni pregled za funkcije crtanja. Kreirali smo konturu deklaracije klase i metodu nazvanu "setupDrawing" - sada ćemo to implementirati. U svojoj DrawingView klasi, dodajte sljedeći uvoz izjava:

Zatim dodajte neke varijable instance na vrhu klase:

Kada korisnik dotakne zaslon i pomiče prst za crtanje, koristit ćemo Path da bismo precrtali njihov crtež na platno. I platno i crtež na vrhu prikazani su Paint objektima. Početna boja za slikanje odgovara prvoj boji u paleti koju smo izradili prethodni put, koja će biti početno odabrana kada se aplikacija pokrene. Na kraju odredimo varijable za platno i bitmapu - korisničke putanje nacrtane s drawPaint biti će nacrtane na platno, koje je nacrtano s canvasPaint.

2. korak

U setupDrawing metodi, instancirajte neke od ovih varijabli kako biste postavili klasu za crtanje. Najprije instancirajte crtajuće Path i Paint objekte:

Zatim podesite početnu boju:

Sada podesite početna svojstva putanje:

Zamijeniti ćemo dio ovog koda u sljedećem tutorialu kada implementiramo mogućnost odabira veličine kista, jer smo sada postavili proizvoljnu veličinu kista. Podešavajući anti-alias, stroke join i cap style postići ćemo da crteži korisnika izgledaju ljepše.

Dovršite setupDrawing metodu instancirajući Paint objekt:

Ovoga smo puta postavili dithering prosljeđujući parametar konstruktoru.

3. korak

Moramo nadjačati nekoliko metoda kako bismo prilagođenu View funkciju napravili kao View za crtež. Prvo, i dalje unutar klase DrawingView, nadjačajte onSizeChanged metodu koja će se pozvati kada je za prilagođeni View dodijeljena veličina:

Unutar te metode, prvo pozovite superklasu metode:

Sada instancirajte platno za crtanje i bitmapu koristeći širinu i visinu vrijednosti:

4. korak

Kako biste dozvolili klasi da funkcionira kao prilagođeni View za crtanje, također moramo nadvladati onDraw metodu, pa je sada dodajte klasi:

Unutar te metode, nacrtajte platno i crtajuću putanju:

Još nismo implementirali mogućnost da korisnik crta Path koristeći Paint za crtanje, ali jednom kada to učinimo, biti će prikazan u View. Svaki put kada korisnik crta koristeći interakciju na dodir, poništiti ćemo View, što će uzrokovati izvršenje onDraw metode.


2. Olakšajte Crtanje

1. korak

Kada je View crteža na zaslonu aplikacije, želimo da ga korisnik dodirne kako bi ga registrirao kao operacije crtanja. Kako bismo to učinili moramo slušati događaje dodirivanja. U drawingView klasi, dodajte sljedeću metodu:

Unutar te metode dohvatite X i Y položaj dodira korisnika:

2. korak

MotionEvent parametar na onTouchEvent metodu omogućiti će nam da odgovorimo na pojedine dodirne događaje. Radnje koje nas zanimaju za implementaciju crteža su down, move i up. Dodajte switch izjavu u metodu da biste odgovorili na svaki od ovih:

Pogledajte na trenutak ovaj kod. Kada korisnik dodirne View, pomičemo se na tu poziciju da počnemo crtati. Kada pomaknu prst na View, crtamo putanju uzduž s njihovim dodirom. Kada podignu prst s View-a, crtamo Path i resetiramo ga za sljedeću operaciju crtanja.

3. korak

Nakon switch izjave dovršite metodu poništavajući View i vraćajući pravu vrijednost:

Pozivanje invalidate će izazvati onDraw metodu za poništavanje.


3. Odabir Boja

1. korak

Uvedimo sada mogućnost da korisnik odabere boje s palete. U glavnom Activity aplikacije, dodajte sljedeće uvoze:

Dodajte klasi sljedeću varijablu instanci:

To predstavlja instancu prilagođenog View-a koji smo dodali izgledu. Unutar onCreate, nakon postojećeg koda, instancirajte ovu varijablu dohvaćajući referencu s izgleda:

Sada imamo View koji je prikazan u Activity na kojem možemo pozvati metode u DrawingView klasi.

2. korak

Postavili smo početnu boju za bojanje u crtačkoj View klasi, sada postavimo korisničko sučelje da se odražava i upravlja njime. U glavnoj Activity klasi dodajte drugu varijablu instance kako biste prikazali gumb boje boje u paleti:

Unutar onCreate, sada želimo dohvatiti prvi gumb boje u području palete, koji će biti početno odabran. Prvo potražite Linear Layout koji je sadržan u:

Dohvatite prvu tipku i pohranite je kao varijablu instance:

Upotrijebiti ćemo različite slike na gumbu da pokažemo da je trenutno odabran:

Dodajte sada ovu datoteku na crteže svoje aplikacije, dajući mu naziv 'paint_pressed.xml' i unesite sljedeći oblik:

Ovo je veoma slično "paint.xml" drawable mapi koju smo kreirali prošli puta, ali s tamnijom bojom oko slike.

3. korak

Sada možemo dozvoliti korisniku da bira boje. Kada smo izradili izgled prošli puta, naveli smo onClick atribut za gumb palete boja - dodajte sada metodu svojoj glavnoj Activity klasi:

Unutar te metode, prvo provjerite da je korisnik kliknuo boju za crtanje koja nije trenutno izabrana boja:

Unutar if bloka, dohvatite tag koji smo podesili za svaki gumb u izgledu, predstavljajući odabranu boju:

Moramo upotrijebiti prilagođenu View klasu da podesimo boju. Idite na DrawingView klasu i dodajte sljedeću metodu:

Unutar metode, počnite poništavajući View:

Zatim parsirajte i podesite boju za crtanje:

Nazad u svojem glavnom Activity, u paintClicked metodi nakon preuzimanja taga boje, pozovite novu metodu u običnom drawable View objektu:

Sada ažurirajte UI da reflektira novu odabranu boju i podesite prethodnu nazad u normalu:


Zaključak

Sada možete pokrenuti aplikaciju i crtati na platnu, odabirući boje za crtanje. Trebali biste vidjeti da gumbi palete boja odražavaju trenutno odabranu boju. U ovom tutorialu smo proučili bitne značajke svake Android aplikacije za crtanje na dodir, i sada biste trebali imati osnovne vještine za implementaciju vlastitih funkcija za crtanje u drugim aplikacijama. U završnom dijelu serije implementirati ćemo brisanje, odabir veličine kista i brisača, spremanje crteža i pokretanje novih crteža.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.