Android繪圖機制（三）——自定義View的三種實現方式以及實戰專案操作

1.對現有的控制元件進行擴充套件
2.通過元件來實現新的控制元件
3.重寫View來實現全新的控制元件

注意本節的專案來自於《Android群英傳》中的幾個小例子

一.對現有的控制元件進行擴充套件之自定義TextView

我們新建一個Class類TextView繼承TextView

package com.lgl.view.view;

import android.content.Context;
import
 
 android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;

/**
 * Created by LGL on 2016/1/10.
 */
public class TextView extends android.widget.TextView {

    private Paint paint1, paint2;

    public TextView(Context context) {
        super
 
(context);
    }

    public TextView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }


    @Override
    protected void onDraw(Canvas canvas) {

        //例項化畫筆
        paint1 = new Paint();
        //給畫筆1設定顏色
        paint1.setColor(getResources()
                .getColor(android.R.color.holo_blue_light));
        //給畫筆1設定Style
 

        paint1.setStyle(Paint.Style.FILL);

        //例項化畫筆
        paint2 = new Paint();
        //給畫筆2設定顏色
        paint2.setColor(Color.YELLOW);
        //給畫筆2設定Style
        paint2.setStyle(Paint.Style.FILL);

        //繪製外層矩形
        canvas.drawRect(0, 0, getMeasuredWidth(), getMeasuredHeight(), paint1);
        //繪製內層矩形
        canvas.drawRect(10, 10, getMeasuredWidth() - 10, getMeasuredHeight() - 10, paint2);
        canvas.save();
        //父類完成的方法，即繪製完成
        super.onDraw(canvas);
    }
}

截圖

二.重寫View來實現全新的控制元件

市面上有許許多多的APP，他們之中有很多的控制元件都不是原生的，而是需要我們自定義View的

package com.lgl.view.view;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.view.View;
import android.view.WindowManager;

/**
 * 半弧圓
 * Created by LGL on 2016/1/10.
 */
public class RCircleView extends View {

    //弧的畫筆
    private Paint rpaint;
    //圓的畫筆
    private Paint cpaint;
    //文字的畫筆
    private Paint tvpaint;
    //螢幕高寬
    private int width, height;
    //文字
    private String text = "繪製半弧圓";


    public RCircleView(Context context) {
        super(context);
        init();
    }

    public RCircleView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    private void init() {
        //獲取螢幕的寬高
        //Android繪圖機制（一）——自定義View的基礎屬性和方法裡面有講
        WindowManager wm = (WindowManager) getContext()
                .getSystemService(Context.WINDOW_SERVICE);

        width = wm.getDefaultDisplay().getWidth();
        height = wm.getDefaultDisplay().getHeight();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        //例項化畫筆，以及設定屬性，顏色，文字大小
        rpaint = new Paint();
        rpaint.setStyle(Paint.Style.STROKE);
        cpaint = new Paint();
        tvpaint = new Paint();
        tvpaint.setColor(Color.WHITE);
        tvpaint.setTextSize(20);
        //繪製弧線的區域矩形
        RectF mArcRectF = new RectF((float) (width * 0.1), (float) (width * 0.1), (float) (width * 0.9), (float) (width * 0.9));
        //繪製圓
        canvas.drawCircle(width / 2, width / 2, (float) (width * 0.5 / 3), cpaint);
        //繪製弧線
        canvas.drawArc(mArcRectF, 270, 240, false, rpaint);
        //這樣繪製的話，會出現偏差的，文字以圓形的中心開始繪製
        canvas.drawText(text, width / 2, width / 2, tvpaint);
    }
}

截圖

這裡，你會疑惑，為什麼文字不是居中？我們來畫個圖

這個還是比較基礎的，下一節我們就來點新的玩法

Demo下載：本系列最後一節提供