從0到1深入淺出自定義控件的點點滴滴

小記：昨日朋友相聚，相談甚歡，半夜凌晨酒意散，渴醒，思維發(fā)散。早起，一縷陽光，一支煙，一杯清茶，一張簡桌，安靜，愜意，自由。

寫在前面

原創(chuàng)文章,轉(zhuǎn)載請保留出處！
http://www.itdecent.cn/p/e2ddf2ae2148

本篇將介紹自定義控件的點點滴滴。你將了解自定義控件的如下知識：

  • 常見的幾種自定義控件
  • 為什么要使用
  • onMeasure、onLayout、onDraw的使用場景
  • 整體書寫過程
  • 自定義屬性的作用以及怎么用
  • 個人書寫的幾個案例

常見的幾種自定義控件

  1. 組合屬性擴展控件，利用常用API給單一控件提供多種功能（如：一個帶有沉浸式的toolbar；一個帶有點擊事件的TextView；）
  2. 組合控件，控件件根據(jù)業(yè)務(wù)相互聯(lián)系，對外使用時作為一個整體的控件，達到獨立使用（如：點擊收起隱藏的可擴展TextView；上文的上下拉刷新控件-組合SwipeRefreshLayout + RecyclerView）
  3. 一些有特定顯示效果的控件（儀表盤；播放器的音頻跳動條；）

為什么要使用自定義控件

關(guān)于為什么要使用我覺得無外乎兩點：

  1. 從產(chǎn)品功能出發(fā) - 系統(tǒng)現(xiàn)有API達不到特定的效果
  2. 從代碼結(jié)構(gòu)出發(fā) - 使控件封裝組合，對外單一暴露，達到面向?qū)ο蟮男Ч?，方便維護和復(fù)用

onMeasure()、onLayout()、onDraw()的使用場景

注：上面三個方法是根據(jù)具體情況相機使用，不是必須同時使用，下面會講解每個方法是用來干什么以及怎么使用

- onMeasure（介紹其職責(zé)、你怎么去使用操作）

onMeasure - 主要負責(zé)測量控件來設(shè)置控件的大小。
普及個常識，方便理解： 比如你寫了一個textView，你需要去設(shè)置寬高，可以wrap_content，可以match_parent，也可以是具體的某個數(shù)值，當你設(shè)置完后，編譯textView時系統(tǒng)會調(diào)用onMeasure根據(jù)你所設(shè)置的值去測量控件的大小。（根據(jù)文字的大小，系統(tǒng)默認控件的內(nèi)間距） 注意這里僅僅是測量，不包括她顯示在哪個位置以及繪制（顯示）
那么你怎么去操作使用？
1 - 重寫onMeasure(int widthMeasureSpec, int heightMeasureSpec)方法。
ps：為了闡明清楚，這里做一個講解。onMeasure測量，系統(tǒng)是通過兩個方面來確定大小的：模式和大小(specMode 和specSize)。spaceMode有三個值 -- 1，當控件寬高是match_parent或者是幾dp時值為MeasureSpec.EXACTLY，代表精確；；2，當控件寬高是wrap_content時值為MeasureSpec.AT_MOST，代表控件兼容內(nèi)部內(nèi)容時，大小最大不會超過控件的父布局；；3，值為MeasureSpec.UNSPECIFIED時代表控件想有多大便有多大，不常用，一般由于滑動控件
2 - 根據(jù)參數(shù)獲取控件的寬高并設(shè)置，這里有個常用的代碼模版

    int defaultSize = 200;
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        int height = measureSize(defaultSize, heightMeasureSpec);
        int width = measureSize(defaultSize, widthMeasureSpec);
        
        //重中之重，用來根據(jù)獲取的值測量view的大小
        setMeasuredDimension(width, height);
    }

    private int measureSize(int defaultSize, int measureSpec) {
        int result = defaultSize;
        int specMode = View.MeasureSpec.getMode(measureSpec);
        int specSize = View.MeasureSpec.getSize(measureSpec);
        if (specMode == View.MeasureSpec.EXACTLY) {
            //當布局寬高是match_parent或者某一個具體的dp
            result = specSize;
            
        } else if (specMode == View.MeasureSpec.AT_MOST) {
            //當布局寬高是wrap_content，你需要一個默認的值defaultSize
            
        } else if (specMode == MeasureSpec.UNSPECIFIED) {

        }
        return result;
    }

- onLayout（介紹其職責(zé)、你怎么去使用操作）

  1. onLayout負責(zé)控件所在布局中位置。主要應(yīng)用于確定ViewGroup中子View的位置，在View給其孩子設(shè)置尺寸和位置時被調(diào)用。
  2. 怎么去使用？
    子View必須重寫onLayout(boolean, int, int, int, int)方法，并且調(diào)用各自的layout(int, int, int, int)方法。

API: onLayout(boolean changed, int left, int top, int right, int bottom);
參數(shù)講解：

1）參數(shù)changed表示view有新的尺寸或位置；
2）參數(shù)l表示相對于父view的Left位置；
3）參數(shù)t表示相對于父view的Top位置；
4）參數(shù)r表示相對于父view的Right位置；
5）參數(shù)b表示相對于父view的Bottom位置；

如下圖示：注意Y軸向下為正

坐標圖.png

2 - 一般用法：

       // 獲得所有子View個數(shù)
        int childCount = getChildCount();
        // 遍歷子View
        for (int i = 0; i < childCount; i++) {
            View childView = getChildAt(i);
            // 獲得子View的高度
            int childViewHeight = childView.getMeasuredHeight();
            // 獲得子View的寬度
            int childViewWidth = childView.getMeasuredWidth();
            // 下面這行是核心api，調(diào)用layout給每一個子View設(shè)定位置(根據(jù)ui要求而定，是一個數(shù)學(xué)運算)
            childView.layout(mLeft, height, mLeft + childViewWidth, height  + childViewHeight);
        }

- onDraw（介紹其職責(zé)、你怎么去使用操作）

  • onDraw負責(zé)控件的繪制顯示
    API : onDraw(Canvas canvas)
    Canvas中的方法很多,Canvas可以繪制的對象有：
    弧線(arcs) canvas.
    填充顏色(argb和color)
    Bitmap
    圓(circle和oval)
    點(point)
    線(line)
    矩形(Rect)
    圖片(Picture)
    圓角矩形 (RoundRect)
    文本(text)
    頂點(Vertices)
    路徑(path)
  • 如下代碼繪制圓形：
        rectPaint = new Paint();
        rectPaint.setStyle(Paint.Style.STROKE);//只描邊
        rectPaint.setStrokeWidth(barWidth);
        rectPaint.setColor(Color.parseColor("#F2935B"));

        @Override
        protected void onDraw(Canvas canvas) {
            super.onDraw(canvas);
            canvas.drawArc(mRectF, 0, 360, false, circleBgPaint);
        }

ps：invalidate()和postInvalidate()都可以調(diào)用OnDraw()，用來主動更新ui，前者是在UI線程自身中使用，而后者在非UI線程中使用。

整體書寫過程

  • 自定義控件沒有特定的書寫過程，你根據(jù)具體的產(chǎn)品和UI要求而定。有時不需要重寫onMeasure、onLayout、onDraw這三個方法（如下面demo中的自定義帶有沉浸式狀態(tài)欄的toolbar）、有時需要重寫里面的某幾個方法(如demo中的自定義動態(tài)音頻跳動條和一個帶動畫進度的圓環(huán))。但是自定義控件有一定的繪制流程，即執(zhí)行順序。
    繪制過程：
    onFinishInflate()
    onAttachedToWindow()
    onMeasure(int widthMeasureSpec, int heightMeasureSpec)
    onLayout(boolean changed, int l, int t, int r, int b)
    onDraw(Canvas canvas)
    onDetachedFromWindow()

自定義屬性的作用以及怎么用

  • 作用或者意義吧，了解這些后你就知道什么時候用以及為什么用。
  1. 作用1：擴展了系統(tǒng)沒有的屬性。舉個例子：比如你現(xiàn)在的業(yè)務(wù)場景中需要定義一個根據(jù)數(shù)值來確定圓弧角度的進度條，你需要定義進度條的顏色，寬度，開始角度等等，這時你可以自己定義控件的這些屬性。當然較真的你可能會發(fā)現(xiàn)像這些屬性都可以通過系統(tǒng)API來實現(xiàn)，沒錯，確實如此，這也是引入作用2的原因。
  2. 作用2：自定義屬性可以是你的控件變成動態(tài)可以配置的，使你的控件可以動態(tài)控制大小、寬高、速度、顏色等等等等。因為這時你的控件持有了特定意義的屬性，可以在xml配置不同屬性的值，來是你的控件“活動”起來。
    總結(jié)：最終其實是你在xml設(shè)置相關(guān)屬性的值，然后在自定義控件代碼中獲取這個屬性的值，根據(jù)這個值執(zhí)行相關(guān)的邏輯來達到你的效果
  • 怎么用？

不廢話，上代碼。

  1. 定義你需要的屬性（在res - values - attri.xml）
    <declare-styleable name="CircleBarView">
        <attr name="circle_color" format="color"></attr>
        <attr name="circle_bg_color" format="color"></attr>
        <attr name="circle_stoken_width" format="dimension"></attr>
        <attr name="start_angle" format="float"></attr>
    </declare-styleable>

ps: declare-styleable name = ***; 這代表你定義屬性的整體引用名字

  1. 設(shè)置xml中的控件屬性值
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <ui.customview.CircleBarView
        android:id="@+id/circle_bar_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:circle_bg_color="@android:color/darker_gray"
        app:circle_color="@android:color/holo_green_dark"
        app:circle_stoken_width="20dp"
        app:start_angle="90"
        />
</RelativeLayout>

這里聲明下：關(guān)于自定義屬性你需要引入命名空間，在跟布局中引入xmlns:app="http://schemas.android.com/apk/res-auto"，控件中通過命名空間app來索引定義的屬性

  1. 代碼中獲取屬性的值
    public CircleBarView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init(context, attrs);
    }

    private void init(Context context, @Nullable AttributeSet attrs) {
        //通過屬性的整體引用名字來獲取全部屬性
        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.CircleBarView);
        //參數(shù)1-xml中的相應(yīng)屬性的值，參數(shù)2-獲取不到時默認顯示的值
        int circleBgColor = typedArray.getColor(R.styleable.CircleBarView_circle_bg_color, Color.GRAY);
        int circleColor = typedArray.getColor(R.styleable.CircleBarView_circle_color, Color.GREEN);
        barWidth = typedArray.getDimension(R.styleable.CircleBarView_circle_stoken_width, px2dip(context, 10));
        startAngle = typedArray.getFloat(R.styleable.CircleBarView_start_angle, 0);
        //記著回收
        typedArray.recycle();
    }

通過以上三步實現(xiàn)定義屬性和取值過程，最終其實是你在xml設(shè)置相關(guān)屬性的值，然后在自定義控件代碼中獲取這個屬性的值，根據(jù)這個值執(zhí)行相關(guān)的邏輯來達到你的效果

注：屬性的取值類型（attr中的format）有如下幾種
     1.reference:參考指定Theme中資源ID,這個類型意思就是你傳的值可以是引用資源
     2.string:字符串,如果你想別人既能直接寫值也可以用類似"@string/test"引用資源的方式,可以寫成format="string|reference"
     3.Color：顏色
     4.boolean：布爾值
     5.dimension：尺寸值
     6.float：浮點型
     7.integer：整型
     8.fraction：百分數(shù)
     9.enum：枚舉 ,如果你提供的屬性只能讓別人選擇,不能隨便傳入,就可以寫成這樣
        <attr name="language">
              <enum name="china" value="1"/>
              <enum name="English" value="2"/>
        </attr>
     10.flag：位或運算

個人書寫的幾個案例

ps: demo中一直添添加加，里面包括的東西也略微繁雜，但是也簡單根據(jù)功能分包了。包括了線程中斷，應(yīng)用重啟，動靜態(tài)代理，沉浸式和自定義控件三個，如果只看本文相關(guān)案例，請移步項目中的ui包下，里面注釋詳細
項目源碼demo地址，如有幫助請star，本demo長期更新

悶騷代碼男，碼字不易，請?zhí)鹉愕男∈?，點個贊唄～

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容