流式佈局可以說是在各種軟體中的出場率都很高的一個佈局方式，被廣泛使用，像一些關鍵字搜尋,標籤等等的場景，更是隨處可見，今天我們就來手把手打造一個FlowLayout。
FlowLayout由於是以一個容器的身份存在的，所以其需要繼承的是ViewGroup而不是View，也就是說，我們今天所要做的，就是去自定義一個ViewGroup。
自定義ViewGroup和自定義View的套路基本都是一致的，但也有部分差異，下面，我們先來說說自定義ViewGroup的套路的幾個關鍵點：

1. 自定義屬性(這個就不說了，在之前的文章中已經說了很多次了)

2. 實現onMeasure()方法，通過測量每一個子View的寬高，來計算自身的寬高，最後達到測量自身寬高的目的。

3. 實現onLayout()方法，該方法用於按照自己的想法來擺放可見(不為GONE)的子View。

4. 實現onDraw()方法，默然情況下繼承ViewGroup是不會呼叫該方法的，如果需要繪製一些介面，可以實現dispatchDraw()方法

5. 注意點:在確定要自定義ViewGroup的時候，可以先考慮下先繼承自一些已經封裝好的ViewGroup，如LinearLayout等進行開發。

好了，下面，我們開始自定義FlowLayout
首先，自定義屬性這一塊，我們就直接忽略了，直接從onMeasure方法開始做起(判斷view.visibility != GONE,之前忘加了):

/**
     * 測量該控制元件的寬高
     * 思路:通過測量每一個子view的寬高   來得到該layout的整體寬高
     * @param
 
 widthMeasureSpec
     * @param heightMeasureSpec
     */
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        /**
         * 解決onMeasure被呼叫多次，導致在擺放子View的時候出現多次擺放的情況
         */
        mChildViews.clear();

        //獲取子View的數量
 

        int childCount = getChildCount();

        //獲取該layout的寬度   以方便控制後面TAG的擺放 和計算該Layout的高度
        int width = MeasureSpec.getSize(widthMeasureSpec);

        //初始化layout的高度
        int height = getPaddingTop() + getPaddingBottom();

        int lineWidth = getPaddingLeft();

        //初始化一個每一行的高度  計算layout的總高度時，取每一行的最高
        int maxHeight = 0;

        ArrayList<View> views = new ArrayList<>();
        mChildViews.add(views);
        //for迴圈測量子View
        for(int i = 0;i < childCount; i++){
            View childView = getChildAt(i);

            measureChild(childView,widthMeasureSpec,heightMeasureSpec);

            ViewGroup.MarginLayoutParams params = (MarginLayoutParams) childView.getLayoutParams();

            //當疊加的寬度大於該Layout的總寬度時，則換行
            if((lineWidth + childView.getMeasuredWidth() + params.leftMargin + params.rightMargin) > width){
                maxHeight = Math.max(maxHeight,childView.getMeasuredHeight() + params.topMargin + params.bottomMargin);
                height += maxHeight;
                lineWidth = getPaddingLeft() + childView.getMeasuredWidth() + params.leftMargin + params.rightMargin;
                views = new ArrayList<>();
                mChildViews.add(views);
                views.add(childView);
            }else{
                maxHeight = Math.max(maxHeight,childView.getMeasuredHeight() + params.topMargin + params.bottomMargin);
                lineWidth += childView.getMeasuredWidth() + params.leftMargin + params.rightMargin;
                views.add(childView);
            }
        }

        height += maxHeight;

        setMeasuredDimension(width,height);
    }

在計算寬度時，我們需要獲取到每個子View的margin值，但是由於ViewGroup本身是沒有LayoutParams的，所以這裡模仿了下LinearLayout的方法，來獲取MarginLayoutParams：

/**
     * 重寫ViewGroup的該方法   獲取到margin值（可以模仿LinearLayout）
     * @param attrs
     * @returnop
     */
    @Override
    public LayoutParams generateLayoutParams(AttributeSet attrs) {
        return new MarginLayoutParams(getContext(),attrs);
    }

在onMeasure方法中，當幾個子View的寬度總和大於FlowLayout的寬度時，這個時候就需要換行。其他的，註釋應該都有了!

下一步，就是實現onLayout()方法，來擺放所有的子View(判斷view.visibility != GONE,之前忘加了)

“`
/**
* 擺放子view
* @param changed
* @param l
* @param t
* @param r
* @param b
*/
@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
int maxHeight,left,right,top,bottom;
top = getPaddingTop();

    //迴圈遍歷mChildViews
    for(ArrayList<View> views : mChildViews){
        left = getPaddingLeft();
        maxHeight = 0;

        for(int i = 0;i<views.size();i++){
            View childView = views.get(i);
            ViewGroup.MarginLayoutParams marginLayoutParams = (MarginLayoutParams) childView.getLayoutParams();
            maxHeight = Math.max(maxHeight,childView.getMeasuredHeight() + marginLayoutParams.topMargin + marginLayoutParams.bottomMargin);
            left += marginLayoutParams.leftMargin;
            right = left + childView.getMeasuredWidth();
            int childTop = top + marginLayoutParams.topMargin;
            bottom = childTop + childView.getMeasuredHeight();

            childView.layout(left,childTop,right,bottom);
            left += marginLayoutParams.rightMargin + childView.getMeasuredWidth();
        }

        top += maxHeight;
    }
}

到這裡呢，基本是這個流式佈局就完成了一大半了，下面要做的，就是往這個佈局裡面扔資料，測試其是否會按照我們既定的規則擺放。

在設定資料這一步，我們使用了Adapter的設計模式。下面來看具體的步驟：
1：定義一個抽象的BaseAdapter

/**
 * Created by DELL on 2017/9/9.
 * Description :
 */

public abstract class BaseAdapter {

    //獲取view的數量
    public abstract int getCount();

    //獲取View
    public abstract View getView(int position, ViewGroup parent);

}

這邊暫時只定義了兩個方法，一個是獲取子View數量的，另外一個是獲取到每一個子View的，暫時沒有定義notifySetDataChanged等方法，這個可以根據自己的需求，給其設定一個觀察者來處理。

下一步，需要在FloawLayout中去設定Adapter達到添加布局的效果

public void setAdapter(BaseAdapter adapter){
        //當Adapter為空的時候，丟擲異常
        if(adapter == null){
            throw new NullPointerException("adapter not null");
        }

        this.mAdapter = adapter;

        int count = mAdapter.getCount();
        for(int i = 0;i<count;i++){
            View view = mAdapter.getView(i,this);
            addView(view);
        }
    }

每一個子View的佈局：

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
          android:id="@+id/item_textview"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:background="@drawable/bg_textview"
          android:padding="10dp"
          android:layout_margin="5dp"
    >
</TextView>

子view背景程式碼:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <stroke android:color="@color/colorAccent" android:width="1dp"/>
    <corners android:radius="8dp"/>

</shape>

下面，在Activity中設定Adapter，來測試下效果：

public class MainActivity extends AppCompatActivity {

    private FlowLayout mFlowLayout;
    private ArrayList<String> mStrList;
    private LayoutInflater mLayoutInflater;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initData();
        initView();
    }

    private void initData(){
        mStrList = new ArrayList<>();
        mStrList.add("JUSTH HELLO!");
        mStrList.add("JUSTH HEJUSTH HELLO!LLO!");
        mStrList.add("JUSTH LLO!");
        mStrList.add("JUSTH HEJUSTH HELLO!LLO!");
        mStrList.add("JUSTH HELLO!");
        mStrList.add("JUSTLO!");
        mStrList.add("JUSTH HELLO!");
        mStrList.add("JUSTH HEJUSTH HELLO!LLO!");
        mStrList.add("JUSTH HELO!");
        mStrList.add("JUSTH HELLO!");
    }

    private void initView() {
        mFlowLayout = (FlowLayout) findViewById(R.id.taglayout);

        mLayoutInflater = LayoutInflater.from(this);

        mFlowLayout.setAdapter(new BaseAdapter() {
            @Override
            public int getCount() {
                return mStrList.size();
            }

            @Override
            public View getView(int position, ViewGroup parent) {
                View view = mLayoutInflater.inflate(R.layout.layout_textview,parent,false);
                ((TextView)view.findViewById(R.id.item_textview)).setText(mStrList.get(position));
                return view;
            }
        });
    }
}

最後，來一波效果圖吧: