Android自定控件基礎（一）——幾何圖形繪製

雖然本人有幾年開發經驗，可是自定義控件這一起，研究的不多，慚愧……用到的時候就是百度查找，複製粘貼。工時緊，老是想的快點完工就好。（都是藉口啦，想學總會有時間噠）

做爲一個Android開發 要說自定義控件不會寫，太丟人了，我決定一點點作起，之後用的都是本身的自定義控件！！！加油~~~

進入正題：此博客參考文章：啓艦大神博客

1、先說一下自定義控件必須的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);   //這兩個功能同樣，都是用來設置背景顏色的。

2、代碼實現

1.  新建一個工程，新建一個類：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

       運行結果：

     

 

3、多種幾何圖形實現

     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);（只有弧，右圖）

      

 

 

 

 

 

 

 

 

       記錄學習，爲何不收藏原博客呢？由於本身從新寫一遍  印象深入哼