在Android應(yīng)用中有很多標(biāo)簽一樣的頁面，這些頁面是無法通過Google提供的View來完成，這個時候我們就需要自定義View來完成UI的開發(fā),我們通常叫這樣的布局叫流式布局。

流式布局其實是一個很基礎(chǔ)的自定義View,主要考察的是我們測量(onMeasure())和定位(onLayout()的相關(guān)知識).

先上效果圖

流式布局.png

開發(fā)思路:

大體思路就是通過onMeasure()測量子View的寬高,來確認(rèn)整個ViewGroup的寬度和高度,然后在判斷ViewGroup寬高是屬于哪個一個Model來進(jìn)行具體的值的設(shè)置。onMeasure()之后我們就需要給每一個子View來確定在Activity的具體位置,這個時候我們通過onLayout()來給每一個子View設(shè)置固定的坐標(biāo)地址。最后我們只需要把我們需要的標(biāo)簽用TextView來addView()進(jìn)我們的ViewGroup就完成了.

具體細(xì)節(jié):

onMeasure()：
首頁我們要獲取到ViewGroup中所有的子view,然后通過子view來確定最大行的高度,為什么這要么做呢? 因為流式布局中每一行的寬度是不規(guī)律的，我們ViewGroup只有拿到每一行最大的寬度才能保證兼容其他行的寬度。最大寬度的計算是這樣的，我們設(shè)置一個常量來記錄我們子view相加的寬度。當(dāng)我們子view相加的寬度大于我們ViewGrop的寬度時，就需要換行處理. 這個時候我們就需要把記錄子view相加的寬度的常量清空，并記錄這個子view相加的常量，留著與下一行子view相加的長度來確定來一行才是最大的一行，測量高度同理。測量完寬高，我們需要根據(jù)ViewGroup寬高不同的model做不出的處理，這個很簡單,看代碼就能理解。

 @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        //獲取子類個數(shù)
        int count = getChildCount();
        //獲取手機(jī)屏幕寬度
        int maxWidth = ((MeasureSpec.getSize(widthMeasureSpec) - getPaddingLeft() - getPaddingRight()));
        //記錄View的高度
        int contentHeight = 0;
        //記錄一行中View的寬度和
        int lineWidth = 0;
        //記錄多行中最大的寬度 做為ViewGroup的寬度
        int maxLineWidth = 0;
        //記錄一行中最高的item 高度
        int maxItemHeight = 0;
        //是否是一行的開頭
        boolean isBegin = true;

        //測量每一個子view
        for (int i = 0; i < count; i++) {
            View childView = getChildAt(i);
            measureChild(childView, widthMeasureSpec, heightMeasureSpec);

            if (!isBegin) {
                lineWidth += mWordMargin;
            } else {
                isBegin = false;
            }

            //換行
            if (lineWidth + childView.getMeasuredWidth() >= maxWidth) {
                //記錄當(dāng)前行的高度
                contentHeight += maxItemHeight + mLineMargin;
                maxItemHeight = 0;
                maxLineWidth = Math.max(maxLineWidth, lineWidth);
                lineWidth = 0;
                isBegin = true;
            }

            //上一個View與這個一View相比 保存最高的高度
            maxItemHeight = Math.max(childView.getMeasuredHeight(), maxItemHeight);
            //記錄一行中各個子View 相加起來起來的高度
            lineWidth += childView.getMeasuredWidth();
        }

        //最后View的高度
        contentHeight += maxItemHeight;
        //最后的寬度
        maxLineWidth = Math.max(maxLineWidth, lineWidth);

        setMeasuredDimension(
                measureWidth(widthMeasureSpec, maxLineWidth),
                measureHeight(heightMeasureSpec, contentHeight)

        );

    }

/**
* measureWidth 與 measureHeight 相同
*/
private int measureWidth(int widthMeasureSpec, int maxLineWidth) {
        int result = 0;
        int specMode = MeasureSpec.getMode(widthMeasureSpec);
        int specSize = MeasureSpec.getSize(widthMeasureSpec);

        //如果ViewGroup:layout_width 為Match_parent或固定值
        if (specMode == MeasureSpec.EXACTLY) {
            return specSize;
        } else {
            //如果ViewGroup:layout_height 為Warp_content
            result = maxLineWidth + getPaddingLeft() + getPaddingRight();
            if (specMode == MeasureSpec.AT_MOST) {
                result = Math.min(result, specSize);
            }
        }
        //當(dāng)如設(shè)置有minWidth的時候設(shè)置minWidth的值
        result = Math.max(result, getSuggestedMinimumWidth());

        return result;

    }

onLayout()
onLayout()中我們只需要給每一個子view設(shè)置對應(yīng)的x,y坐標(biāo)就可以。
首先我們先獲取paddingLeft(),paddingRight() 和ViewGroup寬度的值. 設(shè)置一個記錄高度的值,還是一樣，我們通過遍歷子view來獲取到每一個子view的寬高,然后通過子view 相加不大于ViewGroup的情況下 一直疊加子view之間的寬度,來判斷是否需要換行 來進(jìn)行新的位置確定. 子view的X坐標(biāo) 如果不是第一個子view的話， 我們需要加上上一個子view的寬度來獲取到當(dāng)前子view的X坐標(biāo)，y坐標(biāo)是拿子view自己的高度。當(dāng)換行之后，寬度還是和第一行一樣,但是第二行我們就需要加上第一行我們所記錄的子view中最大的高度來設(shè)置，第三行,第四行也是如此

@Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        int x = getPaddingLeft();
        int y = getPaddingTop();

        int contentWidth = ((r - l));
        int maxItemHeight = 0;

        for (int i = 0; i < getChildCount(); i++) {
            View childView = getChildAt(i);

            //需要換行
            if (x + childView.getMeasuredWidth() + getPaddingRight() > contentWidth) {
                x = getPaddingLeft();
                y += mLineMargin + maxItemHeight;
                maxItemHeight = 0;
            }

            childView.layout(x, y, x + childView.getMeasuredWidth(), y + childView.getMeasuredHeight());
            x += childView.getMeasuredWidth() + mWordMargin;
            maxItemHeight = Math.max(maxItemHeight, childView.getMeasuredHeight());

        }
    }

最后我們只需要通過addView往ViewGroup里面添加標(biāo)簽就可以實現(xiàn)流式布局了

private <T> void addLabel(T data, int position, FlowTextProvider<T> provider) {
        final TextView tags = new TextView(mContext);
        tags.setPadding(mTextPaddingLeft, mTextPaddingTop, mTextPaddingRight, mTextPaddingBottom);
        tags.setTextSize(TypedValue.COMPLEX_UNIT_PX, mTextSize);
        tags.setTextColor(mTextColor != null ? mTextColor : ColorStateList.valueOf(0xFF000000));
        //設(shè)置給label的背景(Drawable)是一個Drawable對象的拷貝，
        // 因為如果所有的標(biāo)簽都共用一個Drawable對象，會引起背景錯亂。
        tags.setBackgroundDrawable(mFlowBg.getConstantState().newDrawable());
        tags.setTag(KEY_DATA, data);
        tags.setTag(KEY_POSITION, position);
        tags.setOnClickListener(this);
        addView(tags);
        tags.setText(provider.getFlowText(tags, position, data));
    }

Demo地址

學(xué)習(xí)資料
參考地址