前言

flow layout， 流式佈局， 這個概念在移動端或者前端開發中很常見，特別是在多標籤的展示中， 往往起到了關鍵的作用。然而Android 官方， 並沒有為開發者提供這樣一個佈局， 於是有很多開發者自己做了這樣的工作，github上也出現了很多自定義FlowLayout。 最近， 我也實現了這樣一個FlowLayout，自己感覺可能是當前最好用的FlowLayout了（捂臉），在這裡做一下分享。
專案地址：https://github.com/lankton/android-flowlayout

展示

第一張圖， 展示向FlowLayout中不斷新增子View
第二張圖， 展示壓縮子View， 使他們儘可能充分利用空間

這張圖，截斷flowlayout到指定行數。－－20160520更新。

##基本的流式佈局功能##
在佈局檔案中使用FlowLayout即可：

<cn.lankton.flowlayout.FlowLayout
        android:id="@+id/flowlayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="10dp"
        app:lineSpacing
 
="10dp"
        android:background="#F0F0F0">

</cn.lankton.flowlayout.FlowLayout>

可以看到， 提供了一個自定義引數lineSpacing， 來控制行與行之間的間距。

壓縮

flowLayout.relayoutToCompress();

壓縮的方式， 是通過對子View重新排序， 使得它們能夠更合理的擠佔空間， 後面會做詳細說明。

對齊

flowLayout.relayoutToAlign();

對齊， 不會改變子View的順序， 也不會起到壓縮的作用。

截斷

flowLayout.specifyLines(int
 
)

實現

流式佈局的實現

重寫generateLayoutParams方法

@Override
protected LayoutParams generateLayoutParams(LayoutParams p) {
    return new MarginLayoutParams(p);
}

@Override
public LayoutParams generateLayoutParams(AttributeSet attrs)
{
    return new MarginLayoutParams(getContext(), attrs);
}

重寫該方法的2種過載是有必要的。這樣子元素的LayoutParams就是MarginLayoutParam， 包含了margin 屬性， 正是我們需要的。

重寫onMeasure

主要有2個目的， 第一是測量每個子元素的寬高， 第二是根據子元素的測量值， 設定的FlowLayout的測量值。

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    int mPaddingLeft = getPaddingLeft();
    int mPaddingRight = getPaddingRight();
    int mPaddingTop = getPaddingTop();
    int mPaddingBottom = getPaddingBottom();

    int widthSize = MeasureSpec.getSize(widthMeasureSpec);
    int heightMode = MeasureSpec.getMode(heightMeasureSpec);
    int heightSize = MeasureSpec.getSize(heightMeasureSpec);
    int lineUsed = mPaddingLeft + mPaddingRight;
    int lineY = mPaddingTop;
    int lineHeight = 0;
    for (int i = 0; i < this.getChildCount(); i++) {
        View child = this.getChildAt(i);
        if (child.getVisibility() == GONE) {
            continue;
        }
        measureChildWithMargins(child, widthMeasureSpec, 0, heightMeasureSpec, lineY);
        MarginLayoutParams mlp = (MarginLayoutParams) child.getLayoutParams();
        int childWidth = child.getMeasuredWidth();
        int childHeight = child.getMeasuredHeight();
        int spaceWidth = mlp.leftMargin + childWidth + mlp.rightMargin;
        int spaceHeight = mlp.topMargin + childHeight + mlp.bottomMargin;
        if (lineUsed + spaceWidth > widthSize) {
            //approach the limit of width and move to next line
            lineY += lineHeight + lineSpacing;
            lineUsed = mPaddingLeft + mPaddingRight;
            lineHeight = 0;
        }
        if (spaceHeight > lineHeight) {
            lineHeight = spaceHeight;
        }
        lineUsed += spaceWidth;
    }
    setMeasuredDimension(
            widthSize,
            heightMode == MeasureSpec.EXACTLY ? heightSize : lineY + lineHeight + mPaddingBottom
    );
}

程式碼邏輯很簡單， 就是遍歷子元素， 計算累計長度， 超過一行可容納寬度， 就將累計長度清0，同時假設繼續向下一行放置子元素。為什麼是假設呢， 因為真正在FlowLayout中放置子元素的過程， 是在onLayout方法中的。
重點在最後的setMeasuredDimension方法。在日常使用FlowLayout中， 我們的寬度往往是固定值， 或者match_parent, 不需要根據內容而改變， 所以寬度值直接用widthSize， 即從傳進來的測量值獲得的寬度。
高度則根據MeasureSpec的mode來判斷， EXACTLY意味著和寬度一樣， 直接用測量值的寬度即可， 否則，則是wrap_content， 需要用子元素排布出來的高度進行判斷。

重寫onLayout

@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
    int mPaddingLeft = getPaddingLeft();
    int mPaddingRight = getPaddingRight();
    int mPaddingTop = getPaddingTop();

    int lineX = mPaddingLeft;
    int lineY = mPaddingTop;
    int lineWidth = r - l;
    usefulWidth = lineWidth - mPaddingLeft - mPaddingRight;
    int lineUsed = mPaddingLeft + mPaddingRight;
    int lineHeight = 0;
    for (int i = 0; i < this.getChildCount(); i++) {
        View child = this.getChildAt(i);
        if (child.getVisibility() == GONE) {
            continue;
        }
        MarginLayoutParams mlp = (MarginLayoutParams) child.getLayoutParams();
        int childWidth = child.getMeasuredWidth();
        int childHeight = child.getMeasuredHeight();
        int spaceWidth = mlp.leftMargin + childWidth + mlp.rightMargin;
        int spaceHeight = mlp.topMargin + childHeight + mlp.bottomMargin;
        if (lineUsed + spaceWidth > lineWidth) {
            //approach the limit of width and move to next line
            lineY += lineHeight + lineSpacing;
            lineUsed = mPaddingLeft + mPaddingRight;
            lineX = mPaddingLeft;
            lineHeight = 0;
        }
        child.layout(lineX + mlp.leftMargin, lineY + mlp.topMargin, lineX + mlp.leftMargin + childWidth, lineY + mlp.topMargin + childHeight);
        if (spaceHeight > lineHeight) {
            lineHeight = spaceHeight;
        }
        lineUsed += spaceWidth;
        lineX += spaceWidth;

    }
}

這段程式碼也很好理解， 逐個判斷子元素，是繼續在本行放置， 還是需要換行放置。這一步和onMeasure一樣， 基本上所有的FlowLayout都會進行重寫， 我的自然也沒什麼特別的新意， 這兩塊就不重點介紹了。下面重點介紹一下2種佈局優化的實現。

壓縮的實現

關於如何實現壓縮， 這個問題開始的確很讓我頭疼。因為我的腦子裡只有大致的概念，那就是壓縮應該是一個什麼樣的效果， 而這個模糊的概念很難轉換成具體的數學模型。沒有數學模型， 就無法用程式碼解決這個問題，簡直恨不得回到大學重學演算法。。但有一個想法是明確的， 那就是解決這個問題， 實際上就是對子元素的重新排序。
後來決定簡化思路， 用類似貪心演算法的思維解決問題，那就是：逐行解決， 每一行都爭取最大程度的佔滿。
1. 從第一行開始， 從子元素集合中，選出一部分， 使得這一部分子元素可以最大程度的佔據這一行;
2. 將這部分已經選出的從集合中拿出， 繼續對下一行執行第一步操作。
這個思路確立了， 那我們如何從集合中選出子集， 對某一行進行最大程度的佔據呢？
我們已知的條件：
1. 子元素集合
2. 每行可容納寬度
3. 每個子元素的寬度
這個時候， 腦子裡就想到了01揹包問題：
已知
1. 物品集合
2. 揹包總容量
3. 每個物品的價值
4. 每個物品的體積
求揹包包含物品的最大價值(及其方案
有朋友可能有疑問， 二者確實很像， 但不是還差著一個條件嗎？嗯 ，是的。。但是在當前狀況下，因為我們要儘可能的佔滿某一行， 那麼每個子元素的寬度就不僅僅是限制了， 也是價值所在。
這樣， 該狀況就完全和01揹包問題一致了。之後就可以用動態規劃解決問題了。 關於如何用動態規劃解決01揹包問題， 其實我也忘的差不多了， 也是在網上查著資料， 一邊回顧，一邊實現的。所以這裡我自己就不展開介紹了， 也不貼自己的程式碼了（感興趣的可以去github檢視）， 放一個連結。我感覺這個連結裡的講解對我回顧相關知識點幫助很大，有興趣的也可以看看～
揹包問題——“01揹包”詳解及實現（包含揹包中具體物品的求解）

對齊的實現

這個功能，我最早是在bilibili的ipad客戶端上看到的，如下。

當時覺得挺好看的，還想過一陣怎麼做， 但一時沒想出來。。。這次實現FlowLayout， 就順手將這種對齊樣式用自己的想法實現了一下。

public void relayoutToAlign() {
    int childCount = this.getChildCount();
    if (0 == childCount) {
        //no need to sort if flowlayout has no child view
        return;
    }
    int count = 0;
    for (int i = 0; i < childCount; i++) {
        View v = getChildAt(i);
        if (v instanceof BlankView) {
            //BlankView is just to make childs look in alignment, we should ignore them when we relayout
            continue;
        }
        count++;
    }
    View[] childs = new View[count];
    int[] spaces = new int[count];
    int n = 0;
    for (int i = 0; i < childCount; i++) {
        View v = getChildAt(i);
        if (v instanceof BlankView) {
            //BlankView is just to make childs look in alignment, we should ignore them when we relayout
            continue;
        }
        childs[n] = v;
        MarginLayoutParams mlp = (MarginLayoutParams) v.getLayoutParams();
        int childWidth = v.getMeasuredWidth();
        spaces[n] = mlp.leftMargin + childWidth + mlp.rightMargin;
        n++;
    }
    int lineTotal = 0;
    int start = 0;
    this.removeAllViews();
    for (int i = 0; i < count; i++) {
        if (lineTotal + spaces[i] > usefulWidth) {
            int blankWidth = usefulWidth - lineTotal;
            int end = i - 1;
            int blankCount = end - start;
            if (blankCount > 0) {
                int eachBlankWidth = blankWidth / blankCount;
                MarginLayoutParams lp = new MarginLayoutParams(eachBlankWidth, 0);
                for (int j = start; j < end; j++) {
                    this.addView(childs[j]);
                    BlankView blank = new BlankView(mContext);
                    this.addView(blank, lp);
                }
                this.addView(childs[end]);
                start = i;
                i --;
                lineTotal = 0;
            }
        } else {
            lineTotal += spaces[i];
        }
    }
    for (int i = start; i < count; i++) {
        this.addView(childs[i]);
    }
}

程式碼很長， 但說起來很簡單。獲得子元素列表，從頭開始， 逐一判斷哪些子元素在同一行。即每一次的start 到 end。 然後計算這些子元素裝滿一行的話， 還差多少， 設為d。則每兩個子元素之間需要補上的間距為 d / (end - start)。 如果設定間距呢， 首先我們肯定不能去更改子元素本身的性質。那麼， 就只能在兩個子元素中間補上一個寬度為d / (end - start) 的BlankView了。
至於這個BlankView是個什麼鬼， 定義如下：

class BlankView extends View {

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

你看， 根本什麼也沒做。 那我新寫一個類繼承View的意義是什麼呢？ 其實從上邊對齊的程式碼裡也能看到，這樣我們在遍歷FlowLayout的子元素時， 就可以通過 instance of BlankView 來判斷是真正需要處理、計算的子元素，還是我們後來加上的補位View了。

截斷的實現

假設要截斷為N行， 則取子元素列表中，前N行的，重新佈局。詳見github程式碼。

總結

這個專案， 肯定還是有很多需要優化的地方， 歡迎各位提出各種意見或者建議，也期待能夠被大家使用。
可以的話，也順求star～ 謝謝。

更新

釋出到JCenter-20160519

為方便使用，已將library釋出到JCenter，開發者可以使用gradle或者maven進行依賴的配置。

gradle

compile 'cn.lankton:flowlayout:1.0.1'

maven

<dependency>
  <groupId>cn.lankton</groupId>
  <artifactId>flowlayout</artifactId>
  <version>1.0.1</version>
  <type>pom</type>
</dependency>