可自動換行的單選 RadioGroupEx

               今天要說的，并不是很複雜的，但确是很常見的。下面這個圖，就是今天的主角（可換行的RadioGroup）：

       可換行的單選效果，在大多網購的app中選擇物品可以看到。有時候，項目中可能需要，直接拿過來用，這樣就友善多了。    

       我們要實作可換行的單選效果，可以選擇這種方式：

1.繼承RadioGroup，改變RadioGroup的布局結構。

2.繼承ViewGroup，寫一個類似RadioGroup的容器，控制子View的單選；并且繼承View,寫一個類似RadioButton的子View，并重寫這個子View的onTouchEvent()，使用onDraw（）方法繪制需要的效果。

這兩種實作方法，顯然第一種是比較簡單的。在這裡，我也是介紹第一種方式。       我們繼承了RadioGroup，隻需要重寫布局方式即可，其它邏輯，都不用自己處理，卻擁有RadioGroup對外開放的功能。要重寫RadioGroup的布局效果，需要重寫的方法 onMeasure()和onLayout()  （我們需要從宏觀上了解ViewGroup的繪制流程，即先調用onMeasure()再調用onLayout()最後onDraw()，至于onDraw(),一般不再ViewGroup中重寫該方法）。   重寫的過程中，我們需要考慮到ViewGroup的padding值，和RaidoButton的margin值。  下面還是先看代碼，能夠從感官上了解大緻流程：

 最核心的類，RadioGroupEx

<span style="font-size:18px;">package com.mjc.radiogroupex;

import android.content.Context;
import android.util.AttributeSet;
import android.util.Log;
import android.view.View;
import android.widget.RadioGroup;

/**
 * Created by mjc on 2016/1/20.
 * 重新對RadioGroup進行布局，可以折行
 * 預設水準開始排布
 */
public class RadioGroupEx extends RadioGroup {
    private static final String TAG = "RadioGroupEx";

    public RadioGroupEx(Context context) {
        super(context);
    }

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

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        int widthSize = MeasureSpec.getSize(widthMeasureSpec);
        int widthMode = MeasureSpec.getMode(widthMeasureSpec);
        int heightSize = MeasureSpec.getSize(heightMeasureSpec);
        int heightMode = MeasureSpec.getMode(heightMeasureSpec);

        //調用ViewGroup的方法，測量子view
        measureChildren(widthMeasureSpec, heightMeasureSpec);

        //最大的寬
        int maxWidth = 0;
        //累計的高
        int totalHeight = 0;

        //目前這一行的累計行寬
        int lineWidth = 0;
        //目前這行的最大行高
        int maxLineHeight = 0;
        //用于記錄換行前的行寬和行高
        int oldHeight;
        int oldWidth;

        int count = getChildCount();
        //假設 widthMode和heightMode都是AT_MOST
        for (int i = 0; i < count; i++) {
            View child = getChildAt(i);
            MarginLayoutParams params = (MarginLayoutParams) child.getLayoutParams();
            //得到這一行的最高
            oldHeight = maxLineHeight;
            //目前最大寬度
            oldWidth = maxWidth;

            int deltaX = child.getMeasuredWidth() + params.leftMargin + params.rightMargin;
            if (lineWidth + deltaX + getPaddingLeft() + getPaddingRight() > widthSize) {//如果折行,height增加
                //和目前最大的寬度比較,得到最寬。不能加上目前的child的寬,是以用的是oldWidth
                maxWidth = Math.max(lineWidth, oldWidth);
                //重置寬度
                lineWidth = deltaX;
                //累加高度
                totalHeight += oldHeight;
                //重置行高,目前這個View，屬于下一行，是以目前最大行高為這個child的高度加上margin
                maxLineHeight = child.getMeasuredHeight() + params.topMargin + params.bottomMargin;
                Log.v(TAG, "maxHeight:" + totalHeight + "---" + "maxWidth:" + maxWidth);

            } else {
                //不換行，累加寬度
                lineWidth += deltaX;
                //不換行，計算行最高
                int deltaY = child.getMeasuredHeight() + params.topMargin + params.bottomMargin;
                maxLineHeight = Math.max(maxLineHeight, deltaY);
            }
            if (i == count - 1) {
                //前面沒有加上下一行的搞，如果是最後一行，還要再疊加上最後一行的最高的值
                totalHeight += maxLineHeight;
                //計算最後一行和前面的最寬的一行比較
                maxWidth = Math.max(lineWidth, oldWidth);
            }
        }

        //加上目前容器的padding值
        maxWidth += getPaddingLeft() + getPaddingRight();
        totalHeight += getPaddingTop() + getPaddingBottom();
        setMeasuredDimension(widthMode == MeasureSpec.EXACTLY ? widthSize : maxWidth,
                heightMode == MeasureSpec.EXACTLY ? heightSize : totalHeight);

    }

    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        int count = getChildCount();
        //pre為前面所有的child的相加後的位置
        int preLeft = getPaddingLeft();
        int preTop = getPaddingTop();
        //記錄每一行的最高值
        int maxHeight = 0;
        for (int i = 0; i < count; i++) {
            View child = getChildAt(i);
            MarginLayoutParams params = (MarginLayoutParams) child.getLayoutParams();
            //r-l為目前容器的寬度。如果子view的累積寬度大于容器寬度，就換行。
            if (preLeft + params.leftMargin + child.getMeasuredWidth() + params.rightMargin + getPaddingRight() > (r - l)) {
                //重置
                preLeft = getPaddingLeft();
                //要選擇child的height最大的作為設定
                preTop = preTop + maxHeight;
                maxHeight = getChildAt(i).getMeasuredHeight() + params.topMargin + params.bottomMargin;
            } else { //不換行,計算最大高度
                maxHeight = Math.max(maxHeight, child.getMeasuredHeight() + params.topMargin + params.bottomMargin);
            }
            //left坐标
            int left = preLeft + params.leftMargin;
            //top坐标
            int top = preTop + params.topMargin;
            int right = left + child.getMeasuredWidth();
            int bottom = top + child.getMeasuredHeight();
            //為子view布局
            child.layout(left, top, right, bottom);
            //計算布局結束後，preLeft的值
            preLeft += params.leftMargin + child.getMeasuredWidth() + params.rightMargin;

        }

    }


}</span>
           

        在RaidoGroupEx中，我們可以看到，主要是通過重寫onMeasure()和onLayout()的方法重新布局。其中measureChildren()，是ViewGroup提供的測量子View的方法，通過它，我們能夠很友善的測量出子View。以至于，下面計算子View的測量寬和測量高。

        measure過程：如果目前容器的布局要求的EXACTLY,那麼目前容器的寬和高就是MeasureSpec.getSize(spc)的值,即代碼中的widthSize和heightSize;   如果目前的容器布局要求是AT_MOST,那麼目前容器的寬和高依賴于子View的寬和高，但是不能超過MeasureSpec.getSize(spc)取出的值，即代碼中的widthSize和heightSize;是以我們要判斷，如果子view水準排放的寬度大于widthSize，我們就要換行，重新開始計算，但是最終的寬度，是所有行中，最寬的那個；而高度，則是每一行的最高子View的高度累加，這樣來得到目前容器的最終高度。得到最終高度後，通過setMeasureDimension()設定目前容器的寬和高。

      layout過程：首先考慮到padding值，是以起始地布局位置是getPaddingLeft()和getpaddingTop()。每布局一個子View後，需要判斷目前是否超過了布局容器的寬和高，如果沒超過，preLeft增加上新的子View的所占據的寬度嗎，然後繼續水準布局；如果超過了則換行，重置目前的preLeft,并給preTop累加上一行的最大行高。布局則是調用child.layout()方法。

      通過重寫這兩個方法，我們完成了ViewGroup的換行效果。是不是很簡單呢。

附源碼：點選打開連結

注：如果大家發現有什麼問題，請留言指教。