最近由于工作的變動，導致的博客的更新計劃有點被打亂，希望可以盡快脈動回來~
今天給大家帶來一篇自定義ViewGroup的教程，說白了，就是教大家如何自定義ViewGroup，如果你對自定義ViewGroup還不是很了解，或者正想學習如何自定義，那么你可以好好看看這篇博客。
1、概述
在寫代碼之前，我必須得問幾個問題：
1、ViewGroup的職責是啥？
ViewGroup相當于一個放置View的容器，并且我們在寫布局xml的時候，會告訴容器（凡是以layout為開頭的屬性，都是為用于告訴容器的），我們的寬度（layout_width）、高度（layout_height）、對齊方式（layout_gravity）等；當然還有margin等；于是乎，ViewGroup的職能為：給childView計算出建議的寬和高和測量模式 ；決定childView的位置；為什么只是建議的寬和高，而不是直接確定呢，別忘了childView寬和高可以設置為wrap_content，這樣只有childView才能計算出自己的寬和高。
2、View的職責是啥？
View的職責，根據測量模式和ViewGroup給出的建議的寬和高，計算出自己的寬和高；同時還有個更重要的職責是：在ViewGroup為其指定的區域內繪制自己的形態。
3、ViewGroup和LayoutParams之間的關系？
大家可以回憶一下，當在LinearLayout中寫childView的時候，可以寫layout_gravity，layout_weight屬性；在RelativeLayout中的childView有layout_centerInParent屬性，卻沒有layout_gravity，layout_weight，這是為什么呢？這是因為每個ViewGroup需要指定一個LayoutParams，用于確定支持childView支持哪些屬性，比如LinearLayout指定LinearLayout.LayoutParams等。如果大家去看LinearLayout的源碼，會發現其內部定義了LinearLayout.LayoutParams，在此類中，你可以發現weight和gravity的身影。
2、View的3種測量模式
上面提到了ViewGroup會為childView指定測量模式，下面簡單介紹下三種測量模式：
EXACTLY：表示設置了精確的值，一般當childView設置其寬、高為精確值、match_parent時，ViewGroup會將其設置為EXACTLY；
AT_MOST：表示子布局被限制在一個最大值內，一般當childView設置其寬、高為wrap_content時，ViewGroup會將其設置為AT_MOST；
UNSPECIFIED：表示子布局想要多大就多大，一般出現在AadapterView的item的heightMode中、ScrollView的childView的heightMode中；此種模式比較少見。
注：上面的每一行都有一個一般，意思上述不是絕對的，對于childView的mode的設置還會和ViewGroup的測量mode有一定的關系；當然了，這是第一篇自定義ViewGroup，而且絕大部分情況都是上面的規則，所以為了通俗易懂，暫不深入討論其他內容。
3、從API角度進行淺析
上面敘述了ViewGroup和View的職責，下面從API角度進行淺析。
View的根據ViewGroup傳人的測量值和模式，對自己寬高進行確定（onMeasure中完成），然后在onDraw中完成對自己的繪制。
ViewGroup需要給View傳入view的測量值和模式（onMeasure中完成），而且對于此ViewGroup的父布局，自己也需要在onMeasure中完成對自己寬和高的確定。此外，需要在onLayout中完成對其childView的位置的指定。
4、完整的例子
需求：我們定義一個ViewGroup，內部可以傳入0到4個childView，分別依次顯示在左上角，右上角，左下角，右下角。
1、決定該ViewGroup的LayoutParams
對于我們這個例子，我們只需要ViewGroup能夠支持margin即可，那么我們直接使用系統的MarginLayoutParams
[java]?view plaincopy
@Override?? ????public?ViewGroup.LayoutParams?generateLayoutParams(AttributeSet?attrs)?? ????{?? ????????return?new?MarginLayoutParams(getContext(),?attrs);?? ????}??
重寫父類的該方法，返回MarginLayoutParams的實例，這樣就為我們的ViewGroup指定了其LayoutParams為MarginLayoutParams。
2、onMeasure
在onMeasure中計算childView的測量值以及模式，以及設置自己的寬和高：
[java]?view plaincopy
? ? ?? ????@Override?? ????protected?void?onMeasure(int?widthMeasureSpec,?int?heightMeasureSpec)?? ????{?? ????????? ? ?? ????????int?widthMode?=?MeasureSpec.getMode(widthMeasureSpec);?? ????????int?heightMode?=?MeasureSpec.getMode(heightMeasureSpec);?? ????????int?sizeWidth?=?MeasureSpec.getSize(widthMeasureSpec);?? ????????int?sizeHeight?=?MeasureSpec.getSize(heightMeasureSpec);?? ?? ?? ?????????? ????????measureChildren(widthMeasureSpec,?heightMeasureSpec);?? ????????? ? ?? ????????int?width?=?0;?? ????????int?height?=?0;?? ?? ????????int?cCount?=?getChildCount();?? ?? ????????int?cWidth?=?0;?? ????????int?cHeight?=?0;?? ????????MarginLayoutParams?cParams?=?null;?? ?? ?????????? ????????int?lHeight?=?0;?? ?????????? ????????int?rHeight?=?0;?? ?? ?????????? ????????int?tWidth?=?0;?? ?????????? ????????int?bWidth?=?0;?? ?? ????????? ? ?? ????????for?(int?i?=?0;?i?<?cCount;?i++)?? ????????{?? ????????????View?childView?=?getChildAt(i);?? ????????????cWidth?=?childView.getMeasuredWidth();?? ????????????cHeight?=?childView.getMeasuredHeight();?? ????????????cParams?=?(MarginLayoutParams)?childView.getLayoutParams();?? ?? ?????????????? ????????????if?(i?==?0?||?i?==?1)?? ????????????{?? ????????????????tWidth?+=?cWidth?+?cParams.leftMargin?+?cParams.rightMargin;?? ????????????}?? ?? ????????????if?(i?==?2?||?i?==?3)?? ????????????{?? ????????????????bWidth?+=?cWidth?+?cParams.leftMargin?+?cParams.rightMargin;?? ????????????}?? ?? ????????????if?(i?==?0?||?i?==?2)?? ????????????{?? ????????????????lHeight?+=?cHeight?+?cParams.topMargin?+?cParams.bottomMargin;?? ????????????}?? ?? ????????????if?(i?==?1?||?i?==?3)?? ????????????{?? ????????????????rHeight?+=?cHeight?+?cParams.topMargin?+?cParams.bottomMargin;?? ????????????}?? ?? ????????}?? ?????????? ????????width?=?Math.max(tWidth,?bWidth);?? ????????height?=?Math.max(lHeight,?rHeight);?? ?? ????????? ? ? ?? ????????setMeasuredDimension((widthMode?==?MeasureSpec.EXACTLY)???sizeWidth?? ????????????????:?width,?(heightMode?==?MeasureSpec.EXACTLY)???sizeHeight?? ????????????????:?height);?? ????}??
10-14行，獲取該ViewGroup父容器為其設置的計算模式和尺寸，大多情況下，只要不是wrap_content，父容器都能正確的計算其尺寸。所以我們自己需要計算如果設置為wrap_content時的寬和高，如何計算呢？那就是通過其childView的寬和高來進行計算。
17行，通過ViewGroup的measureChildren方法為其所有的孩子設置寬和高，此行執行完成后，childView的寬和高都已經正確的計算過了
43-71行，根據childView的寬和高，以及margin，計算ViewGroup在wrap_content時的寬和高。
80-82行，如果寬高屬性值為wrap_content，則設置為43-71行中計算的值，否則為其父容器傳入的寬和高。
3、onLayout對其所有childView進行定位（設置childView的繪制區域）
[java]?view plaincopy
?? ????@Override?? ????protected?void?onLayout(boolean?changed,?int?l,?int?t,?int?r,?int?b)?? ????{?? ????????int?cCount?=?getChildCount();?? ????????int?cWidth?=?0;?? ????????int?cHeight?=?0;?? ????????MarginLayoutParams?cParams?=?null;?? ????????? ? ?? ????????for?(int?i?=?0;?i?<?cCount;?i++)?? ????????{?? ????????????View?childView?=?getChildAt(i);?? ????????????cWidth?=?childView.getMeasuredWidth();?? ????????????cHeight?=?childView.getMeasuredHeight();?? ????????????cParams?=?(MarginLayoutParams)?childView.getLayoutParams();?? ?? ????????????int?cl?=?0,?ct?=?0,?cr?=?0,?cb?=?0;?? ?? ????????????switch?(i)?? ????????????{?? ????????????case?0:?? ????????????????cl?=?cParams.leftMargin;?? ????????????????ct?=?cParams.topMargin;?? ????????????????break;?? ????????????case?1:?? ????????????????cl?=?getWidth()?-?cWidth?-?cParams.leftMargin?? ????????????????????????-?cParams.rightMargin;?? ????????????????ct?=?cParams.topMargin;?? ?? ????????????????break;?? ????????????case?2:?? ????????????????cl?=?cParams.leftMargin;?? ????????????????ct?=?getHeight()?-?cHeight?-?cParams.bottomMargin;?? ????????????????break;?? ????????????case?3:?? ????????????????cl?=?getWidth()?-?cWidth?-?cParams.leftMargin?? ????????????????????????-?cParams.rightMargin;?? ????????????????ct?=?getHeight()?-?cHeight?-?cParams.bottomMargin;?? ????????????????break;?? ?? ????????????}?? ????????????cr?=?cl?+?cWidth;?? ????????????cb?=?cHeight?+?ct;?? ????????????childView.layout(cl,?ct,?cr,?cb);?? ????????}?? ?? ????}??
代碼比較容易懂：遍歷所有的childView，根據childView的寬和高以及margin，然后分別將0，1，2，3位置的childView依次設置到左上、右上、左下、右下的位置。
如果是第一個View(index=0) ：則childView.layout(cl, ct, cr, cb); cl為childView的leftMargin , ct 為topMargin , cr 為cl+ cWidth , cb為 ct + cHeight
如果是第二個View(index=1) ：則childView.layout(cl, ct, cr, cb);?
cl為getWidth() - cWidth - cParams.leftMargin- cParams.rightMargin;
ct 為topMargin , cr 為cl+ cWidth , cb為 ct + cHeight
剩下兩個類似~
這樣就完成了，我們的ViewGroup代碼的編寫，下面我們進行測試，分別設置寬高為固定值，wrap_content，match_parent
5、測試結果
布局1：
[html]?view plaincopy
<com.example.zhy_custom_viewgroup.CustomImgContainer?xmlns:android="http://schemas.android.com/apk/res/android"?? ????xmlns:tools="http://schemas.android.com/tools"?? ????android:layout_width="200dp"?? ????android:layout_height="200dp"?? ????android:background="#AA333333"?>?? ?? ????<TextView?? ????????android:layout_width="50dp"?? ????????android:layout_height="50dp"?? ????????android:background="#FF4444"?? ????????android:gravity="center"?? ????????android:text="0"?? ????????android:textColor="#FFFFFF"?? ????????android:textSize="22sp"?? ????????android:textStyle="bold"?/>?? ?? ????<TextView?? ????????android:layout_width="50dp"?? ????????android:layout_height="50dp"?? ????????android:background="#00ff00"?? ????????android:gravity="center"?? ????????android:text="1"?? ????????android:textColor="#FFFFFF"?? ????????android:textSize="22sp"?? ????????android:textStyle="bold"?/>?? ?? ????<TextView?? ????????android:layout_width="50dp"?? ????????android:layout_height="50dp"?? ????????android:background="#ff0000"?? ????????android:gravity="center"?? ????????android:text="2"?? ????????android:textColor="#FFFFFF"?? ????????android:textSize="22sp"?? ????????android:textStyle="bold"?/>?? ?? ????<TextView?? ????????android:layout_width="50dp"?? ????????android:layout_height="50dp"?? ????????android:background="#0000ff"?? ????????android:gravity="center"?? ????????android:text="3"?? ????????android:textColor="#FFFFFF"?? ????????android:textSize="22sp"?? ????????android:textStyle="bold"?/>?? ?? </com.example.zhy_custom_viewgroup.CustomImgContainer>??
ViewGroup寬和高設置為固定值
效果圖：
布局2：
[html]?view plaincopy
<com.example.zhy_custom_viewgroup.CustomImgContainer?xmlns:android="http://schemas.android.com/apk/res/android"?? ????xmlns:tools="http://schemas.android.com/tools"?? ????android:layout_width="wrap_content"?? ????android:layout_height="wrap_content"?? ????android:background="#AA333333"?>?? ?? ????<TextView?? ????????android:layout_width="150dp"?? ????????android:layout_height="150dp"?? ????????android:background="#E5ED05"?? ????????android:gravity="center"?? ????????android:text="0"?? ????????android:textColor="#FFFFFF"?? ????????android:textSize="22sp"?? ????????android:textStyle="bold"?/>?? ?? ????<TextView?? ????????android:layout_width="50dp"?? ????????android:layout_height="50dp"?? ????????android:background="#00ff00"?? ????????android:gravity="center"?? ????????android:text="1"?? ????????android:textColor="#FFFFFF"?? ????????android:textSize="22sp"?? ????????android:textStyle="bold"?/>?? ?? ????<TextView?? ????????android:layout_width="50dp"?? ????????android:layout_height="50dp"?? ????????android:background="#ff0000"?? ????????android:gravity="center"?? ????????android:text="2"?? ????????android:textColor="#FFFFFF"?? ????????android:textSize="22sp"?? ????????android:textStyle="bold"?/>?? ?? ????<TextView?? ????????android:layout_width="50dp"?? ????????android:layout_height="50dp"?? ????????android:background="#0000ff"?? ????????android:gravity="center"?? ????????android:text="3"?? ????????android:textColor="#FFFFFF"?? ????????android:textSize="22sp"?? ????????android:textStyle="bold"?/>?? ?? </com.example.zhy_custom_viewgroup.CustomImgContainer>??
ViewGroup的寬和高設置為wrap_content
效果圖：
布局3：
[html]?view plaincopy
<com.example.zhy_custom_viewgroup.CustomImgContainer?xmlns:android="http://schemas.android.com/apk/res/android"?? ????xmlns:tools="http://schemas.android.com/tools"?? ????android:layout_width="match_parent"?? ????android:layout_height="match_parent"?? ????android:background="#AA333333"?>?? ?? ????<TextView?? ????????android:layout_width="150dp"?? ????????android:layout_height="150dp"?? ????????android:background="#E5ED05"?? ????????android:gravity="center"?? ????????android:text="0"?? ????????android:textColor="#FFFFFF"?? ????????android:textSize="22sp"?? ????????android:textStyle="bold"?/>?? ?? ????<TextView?? ????????android:layout_width="50dp"?? ????????android:layout_height="50dp"?? ????????android:background="#00ff00"?? ????????android:gravity="center"?? ????????android:text="1"?? ????????android:textColor="#FFFFFF"?? ????????android:textSize="22sp"?? ????????android:textStyle="bold"?/>?? ?? ????<TextView?? ????????android:layout_width="50dp"?? ????????android:layout_height="50dp"?? ????????android:background="#ff0000"?? ????????android:gravity="center"?? ????????android:text="2"?? ????????android:textColor="#FFFFFF"?? ????????android:textSize="22sp"?? ????????android:textStyle="bold"?/>?? ?? ????<TextView?? ????????android:layout_width="150dp"?? ????????android:layout_height="150dp"?? ????????android:background="#0000ff"?? ????????android:gravity="center"?? ????????android:text="3"?? ????????android:textColor="#FFFFFF"?? ????????android:textSize="22sp"?? ????????android:textStyle="bold"?/>?? ?? </com.example.zhy_custom_viewgroup.CustomImgContainer>??
ViewGroup的寬和高設置為match_parent
可以看到無論ViewGroup的寬和高的值如何定義，我們的需求都實現了預期的效果~~
好了，通過這篇教程，希望大家已經能夠初步掌握自定義ViewGroup的步驟，大家可以嘗試自定義ViewGroup去實現LinearLayout的效果~~
最后說明下，此為第一篇ViewGroup的教程，以后還會進一步的探討如何更好的自定義ViewGroup~~~
如果你覺得這篇文章對你有用，那么贊一個或者留個言吧~
總結
以上是生活随笔為你收集整理的Android 手把手教您自定义ViewGroup的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
