自定義ViewGroup做標簽容器

先看一下效果吧

flow.gif

流式排列，這種應用場景還是很多的，當一行顯示不下時，再切換到下一行。這里有兩種實現(xiàn)方式：

第一種官方實現(xiàn)方式

使用谷歌新開源的FlexboxLayout，這種方式很簡單，現(xiàn)成的直接拿來用就好，如下方式引用

compile 'com.google.android:flexbox:0.1.2'

xml文件當中這樣寫

<com.google.android.flexbox.FlexboxLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:flexWrap="wrap"
    app:justifyContent="center"
    app:flexDirection="row">
    <TextView
        style="@style/tag"
        android:text="新浪微博" />
    <TextView
        style="@style/tag"
        android:text="微信公眾平臺" />
    <TextView
        style="@style/tag"
        android:text="Html5" />
    <TextView
        style="@style/tag"
        android:text="Css3" />
    <TextView
        style="@style/tag"
        android:text="JavaEE" />
</com.google.android.flexbox.FlexboxLayout>

第二種實現(xiàn)方式

使用自定義ViewGroup的方式，也是我要重點說的，因為我們可以學習到自定義的ViewGroup啊。一般來說，自定義ViewGroup的步驟就是onMeasure->onLayout->dispatchDraw這幾個方法，也就是測量，定位，繪制這幾個步驟。
這里還是借大神的話說吧

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為其指定的區(qū)域內繪制自己的形態(tài)。
3、ViewGroup和LayoutParams之間的關系？
　　大家可以回憶一下，當在LinearLayout中寫childView的時候，可以寫layout_gravity，layout_weight屬性；在RelativeLayout中的childView有l(wèi)ayout_centerInParent屬性，卻沒有l(wèi)ayout_gravity，layout_weight，這是為什么呢？這是因為每個ViewGroup需要指定一個LayoutParams，用于確定支持childView支持哪些屬性，比如LinearLayout指定LinearLayout.LayoutParams等。如果大家去看LinearLayout的源碼，會發(fā)現(xiàn)其內部定義了LinearLayout.LayoutParams，在此類中，你可以發(fā)現(xiàn)weight和gravity的身影。
2、View的3種測量模式
　　上面提到了ViewGroup會為childView指定測量模式，下面簡單介紹下三種測量模式：
EXACTLY：表示設置了精確的值，一般當childView設置其寬、高為精確值、match_parent時，ViewGroup會將其設置為EXACTLY；
AT_MOST：表示子布局被限制在一個最大值內，一般當childView設置其寬、高為wrap_content時，ViewGroup會將其設置為AT_MOST；
UNSPECIFIED：表示子布局想要多大就多大，一般出現(xiàn)在AadapterView的item的heightMode中、ScrollView的childView的heightMode中；此種模式比較少見。
注：上面的每一行都有一個一般，意思上述不是絕對的，對于childView的mode的設置還會和ViewGroup的測量mode有一定的關系；當然了，這是第一篇自定義ViewGroup，而且絕大部分情況都是上面的規(guī)則，所以為了通俗易懂，暫不深入討論其他內容。
3、從API角度進行淺析
　　上面敘述了ViewGroup和View的職責，下面從API角度進行淺析。
View的根據ViewGroup傳人的測量值和模式，對自己寬高進行確定（onMeasure中完成），然后在onDraw中完成對自己的繪制。
ViewGroup需要給View傳入view的測量值和模式（onMeasure中完成），而且對于此ViewGroup的父布局，自己也需要在onMeasure中完成對自己寬和高的確定。此外，需要在onLayout中完成對其childView的位置的指定。

下面就看實現(xiàn)方式吧，代碼是最好的老師，就算照著打一遍其實也在不知不覺中學習了

//存儲所有的子Viewprivate
 List<List<View>> allViews = new ArrayList<List<View>>();
//存儲每一行的最高值
private List<Integer> lineHeights = new ArrayList<>();
@Overrideprotected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    //獲取他得測量模式和大小
    int sizeWidth = MeasureSpec.getSize(widthMeasureSpec);
    int sizeHeight = MeasureSpec.getSize(heightMeasureSpec);
    int modeWidth = MeasureSpec.getMode(widthMeasureSpec);
    int modeHeight = MeasureSpec.getMode(heightMeasureSpec);
    //為了支持wrap_content，計算寬高
    int width = 0;
    int height = 0;
    int lineWidth = 0;
    int lineHeight = 0;
    int cCount = getChildCount();
    for (int i = 0; i < cCount; i++) {
        View child = getChildAt(i);
        measureChild(child, widthMeasureSpec, heightMeasureSpec);
        MarginLayoutParams lp = (MarginLayoutParams) child.getLayoutParams();
        int childWidth = lp.leftMargin + lp.rightMargin + child.getMeasuredWidth();
        int childHeight = lp.topMargin + lp.bottomMargin + child.getMeasuredHeight();
        //判斷是否要換行了
        if (lineWidth + childWidth > sizeWidth) {
            width = Math.max(lineWidth, childWidth);
            lineWidth = childWidth;
            height += lineHeight;
            lineHeight = childHeight;
        } else {
            lineWidth += childWidth;
            lineHeight = Math.max(lineHeight, childHeight);//每一行的高度是子view的最大值
        }
       //判斷最后一行的高度和寬度加進去
        if (i == cCount - 1) {
            width = Math.max(width, lineWidth);
            height += lineHeight;
            lineHeights.add(lineHeight);
        }
    }
    setMeasuredDimension((modeWidth == MeasureSpec.EXACTLY) ? sizeWidth : width, (modeHeight == MeasureSpec.EXACTLY) ? sizeHeight : height);
}

還有onLayout方法

@Overrideprotected void onLayout(boolean changed, int l, int t, int r, int b) {
    allViews.clear();
    lineHeights.clear();
    List<View> lineViews = new ArrayList<View>();
    int left = 0;
    int top = 0;
    int lineHeight = 0;
    int width = getWidth();
    int cCount = getChildCount();
    int lineWidth = 0;
//這里就是為了取得每一行的view，每一行的適應高度，其他方式獲得亦可
    for (int i = 0; i < cCount; i++) {
        View child = getChildAt(i);
        child.setTag(false);
        int childWidth = child.getMeasuredWidth();
        int childHeight = child.getMeasuredHeight();
        MarginLayoutParams lp = (MarginLayoutParams) child.getLayoutParams();
        if (childWidth + lp.leftMargin + lp.rightMargin + lineWidth > width) {
            lineHeights.add(lineHeight);
            allViews.add(lineViews);
            lineWidth = 0;
           lineViews = new ArrayList<View>();
        }
        lineWidth += childWidth + lp.leftMargin + lp.rightMargin;        lineHeight = Math.max(lineHeight, childHeight + lp.topMargin + lp.bottomMargin);
        lineViews.add(child);
       //處理點擊事件
        child.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                boolean tag = !(boolean) v.getTag();
                if (tag) {
 v.setBackgroundDrawable(getResources().getDrawable(R.drawable.tab_bg_select));
                } else {
                    v.setBackgroundDrawable(getResources().getDrawable(R.drawable.tab_bg));
                }
                v.setTag(tag);
            }
        });
    }
    //最后一行的標簽加進去
    lineHeights.add(lineHeight);
    allViews.add(lineViews);
    Log.e("xxx", "" + lineHeights.size() + "," + allViews.size());    int lines = allViews.size();
    //這里是為了對每一個子View根據left，top進行定位
    for (int i = 0; i < allViews.size(); i++) {
        lineViews = allViews.get(i);
        Log.e("xx", "-----" + lineViews.size());
        //遍歷每一行子View
        lineHeight = lineHeights.get(i);
        for (int j = 0; j < lineViews.size(); j++) {
            View child = lineViews.get(j);
            if (child.getVisibility() == View.GONE) {
                continue;
            }
            MarginLayoutParams lp = (MarginLayoutParams) child.getLayoutParams();
            int lc = left + lp.leftMargin;
            int tc = top + lp.topMargin;
            int rc = lc + child.getMeasuredWidth();
            int bc = tc + child.getMeasuredHeight();
            Logger.i("lines:" + lines + ",layout:" + lc + "," + tc + "," + rc + "," + bc);
            child.layout(lc, tc, rc, bc);
            left += child.getMeasuredWidth() + lp.leftMargin + lp.rightMargin;
        }
        left = 0;
        top += lineHeight;
    }
}

真正的自己寫下來，理解到每一行的操作，發(fā)現(xiàn)也沒有那么難了，對自己的自定義ViewGroup的能力也是一種提升了。

github代碼地址

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

相關閱讀更多精彩內容

友情鏈接更多精彩內容