Android自定控制元件基礎（一）——幾何圖形繪製
雖然本人有幾年開發經驗，但是自定義控制元件這一塊兒，研究的很少，慚愧……用到的時候就是百度查詢，複製貼上。工時緊，總是想的快點完工就好。（都是藉口啦，想學總會有時間噠）
作為一個Android開發 要說自定義控制元件不會寫，太丟人了，我決定一點點做起，以後用的都是自己的自定義控制元件！！！加油~~~
進入正題：此部落格參考文章：啟艦大神部落格
一、先說一下自定義控制元件必須的Paint和Canvas
簡單來說，就是畫圖所需要的比和紙（畫布）Paint是筆 Canvas是紙 有了紙筆，就盡情展現你的繪畫天賦吧~
Paint的幾個基本設定函式
- paint.setAntiAlias(true);//抗鋸齒功能 作用是邊緣柔化,可以消除混疊等
- paint.setColor(Color.RED); //設定畫筆顏色
- paint.setStyle(Style.FILL);//設定填充樣式
- paint.setStrokeWidth(30);//設定畫筆寬度
- paint.setShadowLayer(10, 15, 15, Color.GREEN);//設定陰影
畫布的背景設定
- canvas.drawColor(Color.BLUE);
- canvas.drawRGB(255, 255, 0); //這兩個功能一樣，都是用來設定背景顏色的。
二、程式碼實現
- 新建一個工程，新建一個類：MyView繼承自View
1 package com.matai.betheltest; 2 3 import android.content.Context; 4 import android.graphics.Canvas; 5 import android.graphics.Color; 6 import android.graphics.Paint; 7 import android.view.View; 8 9 public class MyView extends View { 10 11 private static final String TAG = "MyView"; 12 13 private Context context; 14 15 public MyView(Context context) { 16 super(context); 17 this.context=context; 18 } 19 20 //重寫OnDraw函式 用於繪圖 21 @Override 22 protected void onDraw(Canvas canvas) { 23 super.onDraw(canvas); 24 25 Paint paint=new Paint();//設定畫筆 26 paint.setAntiAlias(true);//抗鋸齒功能（邊緣柔化,可以消除混疊等） 27 paint.setColor(Color.RED); //設定畫筆顏色 28 paint.setStyle(Paint.Style.FILL);//設定填充樣式 Style.FILL/Style.FILL_AND_STROKE/Style.STROKE 29 paint.setStrokeWidth(5);//設定畫筆寬度 30 paint.setShadowLayer(2,2,2,Color.GREEN);//設定陰影 31 32 canvas.drawRGB(255,255,255);//設定畫布背景顏色 33 //畫圓 34 canvas.drawCircle(190, 200, 150, paint); 35 } 36 }View Code
2. Activity佈局檔案設定
<?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/frameLayout" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".RobotActivity"> </FrameLayout>View Code
3.Activity程式碼
1 public class RobotActivity extends AppCompatActivity {
2
3 private static final String TAG = "RobotActivity";
4
5 private FrameLayout frameLayout;
6
7 //畫幾何圖形
8 private MyView myView;
9
10 @Override
11 protected void onCreate(Bundle savedInstanceState) {
12 super.onCreate(savedInstanceState);
13 setContentView(R.layout.activity_robot);
14
15 frameLayout=findViewById(R.id.frameLayout);
16
17 myView=new MyView(this);
18
19 frameLayout.addView(myView);
20 }
View Code
執行結果：
三、多種幾何圖形實現
1. 畫直線：canvas.drawLine(10,10,50,60,paint);引數說明：
drawLine(float startX, float startY, float stopX, float stopY, @NonNull Paint paint)
startX：開始畫直線的x座標
startY：開始畫直線的y座標
stopX：畫直線結束時的x座標
startY：畫直線結束時的y座標
paint：畫筆
效果圖：
2. 畫多條直線：drawLines(float[] pts, @NonNull Paint paint) 引數說明：
pts：點的集合，每兩個點形成一條直線，組織方式為｛x1,y1,x2,y2,x3,y3,……｝
float []pts={10,10,100,100,200,200,400,400};
canvas.drawLines(pts, paint);
效果圖：
3.畫點 drawPoint(float x, float y, @NonNull Paint paint)引數說明：
x：x座標
y: y座標
canvas.drawPoint(40,50,paint);
效果圖：（點很大是因為我畫筆寬度寫成了50）
4. 多個點：
drawPoints(float[] pts, @NonNull Paint paint) 引數說明：同畫兩條直線一樣
drawPoints(float[] pts, int offset, int count,@NonNull Paint paint)這個方法多出的兩個引數說明：
offset：pts陣列中跳過的數值個數，注意不是點的個數！一個點是兩個數值；
count:參與繪製的數值的個數，指pts[]裡數值個數，而不是點的個數，因為一個點是兩個數值
程式碼為：float []pts={10,10,100,100,200,200,400,400}; canvas.drawPoints(pts, 0, 8, paint);（全部畫出 不跳過任何一個點） 效果圖：
程式碼為：float []pts={10,10,100,100,200,200,400,400}; canvas.drawPoints(pts, 2, 4, paint); （跳過第一個點 不畫最後一個點）效果圖：
程式碼為：float []pts={10,10,100,100,200,200,400,400}; canvas.drawPoints(pts, 4, 4, paint); （跳過第二個點 不花最後一個點和第一個點）效果圖：
5. 矩形工具類RectF與Rect
兩者區別不大，都是滑出一個矩形，最常用的構造方法是Rect(int left, int top, int right, int bottom) 都可以看懂 是根據四個點構造矩形
canvas.drawRect(10, 10, 100, 100, paint);//直接構造 效果圖：
還有一種構造方法是傳入RectF或者Rect矩形變數：drawRect (RectF rect, Paint paint)或者drawRect (Rect r, Paint paint)
使用：RectF rect = new RectF(120, 10, 210, 100);
canvas.drawRect(rect, paint);//使用RectF構造 效果圖：
6. 圓角矩形
void drawRoundRect (RectF rect, float rx, float ry, Paint paint) 引數說明：
RectF rect:要畫的矩形
float rx:生成圓角的橢圓的X軸半徑
float ry:生成圓角的橢圓的Y軸半徑
使用：RectF rect = new RectF(100, 10, 300, 100);
canvas.drawRoundRect(rect, 20, 10, paint); 效果圖：
7. 橢圓：橢圓是根據矩形生成的，矩形的長為橢圓的x軸 寬為y
void drawOval (RectF oval, Paint paint) 引數說明：
RectF oval：用來生成橢圓的矩形
使用：RectF rect = new RectF(100, 10, 300, 100);
canvas.drawOval(rect, paint);//同一個矩形畫橢圓 效果圖：
8.弧形：弧是橢圓的一部分，而橢圓是根據矩形來生成的，所以弧當然也是根據矩形來生成的。
drawArc (RectF oval, float startAngle, float sweepAngle, boolean useCenter, Paint paint) 引數說明：
RectF oval:生成橢圓的矩形
float startAngle：弧開始的角度，以X軸正方向為0度
float sweepAngle：弧持續的角度
boolean useCenter:是否有弧的兩邊，True，還兩邊，False，只有一條弧
使用：RectF rect1 = new RectF(100, 10, 300, 100);canvas.drawArc(rect1, 0, 90, true, paint);（有邊邊，左圖）
RectF rect2 = new RectF(400, 10, 600, 100);canvas.drawArc(rect2, 0, 90, false, paint);（只有弧，右圖）
記錄學習，為什麼不收藏原部落格呢？因為自己重新寫一遍 印象深刻哼