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

Android SDK:創建繪畫APP - 觸摸交互

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

Chinese (Traditional) (中文(繁體)) translation by Fuhuan (you can also view the original English article)

在這個系列裏,我們將講述如何使用交互觸摸來制作安卓手指繪畫APP。 用戶能自由選擇調色,選擇畫筆大小,擦除,新建或保存。


系列文章

制作繪畫APP的教程系列分為這三篇文章:


成品效果預覽

Drawing App

在第壹篇教材中我們新建了用戶界面。 在第二篇文章中我們講述如何繪畫。 在第三篇文章裏,我們將講述如何擦除以及新建和保存繪畫。 我們還將添加壹些新的知識教程。


1.準備繪畫

第壹步

我們新建了壹個名為“DrawingView”的類,這是壹個自定義的視圖界面, 我們建立了 我們創建了類聲明的概要和壹個名為“setupDrawing”的代碼 -  現在我們將實現這個。在妳的DrawingView類中,添加以下導入代碼:

接下來在類的頂部添加壹些實例變量:

當用戶用手指在屏幕上繪畫時,我們將使用壹個Path來在屏幕上跟蹤他們的繪畫動作。 屏幕和它上面的圖形都是由Paint對象來表示的。 默認的顏色將是我們使用的最後壹次顏色。 最後,我們選擇的畫布和位圖的變量-與繪制的用戶路徑drawPaint將被吸引到畫布上,這是繪制canvasPaint。

第二步

在setupDrawing代碼中,讓我們現在設置壹些這些變量來為繪畫設置類。  首先調試繪畫Path和Paint對象:

然後是默認顏色:

選擇開始設置默認畫筆屬性:

在我們實現選擇筆刷的功能同時,我們將在下壹個教程中更改部分代碼,現在我們設置任意筆刷大小。 設置抗鋸齒,筆畫連接和末端樣式將使用戶的繪畫顯得更加平滑。

通過調試畫布Paint對象來完成setupDrawing代碼:

這次我們通過給構造函數傳遞壹個參數來設置抖動。

第三步

我們需要重寫壹些代碼來將自定義視圖函數作為圖形視圖。 首先,仍在DrawingView類中,重寫onSizeChanged代碼,該代碼將在自定義視圖分配大小時調用:

在這個代碼裏面,首先調用超類的代碼:

現在使用寬度和高度值調試繪畫畫布和位圖:

第四步

為了允許類作為自定義的繪畫顯示,我們還需要重寫onDraw代碼,所以現在把它添加到類中:

在代碼裏面,繪制畫布和繪制路徑:

我們沒有實現用戶使用繪畫Paint繪制Path的功能,但是如果我們這樣做了,它就會在View中顯示出來。 當用戶繪制使用觸摸交互,我們將使視圖無效,導致onDraw代碼執行。


2.便於繪畫

第壹步

當繪畫在手機當前屏幕上時,我們希望用戶觸摸它來繪畫。 要做到這壹點的話,我們需要聽取觸摸事件。 在妳的drawingView類中,添加以下代碼:

檢索用戶觸摸的X和Y位置:

第二步

該MotionEvent參數到的onTouchEvent代碼可以讓我們對特定的觸摸事件作出響應。 我們有興趣實施繪畫的行動是下降,移動和上升。 在代碼中添加壹個switch代碼來響應每壹個操作:

花點時間看看這個代碼。 當用戶繪畫時,我們移動到該位置開始繪制。 當他們在pigment上移動他們的手指時,我們沿著他們的觸摸畫出路徑。 當他們將手指從視圖上擡起時,我們繪制路徑並將其重置為下壹個繪制操作。

第三步

在switch代碼之後,通過使View失效並返回壹個真值來完成該代碼:

調用無效將導致onDraw代碼執行。


3.選擇顏色

步驟1

現在我們來實現用戶從調色板中選擇顏色的功能。 在APP的主Activity中,添加以下代碼:

將下面的實例變量添加到類中:

這表示我們添加到布局的自定義視圖的實例。 在onCreate中,在現有的代碼之後,通過從布局檢索對它的引用來實例化這個變量:

我們現在有壹個顯示在我們可以調用DrawingView類中的代碼的Activity中的View 。

第二步

我們在繪畫視圖類中設置默認畫筆顏色,現在讓我們設置用戶界面來反映和管理它。 在主Activity類中,添加另壹個實例變量來表示調色板中的顏色按鈕:

在onCreate中,我們現在想要檢索調色板區域中的第壹個油漆顏色按鈕, 最初將被選中。首先檢索它包含在內的線性布局:

獲取第壹個按鈕並將其存儲為實例變量:

我們將在按鈕上使用不同的繪畫圖像來顯示當前選中的圖像:

現在把這個文件添加到妳的APP的drawable中,給它起壹個名字“paint_pressed.xml”  並輸入如下形狀:

這與“paint.xml”非常相似 我們上次創建的drawable,但在畫筆周圍顏色較深。

第三步

現在我們可以讓用戶選擇顏色。 當我們上次創建布局時,我們列出了調色板按鈕的onClick屬性 - 現在將該代碼添加到主Activity類中:

在這個代碼裏面,首先檢查用戶是不是選了其他顏色:

在if塊內部,檢索我們為布局中的每個按鈕設置的標簽,代表所選的顏色:

我們需要使用自定義的View類來設置顏色。 現在移到DrawingView類並添加以下代碼:

在該代碼內,開始使視圖無效:

接下來設置繪畫的顏色:

回到妳的主Activity中,在檢索顏色標簽後的paintClicked代碼中,調用繪畫對象上的新代碼:

現在更新用戶界面以反映新的選擇的畫筆,並將前壹個設置恢復正​​常:


總結

妳現在可以打開APP並在畫布上選擇要繪制的顏色進行繪制了。 妳應該看到調色板按鈕反映當前選擇的顏色。 在本教程中,我們已經完成了Android的任何觸摸繪畫APP的基本功能,所以妳現在應該具備在其他APP中實現自己的繪畫功能的基本技能。 在系列的最後部分,我們將講述如何執行清除,選擇筆刷和橡皮擦大小,節省圖紙和開始新的圖紙。

关注我们的公众号
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.