android--------自定義控件 之 基本實現篇

前面簡單的講述了Android中自定義控件中的幾個方法，今天經過代碼來實現一個簡單的案例

 

自定義一個扇形圖

自定義控件示例：

這裏先介紹繼承View的方式爲例

public class CircularView extends View {


    /****
     * 有三個參數的構造函數中第三個參數是默認的Style，
     * 這裏的默認的Style是指它在當前Application或Activity所用的Theme中的默認Style，且只有在明確調用的時候纔會生效，
     */

    private final static String TAG = CircularView.class.getName();

    private Paint mPaint;

    private RectF oval;

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

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

    public CircularView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    public CircularView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
        init();
    }

    private void init(){
        mPaint = new Paint();
        mPaint.setAntiAlias(true);
        oval = new RectF();
    }

    /****
     * 測量-Measure過程是計算視圖大小
     *
     * @param widthMeasureSpec
     * @param heightMeasureSpec
     */
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);

        //根據提供的測量值(格式)提取模式(三個模式之一)
        //MeasureSpec有3種模式分別是UNSPECIFIED, EXACTLY和AT_MOST,
        int widthMode = MeasureSpec.getMode(widthMeasureSpec);  //取出寬度的測量模式
        int widthSize = MeasureSpec.getSize(widthMeasureSpec);//獲取View的大小(寬度的確切數值)

        int heightMode = MeasureSpec.getMode(heightMeasureSpec);
        int heightSize = MeasureSpec.getSize(heightMeasureSpec);

        Log.i(TAG,"onMeasure---widthMode--->"+widthMode);
        switch (widthMode){
            case MeasureSpec.EXACTLY:

                break;
            case MeasureSpec.AT_MOST:

                break;
            case MeasureSpec.UNSPECIFIED:

              break;
        }
        Log.i(TAG,"onMeasure--widthSize--->"+ widthSize);
        Log.i(TAG,"onMeasure--heightMode-->"+ heightMode);
        Log.i(TAG,"onMeasure--heightSize-->"+heightSize);

    }


    /***
     * 肯定View的大小(這個函數在視圖大小發生改變時調用。)
     *
     * 寬度，高度，上一次寬度，上一次高度。
     * 只需關注 寬度(w), 高度(h) 便可，這兩個參數就是View最終的大小。
     * @param w
     * @param h
     * @param oldw
     * @param oldh
     */
    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        Log.i(TAG,"onSizeChanged");
    }

    /****
     * 佈局-Layout過程用於設置視圖在屏幕中顯示的位置,onLayout通常只會在自定義ViewGroup中才會使用
     *
     * 肯定佈局的函數是onLayout，它用於肯定子View的位置，在自定義ViewGroup中會用到，他調用的是子View的layout函數。
     *
     * @param changed
     * @param left
     * @param top
     * @param right
     * @param bottom
     */
    @Override
    protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
        super.onLayout(changed, left, top, right, bottom);
        Log.i(TAG,"onLayout");
    }


    /***
     * 繪製-draw過程主要用於利用前兩步獲得的參數，將視圖顯示在屏幕上，到這裏也就完成了整個的視圖繪製工做
     * @param canvas
     */
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        mPaint.setColor(Color.BLACK);
        // FILL填充, STROKE描邊,FILL_AND_STROKE填充和描邊
        mPaint.setStyle(Paint.Style.FILL_AND_STROKE);
        int width = getWidth();//佈局中自定義控件的寬度
        int height = getHeight();
        Log.i(TAG,"onDraw--->" + width + "--" + height);
        float radius = width /4;
        canvas.drawCircle(width/2,width/2,radius,mPaint);//畫圓
        mPaint.setColor(getResources().getColor(R.color.colorAccent));
        //用於定義的圓弧的形狀和大小的界限
        oval.set(width/2 - radius,width/2 - radius, width/2 + radius, width/2 + radius);
        //根據進度畫圓弧
        canvas.drawArc(oval,270,120,true,mPaint);
    }
}

 在佈局中如何使用

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.zhangqie.customcontrol.demo1.CircularView
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:layout_margin="2dp"
        />

    
    <com.zhangqie.customcontrol.demo1.CircularView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@color/colorPrimaryDark"
        />
</LinearLayout>

我用了兩種模式，固定大小和自適應

 

效果如圖：（自適應的默認居中了）

 

 

 

本篇主要介紹Android自定義控件的基本用法，後續中介紹如何自定義屬性。