Android 自定View基礎

之前只是零散的學習過自定義View的相關知識,過後就忘的差不都了,從今天起,記錄下自己學過的自定義View知識,可能寫的比較簡單

自定義View 起步

創建一個類繼承至View ,重寫它的構造方法

public class PracticeView extends View {
    public PracticeView(Context context) {
        this(context,null);
    }
    public PracticeView(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs,0);
    }
    public PracticeView(Context context,@Nullable AttributeSet attrs,int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    }
    @Override
    protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
        super.onLayout(changed, left, top, right, bottom);
    }
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
    }
}

這就完成了一個簡單的自定義View,在OnDraw()方法中就可以根據我們的需求來繪製各種內容了。關於onMeasure()和onLayout()方法之後在講解,今天只關注第三個方法onDraw();

在自定義View中Canvas 就相當於一個畫布,其中繪製圖形我們還需要一個重要的工具畫筆

 Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);

一般在第三個構造方法中 去new 一個Paint 對象,加上Paint.ANTI_ALIAS_FLAG參數的意思就是開啓抗鋸齒來讓圖形和文字的邊緣更加平滑,另外,你也可以使用 Paint.setAntiAlias(boolean aa) 來動態開關抗鋸齒。抗鋸齒的效果如下:這裏寫圖片描述

在未開啓的時候就有一種毛邊的效果,大多數情況下它都應該是開啓的;但在極少數的某些時候,你還真的需要把它關閉。

使用Canvas 繪製基礎圖形

Canvas.drawColor(@ColorInt int color) 顏色填充

整個繪製區域統一塗上指定的顏色。

 canvas.drawColor(Color.RED);  將自定義View 所佔屏幕區域染成純紅色

類似的方法還有 drawRGB(int r, int g, int b) 和 drawARGB(int a, int r, int g, int b) ,它們和 drawColor(color)作用都是一樣的

 int a, int r, int g, int b    
  ARGB 是一種色彩模式,也就是RGB色彩模式附加上Alpha(透明度)
  a 透明度    r   RED  紅色    g   GREEN   綠色     b   BLUE   藍色  
   通過 r  g   b  三原色+透明度 來組成各種顏色值

drawCircle(float centerX, float centerY, float radius, Paint paint) 畫圓

參數解釋 : 1 圓心 x 座標 ,2 圓心 y 座標 ,3 圓的半徑 4 畫筆

        paint.setStyle(Paint.Style.FILL);  繪製實心圓
        paint.setColor(Color.BLACK);
        canvas.drawCircle(200,150,100,paint);
        繪製一個圓心爲(200150),半徑爲100,黑色的圓

這裏寫圖片描述

Paint.setColor(int color) 設置畫筆顏色

   Paint 最常用的方法之一,用來設置繪製內容的顏色

Paint.setStyle(Style style) 設置繪製模式

    -   paint.setStyle(Paint.Style.STROKE)                畫線模式(即勾邊模式)
    -   paint.setStyle(Paint.Style.FILL);                 填充模式
    -   paint.setStyle(Paint.Style.FILL_AND_STROKE);    上述兩模式的合集,一起作用

如果你想繪製空心圓(或者叫環形)

        paint.setStyle(Paint.Style.STROKE);
        paint.setColor(Color.BLACK);                      
        canvas.drawCircle(500,150,100,paint);

這裏寫圖片描述

Paint.setStrokeWidth(float width)

   設置線條的寬度

在上述代碼中加上一句

        paint.setStyle(Paint.Style.STROKE);
        paint.setColor(Color.BLACK);
        paint.setStrokeWidth(20);   // 線條寬度爲 20 像素                        
        canvas.drawCircle(500,150,100,paint);

這裏寫圖片描述

drawRect(float left, float top, float right, float bottom, Paint paint) 畫矩形

   參數   left        矩形左上角頂點 x座標 
          top        矩形左上角頂點  y座標
          right      矩形右下角頂點  x座標 
          bottom     矩形右下角頂點  y座標
        paint.setStyle(Paint.Style.FILL);
        canvas.drawRect(100, 100, 500, 500, paint);

        paint.setStyle(Paint.Style.STROKE);
        canvas.drawRect(700, 100, 1100, 500, paint);

這裏寫圖片描述

重載方法

    drawRect(RectF rect, Paint paint) 和 drawRect(Rect rect, Paint paint)
        Rect rect = new Rect(100, 100, 500, 500);
        canvas.drawRect(rect, paint);

        RectF rectF = new RectF(700, 100, 1100, 500);
        canvas.drawRect(rectF, paint);    //結果和上面一樣

drawPoint(float x, float y, Paint paint) 畫點

        paint.setStrokeCap(Paint.Cap.ROUND);    //設置點的形狀    圓型
        paint.setStrokeWidth(20);      //設置點的大小
        canvas.drawPoint(200,200,paint);

這裏寫圖片描述

        paint.setStrokeCap(Paint.Cap.BUTT);    //設置點的形狀    方形
        paint.setStrokeWidth(20);    //設置點的大小
        canvas.drawPoint(400,200,paint);

這裏寫圖片描述

drawOval(float left, float top, float right, float bottom, Paint paint) 畫橢圓

         paint.setStyle(Paint.Style.STROKE);
         RectF rectF= new RectF(200,200,600,400);
        canvas.drawOval(rectF,paint);  //  或者 canvas.drawOval(200,200,600,400);  一樣的效果

這裏寫圖片描述

drawLine(float startX, float startY, float stopX, float stopY, Paint paint) 畫線

  canvas.drawLine(200,200,600,60,paint);

這裏寫圖片描述

drawRoundRect(float left, float top, float right, float bottom, float rx, float ry, Paint paint) 畫圓角矩形

    參數   left       矩形左上角頂點 x座標 
          top        矩形左上角頂點  y座標
          right      矩形右下角頂點  x座標 
          bottom     矩形右下角頂點  y座標               
          rx 和 ry 是圓角的橫向半徑和縱向半徑。
  canvas.drawRoundRect(200,200,600,400,20,20,paint);

這裏寫圖片描述

drawArc(float left, float top, float right, float bottom, float startAngle, float sweepAngle, boolean useCenter, Paint paint) 繪製弧形或扇形

drawArc() 是使用一個橢圓來描述弧形的。left, top, right, bottom 描述的是這個弧形所在的橢圓;startAngle 是弧形的起始角度(x 軸的正向,即正右的方向,是 0 度的位置;順時針爲正角度,逆時針爲負角度),sweepAngle 是弧形劃過的角度;useCenter 表示是否連接到圓心,如果不連接到圓心,就是弧形,如果連接到圓心,就是扇形。
paint.setStyle(Paint.Style.FILL); // 填充模式  
canvas.drawArc(200, 100, 800, 500, -110, 100, true, paint); // 繪製扇形  
canvas.drawArc(200, 100, 800, 500, 20, 140, false, paint); // 繪製弧形  
paint.setStyle(Paint.Style.STROKE); // 畫線模式  
canvas.drawArc(200, 100, 800, 500, 180, 60, false, paint); // 繪製不封口的弧形 

這裏寫圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章