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);   //這兩個功能一樣,都是用來設置背景顏色的。

二、代碼實現

  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

       運行結果:

     

 

三、多種幾何圖形實現

     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);(只有弧,右圖)

      

 

 

 

 

 

 

 

 

       記錄學習,為什么不收藏原博客呢?因為自己重新寫一遍  印象深刻哼

 

 

 

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM