雖然本人有幾年開發經驗，但是自定義控制元件這一塊兒，研究的很少，慚愧……用到的時候就是百度查找，復制粘貼，工時緊，總是想的快點完工就好，（都是借口啦，想學總會有時間噠）
作為一個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);（只有弧，右圖）
記錄學習，為什么不收藏原博客呢？因為自己重新寫一遍 印象深刻哼
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/223908.html
標籤：其他