Advertisement
  1. Code
  2. Android SDK

Android SDK: Paggawa ng Drawing App – Touch Interaction

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

Tagalog (Wikang Tagalog) translation by Robert Alexander (you can also view the original English article)

Sa seryeng ito, gagawa tayo ng finger-painting app para sa Android gamit ang touch interaction. Ang user ay maaaring mamili mula sa palette ng mga kulay, mamili ng laki ng brush, magbura, gumawa ng bagong drowing, o mag-save mg kanilang dating drowing sa galerya ng aparato.


Ayos ng Serye

Ang seryeng ito sa Paggawa ng Drawing App ay nahahati sa tatlong bahagi:


Huling Prebiyu

Drawing App

Sa unang bahagi ng serye ay ginawa natin ang user interface. Sa ikalawang bahagi na ito ay isasagawa natin ang pagguhit sa kanbas at pagpili ng mga kulay. Sa huling bahagi ng serye ay ipapakita natin ang mga sumusunod na kakayahan: pagbubura, paggawa ng mga bagong drowing, at pagse-save ng drowing sa galerya ng user device. Titignan natin ang mga pagpipiliang gamit na maaari mong gamitin para mapahusay ang app na ito sa mga susunod na tutoryal kasama na ang pagpuno sa mga pattern, opasiti, at mga interaksyon liban sa touchscreen.


1. Maghanda Para sa Pagguhit

Hakbang 1

Noong nakaraan ay gumaa tayo ng class na tinawag nating “DrawingView” na isang pinasadyang View kung saan magagawa ang mga punksyon sa pagguhit. Ginawa natin ang balangkas ng deklarasyon ng class at sistema na pinangalanang “setupDrawing” - na siyang gagamitin natin ngayon. Sa iyong DrawingView class, idagdag ang mga sumusunod na pahayag:

Kasunod nito, maglagay ng ilang mga halimbawa ng mga variable sa ibabaw ng class:

Kapag hinawakan ng user ang screen at ginalaw ang kanyang daliri, gagamitin natin ang Path para sundan ang kanyang aksyon ng pagguhit sa kanbas. Ang kanbas at drowing sa ibabaw nito ay parehong kinakatawan ng mga Paint obdyek. Ang paunang kulay ng pintura ay katumbas ng unang kulay sa palette na ginawa natin noong nakaraan na siya ring pauna nating pipiliin kapag inilunsad na ang app. Sa wakas ay idedeklara natin ang mga variable para sa kanbas at bitmap. Ang mga path na iginuhit ng drawPaint user ay iguguhit sa kanbas gamit ang canvasPaint.

Hakbang 2

Sa pamamaraan na setupDrawing, magbigay tayo ng ilang mga halimbawa ng mga variable ngayon  upang ihanda ang kalse sa pagguhit. Una, ipakita ang drowing Paint at ang mga Paint obdyek:

Kasunod nito, ihanda ang paunang kulay:

Ngayon, itakda na ang mga katangian ng paunang path:

Babaguhin natin nang bahagya ang kowd na ito sa susunod na tutoryal kapag ipinakita na natin kung paano pumili ng sukat ng brush. Sa ngayon, magtatakda muna tayo ng kahit anong laki ng brush. Ang pagtatakda ng anti-alias, stroke join, at cap style ay papalabasing mas maayos ang mga drowing ng user.

Kumpletuhin ang pamamaraan na setupDrawing method sa pamamagitan ng pagpapakita ng kanbas Paint obdyek.

Ngayon, ihahanda natin ang pagkalito sa pamamagitan ng pagpasa ng parametro sa tagapagbuo.

Hakbang 3

Kinakailangan nating ipagwalang-bahala ang dalawang method para gawing drowing View ang pinasadyang punksyon ng View. Una, ipagwalang-bahala ang onSizeChanged method na tatawagin kapag ang pinasadyang View ay nagtakda ng sukat. Gawin ito habang nasa loob pa ng DrawingView class:

Sa loob ng method na ito, unang tawagin ang superclass method:

Ngayon, bigyang halimbawa ang kanbas ng drowing at bitmap gamit ang mga halaga ng lapad at taas:

Hakbang 4

Para payagang gumana ang class bilang pinasadyang drowing View, kailangan din nating ipagsawalang-bahala ang onDraw method kaya idagdag na ito ngayon sa class:

Sa loob ng method, iguhit ang kanbas at ang path ng drowing:

Hindi pa natin naipapakita ang kakayahan ng user na gumuhit ng Path gamit ang drowing Paint. Ngunit sa oras na naipakita na natin ito, gagawin natin ito para mapunta ito sa View. Sa bawat oras na guguhit ang user gamit ang touch interaction, ipagsasawalang-bisa natin ang View dahil para maisagawa ang onDraw method.


2. Pangangasiwa ng Pagguhit

Hakbang 1

Kapag ang drowing View ay nasa screen ng app, nais natin na ang bawat hawak ng user dito ay mairehistro bilang mga operasyon ng pagguhit. Para gawin ito, kailangan nating makinig para sa mga pangyayari ng paghawak. Sa iyong drawingView class, idagdag ang mga sumusunod na method:

Sa loob ng method, kunin ang mga posisyong X and Y ng user touch:

Hakbang 2

Ang parametro ng MotionEvent sa onTouchEvent method ay papayagan tayong tumugon sa mga partikular na touch event. Ang mga aksyon kung saan tayo interestado para maisagawa ang pagguhit ay ang down, move, at up. Isama ang pahayag ng paglipat sa method upang tumugon sa bawat isa ng mga ito:

Magbigay ng ilang saglit upang tignan ang kowd na ito. Kapag hinawakan ng user ang View, gagalaw tayo sa posisyon na iyon at magsisimulang gumuhit. Kapag ginalaw nila ang kanilang daliri sa View, guguhit tayo ng path kasabay ng kanilang paghaplos. Kapag itinaas nila ang kanilang daliri mula sa View, guguhit tayo ng Path at ire-reset ito para sa susunod na operasyon ng pagguhit.

Hakbang 3

Pagkatapos ng pahayag ng paglipat, kumpletuhin ang method sa pamamagitan ng pagsasawalang-bisa ng View at pagbabalik ng tunay na halaga nito:

Ang pagsasawalang-bisa nito ay ang magiging dahilan para magawa ag onDraw method.


3. Pagpili ng mga Kulay

Hakbang 1

Ngayon ay ipapakita na natin ang kakayahan ng user na pumili ng mga kulay mula sa palette. Sa pangunahing Activity ng app, idagdag ang mga susunod na mga angkat:

Isama ang mga sumusunod na variable ng pagkakataon sa class:

Kinakatawan nito ang halimbawa ng pasadyang View na ating idinagdag sa layout. Sa loob ng onCreate, magbigay ng halimbawa ng variable na ito sa pamamagitan ng pagkuha ng sanggunian nito mula sa layout pagkatapos ng umiiral na kowd:

Ngayon ay mayroon na tayong View na ipinakita sa Activity kung saan pwede nating tawagan ang mga method sa DrawingView class.

Hakbang 2

Naihanda na natin ang paunang kulay ng pintura sa drowing View class. Ngayon naman ay ihahanda natin ang user interface para ipakita at pangasiwaan ito. Sa pangunahing Activity class, idagdag ang isa pang halimbawa ng variable upang kumatawan sa buton para sa kulay ng pintura sa palette:

Sa loob ng onCreate, nais ngayon nating kunin ang unang buton para sa kulay ng pintura sa palette na siyang pauna nating pipiliin. Una, kuhanin ang Linear Layout na ikinapapalooban nito:

Kunin ang unang buton at iimbak bilang halimbawa ng variable:

Gagamit tayo ng ibang imaheng naiguguhit sa buton upang ipakita na ito ang kasalukuyang pinili at ginagamit:

Isama ngayon ang file na ito sa iyong mga drawable ng app at pangalanang  "paint_pressed.xml" at ipasok ang sumusunod na hugis:

Ito ay kahalintulad ng “paint.xml” drawable na ginawa natin noong nakaraan. Subalit ito ay may mas madilim na kulay sa paligid ng pintura.

Hakbang 3

Ngayon ay pwede na nating hayaan ang user na pumili ng mga kulay. Nang ginawa natin ang layout noong nakaraan, naglista tayo ng katangian ng onClick para sa mga buton ng palette ng kulay. Idagdag ang method sa iyong pangunahing Activity class ngayon:

Sa loob ng method na ito, i-tsek muna kung ang user ay pumili na ng kulay ng pintura na hindi katulad ng naunang napili:

Sa loob ng if block, kunin ang tag na inihanda natin para sa bawat buton sa layout na kumakatawan sa napiling kulay:

Kinakailangan nating gamitin ang pinasadyang View class para itakda ang kulay. Ngayon, lumipat na sa DrawingView class at idagdag ang sumusunod na method:

Sa loob ng method, magsimula sa pagsasawalang-bisa sa View:

Kasunod nito, suriin at itakda ang kulay para sa drawing:

Balik sa iyong pangunahing Activity, sa paintClicked method pagkatapos kunin ang tag ng kulay, tawagin ang bagong method sa ipinasadyang drowing View obdyek:

Ngayon, i-update ang UI upang ipakita ang bagong napiling pintura at ibalik ang naunang napiling pintura sa normal:


Konklusyon

Ngayon, maaari ka nang magpatakbo ng app at gumuhit sa kanbas habang pumipili ng mga kulay na gagamitin sa drowing. Kailangang tignan mo kung ang mga buton ng palette ng kulay ay sumasalamin sa kasalukuyang napiling kulay. Sa tutoryal na ito ay inalam at kinilala natin ang mga importanteng tampok ng kahit anong touch-drawing app para sa Android. Kaya ngayon, dapat ay taglay mo na ang mga elementaryang kasanayan para maisagawa ang iyong sariling punksyon ng pagguhit sa iba pang mga app. Sa huling bahagi ng serye, pag-aaralan at isasagawa natin ang pagbubura, pamimili ng sukat ng brush at pambura, pagse-save ng mga drowing, at pagsisimula ng mga bagong drowing.

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.