一.什么是自定義View

自定義view可以分為三類：
1.把系統(tǒng)內(nèi)置的控件組合起來生成一個新的控件；
2.繼承系統(tǒng)現(xiàn)有的控件，然后加入新的功能；
3.自己繪制控件，繼承系統(tǒng)的View類，通過View中的回調(diào)方法實現(xiàn)繪制。
本文所說的自定義View就是第三種方式。

二.為什么使用自定義View

自定義View可以實現(xiàn)系統(tǒng)View滿足不了的需求，根據(jù)我們開發(fā)中不同的需求去實習(xí)我們自己的View。通過自定義View我們還可以實現(xiàn)一些炫酷的效果，提升產(chǎn)品的體驗。

三.自定義View的2個關(guān)鍵方法

在學(xué)習(xí)自定義View之前我們先了解幾個自定義View的函數(shù)，這樣有助于我們更好的理解自定義View。

1.前言

在介紹兩個方法之前我們先看一下MeasureSpec這個類
MeasureSpec從字面意思上理解為“測量規(guī)格”，它決定了一個View的尺寸。
MeasureSpec是View源碼中的一個靜態(tài)內(nèi)部類。
getMode(int measureSpec)和getSize(int measureSpec)方法的參數(shù)mesaureSpec是一個32位的int值，前兩位為View的測量模式值，后30位為View的測量尺寸。
getMode(int measureSpec)方法是獲取View的測量模式。
getSize(int measureSpec)方法是獲取View測量的尺寸。

源碼如下：

public static class MeasureSpec {
    //需要移動的位數(shù)
    private static final int MODE_SHIFT = 30;
    //相當(dāng)于把0x3左移30位
    private static final int MODE_MASK = 0x3 << MODE_SHIFT;
    //View的測量模式
    public static final int UNSPECIFIED = 0 << MODE_SHIFT;
    //View的測量模式
    public static final int EXACTLY = 1 << MODE_SHIFT;
    //View的測量模式
    public static final int AT_MOST = 2 << MODE_SHIFT;
    
    //把size和mode合成一個32為的int
    public static int makeMeasureSpec(int size, int mode) {
        if (sUseBrokenMakeMeasureSpec) {
            return size + mode;
        } else {
            return (size & ~MODE_MASK) | (mode & MODE_MASK);
        }
    }
    
    //獲取View的測量模式
    public static int getMode(int measureSpec) {
        return (measureSpec & MODE_MASK);
    }
    //獲取測量的尺寸
    public static int getSize(int measureSpec) {
        return (measureSpec & ~MODE_MASK);
    }

   
}

從源碼中可以看出測量模式有三種類型

測量模式跟布局時用到的wrap_content、match_parent以及固定的尺寸的對應(yīng)關(guān)系如下：
EXACTLY對應(yīng)為：match_parent和固定尺寸
AT_MOST對應(yīng)為：wrap_content

前面說了這么多，下面我們看一下onMeasure的用處吧：

2.onMeasure方法

該方法的作用是測量當(dāng)前View的在屏幕上占用的尺寸,我們看一下View中的源碼：

 protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

        //此方法是設(shè)置View的測量值     
        setMeasuredDimension(getDefaultSize(getSuggestedMinimumWidth(), widthMeasureSpec),
                getDefaultSize(getSuggestedMinimumHeight(), heightMeasureSpec));
    }```
其中```setMeasuredDimension ```方法是設(shè)置View測量的值獲取View值的方法是```getDefaultSize ``` ,我們再看一下它的源碼：
```java
public static int getDefaultSize(int size, int measureSpec) {
        int result = size;
        //獲取測量模式
        int specMode = MeasureSpec.getMode(measureSpec);
        //獲取測量尺寸
        int specSize = MeasureSpec.getSize(measureSpec);

        switch (specMode) {
            case MeasureSpec.UNSPECIFIED:
                result = size;
                break;
            //返回的大小等于測量尺寸
            case MeasureSpec.AT_MOST:
            case MeasureSpec.EXACTLY:
                result = specSize;
                break;
        }
        return result;
    }

從getDefaultSize方法中可用看出View的寬高都由specSize決定，可以得出：
在View中使用wrap_content就相當(dāng)于是使用match_parent，所以直接繼承系統(tǒng)View的類的控件需要重寫onMeasure。

2.onDraw方法

這個方法就比較好理解了，它是把已經(jīng)測量好的View畫在屏幕上，開發(fā)者根據(jù)自己的需求繪制不同的功能。

onDraw方法是通過View的draw方法調(diào)用的，分析源碼可以看出draw方法繪制過程一般分為以下幾步：

• 繪制背景 background.draw(canvas)
• 繪制自己，調(diào)用onDraw方法
• 繪制childern，調(diào)用dispatchDrae方法
• 繪制裝飾 ，onDrawScrollBars方法

源碼如下：

public void draw(Canvas canvas) {
        if (ViewDebug.TRACE_HIERARCHY) {
            ViewDebug.trace(this, ViewDebug.HierarchyTraceType.DRAW);
        }
        final int privateFlags = mPrivateFlags;
        final boolean dirtyOpaque = (privateFlags & DIRTY_MASK) == DIRTY_OPAQUE &&
                (mAttachInfo == null || !mAttachInfo.mIgnoreDirtyState);
        mPrivateFlags = (privateFlags & ~DIRTY_MASK) | DRAWN;
        // 第一步 繪制背景
        int saveCount;
        if (!dirtyOpaque) {
            final Drawable background = mBGDrawable;
            if (background != null) {
                final int scrollX = mScrollX;
                final int scrollY = mScrollY;
                if (mBackgroundSizeChanged) {
                    background.setBounds(0, 0, mRight - mLeft, mBottom - mTop);
                    mBackgroundSizeChanged = false;
                }
                if ((scrollX | scrollY) == 0) {
                    background.draw(canvas);
                } else {
                    canvas.translate(scrollX, scrollY);
                    background.draw(canvas);
                    canvas.translate(-scrollX, -scrollY);
                }
            }
        }
        final int viewFlags = mViewFlags;
        boolean horizontalEdges = (viewFlags & FADING_EDGE_HORIZONTAL) != 0;
        boolean verticalEdges = (viewFlags & FADING_EDGE_VERTICAL) != 0;
        if (!verticalEdges && !horizontalEdges) {
            //第二步  繪制自己
            if (!dirtyOpaque) onDraw(canvas);
            //第三步 繪制childern
            dispatchDraw(canvas);
            //第四步 繪制裝飾
            onDrawScrollBars(canvas);
            //以下省略...
            return;
        }
    }

下面我們就來寫一個自定義的View吧：

四.自定義View的流程

1.自定義View的屬性（非必需）
2.在View的構(gòu)造方法中獲得我們自定義的屬性（非必需）
3.重寫onMesure
4.重寫onDraw

以一個簡單的圓形視圖RoundView的控件為例吧。

第一步

給這個視圖設(shè)置個自定義的屬性，在values目錄下，創(chuàng)建一個名為attrs_round_view.xml的文件，文件內(nèi)容如下：

<resources>
    <declare-styleable name="RoundView">
        <attr name="round_color" format="boolean" />
    </declare-styleable>
</resources>

第二步

在自定義RoundView的構(gòu)造函數(shù)中獲取color屬性：

    //畫圓形的畫筆
    private Paint mPaint;

    //初始化畫筆
    private void initPaint() {
        mPaint = new Paint();
        //設(shè)置畫筆的顏色 默認(rèn)為黑色
        mPaint.setColor(mColor);
    }

    public RoundView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        //他們兩個是相同的
        //TypedArray array=context.getTheme().obtainStyledAttributes(attrs,R.styleable.RecyclerView,defStyleAttr,0);
        //獲取RoundView中的所有自定義屬性
        TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.RoundView);
        //獲取顏色的屬性
        mColor = array.getColor(R.styleable.RoundView_round_color, Color.BLACK);
        //初始化畫筆
        initPaint();
        //釋放TypedArray
        array.recycle();
    }

第三步

重寫onMeasure,計算View的布局。設(shè)置布局的默認(rèn)大小為200

    //視圖的默認(rèn)大小
    private final static int DEFAULT_SIZE = 200;

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        //獲取測量之后的寬度
        int width = measureDimension(widthMeasureSpec);
        //獲取測量之后的高度
        int height = measureDimension(heightMeasureSpec);
        //設(shè)置測量之后的大小
        setMeasuredDimension(width, height);

    }

    /**
     * 獲取計算之后的值
     * @param measureSpec
     * @return
     */
    private int measureDimension(int measureSpec) {
        //獲取測量方式
        int specMode = MeasureSpec.getMode(measureSpec);
        //獲取測量大小
        int specSize = MeasureSpec.getSize(measureSpec);
        //設(shè)置默認(rèn)大小
        int result = DEFAULT_SIZE;
        //如果是wrap_content就選取最小的值作為最后測量的大小
        if (specMode == MeasureSpec.AT_MOST) {
            result = Math.min(DEFAULT_SIZE, specSize);
            //如果是match_parent或者是固定大小就返回測量的大小
        } else if (specMode == MeasureSpec.EXACTLY) {
            result = specSize;
        }
        return result;
    }

第四步

通過onDraw方法繪制圓形，首先獲取布局中設(shè)置的padding屬性，再根據(jù)寬高計算出實際圓形的半徑，并繪制。

  

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //獲取布局的padding大小
        int paddingLeft = getPaddingLeft();
        int paddingRight = getPaddingRight();
        int paddingTop = getPaddingTop();
        int paddingBottom = getPaddingBottom();
        //通過獲取布局的寬高和padding大小計算實際的寬高
        int width = getWidth() - paddingLeft - paddingRight;
        int height = getHeight() - paddingTop - paddingBottom;
        //計算圓的半徑
        int radius = Math.min(width, height) / 2;
        //以圓形的原點坐標(biāo)，畫出圓形
        canvas.drawCircle(paddingLeft + radius, paddingTop + radius, radius, mPaint);

    }

最后的效果如下圖所示：

自定義View.png

附上：RoundVIew代碼