該系列教程概述與目錄：http://www.cnblogs.com/chengyujia/p/5787111.html 一、繪製三角形 在上一篇文章中，我們已經新建了虛擬方向鍵的自定義控制項DirectionKeys類，下麵我們繼續。 本項目中的虛擬方向鍵的背景是4個三角形組成的矩形，其實是4個三角形 ...
該系列教程概述與目錄：http://www.cnblogs.com/chengyujia/p/5787111.html
一、繪製三角形
在上一篇文章中，我們已經新建了虛擬方向鍵的自定義控制項DirectionKeys類，下麵我們繼續。
本項目中的虛擬方向鍵的背景是4個三角形組成的矩形，其實是4個三角形的按鈕。
系統自帶的按鈕是矩形的，怎麼做一個三角形按鈕呢？
首先我需要瞭解，所有控制項的外觀都是畫出來的，當然不是我們手工去畫而是用程式去畫。
用程式怎麼畫呢？
很多技術平臺上都有繪圖功能，用起來也很相似。既然都是面向對象的思想，我們可以與現實中畫畫類比。
首先我們需要一塊畫布(canvas)，然後需要一支畫筆(paint)和顏料(color)，現實中這就可以畫了。然而現在是要程式去畫，必須要告訴程式你要畫什麼。由於每個人畫的東西不一樣，五花八門，所以畫不同的東西，告訴程式的方式也可能不同。我們畫三角形選擇用path對象告訴程式，下麵細講。然後程式就給你畫出來了。
瞭解了繪圖的基本流程，下麵我們用代碼來實現。
在android.view.View中有個方法叫onDraw的方法，我們只要重寫(Override)該父類方法，在該方法中畫我們想要的東西即可。
在Android Studio中輸入onDraw時根據智能提示生成瞭如下代碼：
/** * 通過重寫父類的onDraw方法來繪製我們需要的圖形 * * @param canvas 這裡的canvas是系統提供的一塊矩形畫布，我們要做的就是在這塊畫布上畫我們想要的東西。 */ @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); }
從上面的代碼中可以看到，onDraw方法給我們傳來了一個叫canvas的對象，canvas就是一個畫布，我們可以在上面畫畫。自動生成的“super.onDraw(canvas);”是調用了父類中的onDraw方法，我們可以點進去看看。
/** * Implement this to do your drawing. * * @param canvas the canvas on which the background will be drawn */ protected void onDraw(Canvas canvas) { }
發現父類中的onDraw方法是空的，可以不調用。
現在有畫布了，我們還需要畫筆。這好辦，new一個就行了。
//準備畫筆 Paint paint = new Paint();
畫筆要蘸什麼顏色的顏料呢？比如紅色吧。
//設置畫筆的顏色 paint.setColor(Color.RED);
這裡的顏色是一個int類型的整數，是一個ARGB值。系統提供了幾種常用顏色做為常量，比如Color.RED=0xFFFF0000，你也可以按照自己的喜好設置一種顏色。
下麵我們以畫左邊的三角形為例。
畫布上的每一個像素都有它的坐標，坐標系原點是畫布的左上角。要畫三角形就需要知道三個頂點的坐標。
設畫布寬為width，高為height；
則畫布4個頂點和中心點的坐標分別是：
左上點 0，0
左下點 0，height
右上點 width,0
右下點 width,height
中心點 width/2,height/2
那麼左邊三角形的三個頂點坐標分別是(0,0)(width/2,height/2)(0，height)
下麵該path對象出場了。path的意思是路徑，它能告訴程式沿著設計好的路徑畫圖。我們知道三角形是由三段直線段組成的，程式中也是這麼設計的：
//畫布的寬 int width = canvas.getWidth(); //畫布的高 int height = canvas.getHeight(); //畫左方向鍵背景三角形的路徑 Path pathLeft = new Path(); //從畫布左上點開始 pathLeft.moveTo(0, 0); //畫直線到畫布中心點 pathLeft.lineTo(width / 2, height / 2); //再畫直線到畫布左下點 pathLeft.lineTo(0, height); //自動閉合圖形。從最後一個點（左下點）畫直線到第一個點（左上點）。 pathLeft.close();
到目前為止DirectionKeys類的所有代碼如下：
package net.chengyujia.happysnake; import android.content.Context; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; import android.graphics.Path; import android.util.AttributeSet; import android.view.View; /** * Created by ChengYuJia on 2016/8/19. * 屏幕上的虛擬方向鍵 */ public class DirectionKeys extends View { //只有一個參數的構造方法是我們在程式中通過“new”關鍵字創建實例時調用。 public DirectionKeys(Context context) { super(context); } //有兩個參數的構造方法是系統在XML佈局文件中創建實例時調用。 public DirectionKeys(Context context, AttributeSet attrs) { super(context, attrs); } /** * 通過重寫父類的onDraw方法來繪製我們需要的圖形 * * @param canvas 這裡的canvas是系統提供的一塊矩形畫布，我們要做的就是在這塊畫布上畫我們想要的東西。 */ @Override protected void onDraw(Canvas canvas) { //畫布的寬 int width = canvas.getWidth(); //畫布的高 int height = canvas.getHeight(); /* （小提示：在電腦中一般都是將左上角作為坐標原點的） 畫布上四個頂點和中心點的坐標如下： 左上點 0，0 左下點 0，height 右上點 width,0 右下點 width,height 中心點 width/2,height/2 */ //畫左方向鍵背景三角形的路徑 Path pathLeft = new Path(); //從畫布左上點開始 pathLeft.moveTo(0, 0); //畫直線到畫布中心點 pathLeft.lineTo(width / 2, height / 2); //再畫直線到畫布左下點 pathLeft.lineTo(0, height); //自動閉合圖形。從最後一個點（左下點）畫直線到第一個點（左上點）。 pathLeft.close(); //準備畫筆 Paint paint = new Paint(); //設置畫筆的顏色 paint.setColor(Color.RED); //設置畫筆為實心（預設就是實心，這裡不設置也行） paint.setStyle(Paint.Style.FILL); //按照剛纔的路徑設計畫了一個實心的紅色三角形 canvas.drawPath(pathLeft, paint); } }
二、測試
現在我們就能用一下我們自定義的控制項了，和用系統自帶的控制項一樣，只不過在XML佈局文件中需要用類的全名做標簽，不然會報錯。
我們將MainActivity的佈局文件修改如下：
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="net.chengyujia.happysnake.MainActivity"> <!--自定義控制項一定要用類的全名，不然會報錯。--> <net.chengyujia.happysnake.DirectionKeys android:layout_width="match_parent" android:layout_height="match_parent" /> </LinearLayout>
然後運行一下，截圖如下：
好了，本篇到此結束，下篇繼續。
如果遇到問題可以在下麵的評論中交流。^_^
