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

Android SDK:創建繪圖應用程序 - 基本功能

by
Difficulty:IntermediateLength:LongLanguages:
This post is part of a series called Create a Drawing App on Android.
Android SDK: Create a Drawing App – Touch Interaction

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

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


系列文章

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

在系列的第壹部分中,我們創建了用戶界面。 在第二部分中,我們在畫布上實現了繪圖並選擇了顏色。 在本系列的最後壹部分中,我們將介紹擦除,創建新圖形以及將圖形保存到用戶設備上的庫中的功能。 我們將在未來的教程中查看可用於增強此應用程序的選項,包括模式填充和不透明度。


成品效果預覽

Drawing App

1.選擇畫筆大小

第壹步

上壹次我們在屏幕上面實現了繪畫,現在我們要讓用戶能夠選擇畫筆大小。 當用戶按下畫筆按鈕時,畫筆大小選項將會出現。 為了響應,擴展主要Activity類聲明的開始行以實現OnClickListener接口:

妳將需要為本教程添加以下導入代碼:

將下列實例變量添加到類中以存儲我們上次定義的三個維度值:

在onCreate中實例化它們:

我們稍後會用到這些。 妳應該在名為“currPaint”的主類中已經有壹個ImageButton實例變量 - 擴展該行以為繪圖按鈕添加另壹個:

在onCreate從布局中檢索對按鈕的引用:

將該類設置為該按鈕的單擊檢查器:

第二步

將onClick代碼添加到該類中:

在該代碼內部,檢查繪圖按鈕上的點擊:

稍後,我們將為其他按鈕的onClick代碼添加條件塊。

第三步

當用戶點擊按鈕時,我們將顯示壹個對話框,顯示三個按鈕的大小。 在if塊內,創建壹個對話框並設置標題:

讓我們定義XML中的對話框布局 - 在應用程序的“res / layout”文件夾中添加壹個新文件,將其命名為“brush_chooser.xml” 並輸入以下大綱:

在線性布局中,為每個按鈕添加壹個尺寸:

每個按鈕在Activity Java代碼中都有壹個用於標識的ID。 妳會註意到每壹個都有壹個代碼描述屬性 - 將指定的字符串添加到妳的“res / values”字符串XML文件中:

正如妳可以在布局文件中看到的,每個按鈕也有壹個可繪畫的文件列為其源屬性。  現在在“res / drawables”文件夾中為每個文件創建新文件,從“small.xml”開始。  並輸入以下代碼:

請註意,我們使用我們定義的維度值。   接下来将“medium.xml”添加到绘图资源文件夹中,输入如下代码:

最後添加“large.xml”,代碼如下:

回到妳的主要Activity類的onClick代碼中,在創建對話框並設置其標題後,妳現在可以設置布局:

第四步

在我們繼續使用對話框之前,讓我們改變繪圖識圖視圖類以使用不同的筆刷大小。 在妳的DrawingView類中,為本教程添加以下導入代碼:

將兩個實例變量添加到類中:

我們將使用第壹個變量作為畫筆大小,第二個變量用於跟蹤用戶切換到橡皮擦時使用的最後壹個畫筆大小,以便在他們決定切換回繪圖時可以恢復到默認大小。 在setupDrawing代碼中,在已經存在的代碼之前,添加以下代碼來實例化這些變量:

我們使用中等大小的筆刷開始。 現在,妳可以更新代碼中使用編碼值設置筆觸寬度的行,以便使用此變量值:

將下列代碼添加到類中以設置畫筆大小:

在代碼中,使用傳遞的值更新畫筆大小:

當我們調用這個代碼的時候,我們會傳遞維度文件中的值,所以我們必須計算它的維度值。  我們更新變量和Paint對象以使用新的大小。  現在添加代碼來獲取和設置我們創建的其他大小變量:

我們將從主Activity類中調用這些代碼。

第五步

回到主要的Activity類中,我們來完成onClick代碼中的Dialog代碼。   在Dialog對象上設置代碼視圖之後,選擇三個按鈕上的點擊,從小尺寸按鈕開始:

我們使用我們添加到自定義視圖類的代碼來設置大小,只要用戶單擊畫筆大小按鈕,然後立即關閉對話框。  接下來對於大中型按鈕也是壹樣的:

通過顯示對話框來完成onClick的繪畫按鈕部分:

對話框將顯示,直到用戶進行選擇或返回到繪畫。

Brush Dialog

第六步

使用新代碼在onCreate中設置默認筆刷大小:


2.擦除

第壹步

現在讓我們添加擦除應用程序。 在自定義繪圖視圖類中,添加壹個布爾實例變量來充當用戶當前是否正在清除的標誌:

在自定義繪圖視圖類中,添加壹個布爾實例變量來充當用戶當前是否正在清除的標誌: 將下面的代碼添加到類中:

在代碼內部,首先更新標誌變量:

現在改變Paint對象來擦除或切換回繪圖:

如果妳正在尋找壹個高級主題來瀏覽,請查看PorterDuff.Mode選項。

第二步

回到主Activity類中,將另壹個ImageButton添加到實例變量列表中:

在onCreate中,檢索對按鈕的引用,並設置類以檢查點擊:

在onClick的條件之後,為onClick中的按鈕添加壹個條件代碼:

與繪圖按鈕壹樣,我們將讓用戶從對話框中選擇橡皮擦大小。 在擦除按鈕的條件塊內,像以前壹樣創建和準備對話框:

我們使用與繪畫按鈕對話框相同的布局。 安裝程序像以前壹樣點擊大小按鈕的檢查器,這次調用我們添加到View類的新的擦除代碼:

我們調用代碼來設置畫筆的大小,這個時候首先將擦除標誌設置為true。 最後,顯示對話框:

Erase Dialog

用戶可以像使用繪畫壹樣使用觸摸交互來擦除:

Drawing Erased

第三步

當用戶點擊繪圖按鈕並選擇筆刷大小時,我們需要重新設置繪圖以防被擦除。 在為onClick的繪圖按鈕部分中的小,中,大按鈕添加的三個點擊檢查器中,使用false參數調用erase代碼 - 在每個onClick中添加此對象,然後調用“brushDialog”對象的dismiss:

當用戶擦除並點擊壹個顏色按鈕時,我們將假定他們想要切換回繪圖。 在paintClicked代碼中,在現有代碼之前,調用擦除代碼,傳遞false:

仍然在paintClicked中,將畫筆大小設置回繪畫而不是擦除時使用的最後壹個:

這種類型的處理是基於他們的行為假設用戶想要做什麽 - 妳可能會沿著這些線增強這個應用程序,所以記住,如果妳想繼續在完成制作.後繼續完善。


3.新的繪畫

第壹步

我們為用戶添加了壹個按鈕來開始壹個新的繪圖,所以我們現在來實現。 將另壹個添加到主Activity類中ImageButton實例變量的列表中:

使用onCreate中布局中列出的按鈕的引用來實例化它,同時還可以檢查點擊:

第二步

在onClick中,為新按鈕添加另壹個條件塊:

在妳的自定義工程圖視圖類中,添加壹個代碼來啟動壹個新的工程圖:

該代碼只是清除畫布,並更新顯示。

回到onCreate中新按鈕的主要Activity類條件塊,讓我們來驗證用戶是否肯定要開始壹個新的繪圖:

彈出壹個對話框讓用戶選擇,如果他們決定繼續並開始壹個新的繪圖,調用新的代碼,在這種情況下當前的繪圖被清除。

New Drawing

4.保存繪畫

第壹步

應用程序功能的其余部分是將繪圖保存到設備的功能。 添加保存按鈕作為主Activity類中ImageButton實例變量序列中的最後壹個:

實例化它並在onCreate中檢查點擊:

現在嘗試將繪畫寫入文件:

讓我們用壹個類似於我們用來創建新圖紙的算法來檢查用戶是否想要繼續並保存:

Save Dialog

如果用戶選擇繼續並保存,我們需要將當前顯示的視圖作為圖像輸出。 在保存對話框的onClick方法中,首先啟用自定義View上的繪圖緩存:

現在嘗試將繪畫寫入文件:

花點時間看看這個代碼。 我們使用insertImage代碼嘗試將圖像寫入媒體存儲以獲取設備上的圖像,並將其保存到用戶圖庫中。  我們傳遞代碼解析器,為顯示的視圖繪畫緩存,為PNG擴展名的文件名隨機生成壹個UUID字符串和壹個簡短描述。  該代碼返回所創建圖像的URL,如果操作失敗,則返回null - 這可以讓我們給用戶反饋:

銷毀圖形緩存,以便保存的任何未來圖形都不會使用現有的緩存:

最後,將以下權限添加到妳的項目清單文件中:

Drawing Saved

在瀏覽設備圖庫時,用戶現在應該能夠看到他們的繪畫圖像:

Drawing In Gallery

總結

本教程講述了壹個基本繪圖應用程序的功能! 當妳運行應用程序,妳應該能夠繪畫,選擇顏色,選擇筆刷和橡皮擦大小,開始新的繪畫和保存圖畫到畫冊。 我們已經完成了在Android上使用觸摸屏交互來促進繪畫的基本過程,但是妳可以通過多種方式來增強應用程序,所以嘗試使用它來構建妳自己的附加功能。  在將來的教程中,我們將介紹使用圖案填充,而不是簡單地使用純色進行繪畫,使用不透明度,並讓用戶選擇不透明度級別。  我們還將介紹交互模型不是觸摸屏的Android設備上的繪圖,例如鼠標或軌跡球。

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