ScFlowLayout一款Android基于ViewGroup實現的流式布局
本文原創，轉載請注明出處。歡迎關注我的 簡書。
安利一波我寫的開發框架：MyScFrame喜歡的話就給個Star
ScFlowLayout已經加入到該框架內
場景
最近在做一個聊天功能,其中需要給對方打標簽，第一時間想到的就是流式布局，目前項目上用的是鴻洋大神的FlowLayout，功能很強大，不過我項目上只用到了展示效果，讀了大神的源碼，給了我一些靈感，這里我也寫一個FlowLayout，并且參考了一些Recycler.Adapter的做法。
參考資料
hongyangAndroid/FlowLayout
Android流式布局（FlowLayout）
自定義View、動畫
實現功能
- 使用adapter的形式綁定并處理數據
- 支持多種布局一同展示
- 支持多行,單行,指定顯示行數
- 支持Item左對齊,居中對齊,右對齊
- 支持行布局頂部對齊,居中對齊,底部對齊
- 支持選中狀態
- 支持設置行間距
- 支持設置item間距
ScFlowLayout
1.思路
使用SparseArray<LineDes> mLineDesArray;保存每行的數據,其中包括行高，行寬以及該行中包含的View的集合。
使用BaseTagFlowAdapter mAdapter;來管理數據加載，點擊事件，選中事件。
2.onMeasure（）中的業務邏輯
在onMeasure（）中
首先遍歷測量子View，將子View的頂點坐標通過view.setTag（）方法保存，同時把每行的數據保存在LineDes中，這樣寫是為了后續在onLayout（）好處理，不用重復計算。
接下來我們在調用setMeasuredDimension（）方法之前需要給出布局的寬跟高，我這邊是通過getLayoutParams().width與getLayoutParams().height來判斷布局的寬高，至于為什么要這樣寫大家可以參考這篇文章，如果想要實現指定行數的話需要遍歷每行高度，然后累加到mMeasuredHeight中。
在計算高度的時候，由于我這里實現了自定義行間距，因此實際計算高度的時候還需要加上行間距的高度。
//由于計算子view所占寬度
Map<String, Integer> compute = compute(widthSize, widthMeasureSpec, heightMeasureSpec);
mMeasuredWidth = widthSize;
mMeasuredHeight = heightSize;
if (getLayoutParams().width == ViewGroup.LayoutParams.WRAP_CONTENT) {
mMeasuredWidth = compute.get(ALL_CHILD_WIDTH);
}
if (getLayoutParams().height == ViewGroup.LayoutParams.WRAP_CONTENT) {
mMeasuredHeight = compute.get(ALL_CHILD_HEIGHT);
if (mLineDesArray.size() > 1) {
//加上行間距
mMeasuredHeight += mLineSpace * (mLineDesArray.size() - 1);
}
}
if (mMaxShowRow != 0) {
mMeasuredHeight = 0;
int lineCount = Math.min(mLineDesArray.size(), mMaxShowRow);
for (int i = 0; i < lineCount; i++) {
mMeasuredHeight += mLineDesArray.get(i).rowsMaxHeight;
}
mMeasuredHeight += getPaddingBottom();
if (lineCount > 1) {
//加上行間距
mMeasuredHeight += mLineSpace * (lineCount - 1);
}
}
Map<String, Integer> compute(int flowWidth, int widthMeasureSpec, int heightMeasureSpec)是遍歷子View的方法（整個控件都靠它了）
我們先要設置幾個參數：
int lineIndex行數
int rowsWidth當前行已占寬度
int columnHeight當前行頂部已占高度
int rowsMaxHeight當前行所有子元素的最大高度（用于換行累加高度）
LineDes lineDes保存每行數據的bean類
思路是先遍歷所有子View，然后計算出每個子View所占用的寬高，child.getMeasuredWidth()計算出來的是包含子View中的Padding參數，但是不包含Margin，所以這里實際寬高還需要加上Margin不然會導致實際大小與計算出來的不符
//遍歷去調用所有子元素的measure方法（child.getMeasuredHeight()才能獲取到值，否則為0）
measureChild(child, widthMeasureSpec, heightMeasureSpec);
//獲取元素測量寬度和高度
int measuredWidth = child.getMeasuredWidth();
int measuredHeight = child.getMeasuredHeight();
//獲取元素的margin
marginParams = (MarginLayoutParams) child.getLayoutParams();
//子元素所占寬度 = MarginLeft+ child.getMeasuredWidth+MarginRight 注意此時不能child.getWidth,因為界面沒有繪制完成，此時wdith為0
int childWidth = marginParams.leftMargin + marginParams.rightMargin + measuredWidth;
int childHeight = marginParams.topMargin + marginParams.bottomMargin + measuredHeight;
得到每個子View的寬高后就要開始計算行數以及每行所存放的View的數量了
我們之前已經有了一個rowsWidth參數，默認值是getPaddingLeft()，然后加上childWidth看是否會超過父布局的寬度，這邊還需要減去一個getPaddingRight()切記切記！，如果超了，表示這個View已經無法存放在該行，需要換行。最后使用Rect把子View的寬高賦值進去，然后保存在tag中，方便后續使用。
//該布局添加進去后會超過總寬度->換行
if (rowsWidth + childWidth > flowWidth - getPaddingRight()) {
getLineDesArray().put(lineIndex, lineDes);
lineDes = new LineDes();
lineIndex++;
//重置行寬度
rowsWidth = getPaddingLeft();
//累加上該行子元素最大高度
columnHeight += rowsMaxHeight;
//重置該行最大高度
rowsMaxHeight = childHeight;
} else {
rowsMaxHeight = Math.max(rowsMaxHeight, childHeight);
}
//累加上該行子元素寬度
rowsWidth += childWidth;
// 判斷時占的寬段時加上margin計算，設置頂點位置時不包括margin位置，
// 不然margin會不起作用，這是給View設置tag,在onlayout給子元素設置位置再遍歷取出
Rect rect = new Rect(
rowsWidth - childWidth + marginParams.leftMargin,
columnHeight + marginParams.topMargin,
rowsWidth - marginParams.rightMargin,
columnHeight + childHeight - marginParams.bottomMargin);
child.setTag(rect);
lineDes.rowsMaxHeight = rowsMaxHeight;
lineDes.rowsMaxWidth = rowsWidth;
lineDes.views.add(child);
//累加上item間距
rowsWidth += mItemSpace;
3.onLayout（）中的業務邏輯
在onLayout（）中，通過所需要實現的類型去做不同的排版
因為這里我們實現了行間上，中，下與Item間的左，中，右對齊因此，這里需要有針對行與Item做兩次處理
我們先設置一個diffvalue用于存放位移參數。
為了讓行內所有布局都居中對齊或下對齊，那么我們要先知道每行有多少個元素，以及行高與元素高度，這個時候LineDes就派上用場了，之前在onMeasure（）中我們已經計算并保存了LineDes，現在只需要遍歷LineDes即可，由于系統在繪制的時候就是使用頂部對齊，因此LINE_GRAVITY_TOP不需要做處理，我們只需要處理LINE_GRAVITY_CENTER和LINE_GRAVITY_BOTTOM即可
LINE_GRAVITY_CENTER：diffvalue = (lineDes.rowsMaxHeight - childWidth) / 2;
LINE_GRAVITY_BOTTOM：diffvalue = lineDes.rowsMaxHeight - childWidth;
再來說一下Item間的排版，同樣的TAG_GRAVITY_LEFT可以不做處理
LINE_GRAVITY_CENTER：diffvalue = (mMeasuredWidth - getPaddingRight() - lineDes.rowsMaxWidth) / 2;
LINE_GRAVITY_BOTTOM：diffvalue = mMeasuredWidth - lineDes.rowsMaxWidth - getPaddingRight();
改完重新寫入Rect中并傳入子View的layout（）中即可。
private synchronized void formatAboveLine(int lineGravity) {
int lineIndex = getLineDesArray().size();
for (int i = 0; i < lineIndex; i++) {
LineDes lineDes = getLineDesArray().get(i);
List<View> views = lineDes.views;
int viewIndex = views.size();
for (int j = 0; j < viewIndex; j++) {
View child = views.get(j);
Rect rect = (Rect) child.getTag();
int childWidth = (rect.bottom - rect.top);
//如果是當前行的高度大于了該view的高度話，此時需要重新放該view了
int diffvalue = 0;
if (childWidth < lineDes.rowsMaxHeight) {
switch (lineGravity) {
case LINE_GRAVITY_TOP:
break;
case LINE_GRAVITY_CENTER:
diffvalue = (lineDes.rowsMaxHeight - childWidth) / 2;
rect.top += diffvalue;
rect.bottom += diffvalue;
break;
case LINE_GRAVITY_BOTTOM:
diffvalue = lineDes.rowsMaxHeight - childWidth;
rect.top += diffvalue;
rect.bottom += diffvalue;
break;
default:
break;
}
}
switch (mTagGravity) {
case TAG_GRAVITY_LEFT:
break;
case TAG_GRAVITY_CENTER:
diffvalue = (mMeasuredWidth - getPaddingRight() - lineDes.rowsMaxWidth) / 2;
if (diffvalue > 0) {
rect.left += diffvalue;
rect.right += diffvalue;
}
break;
case TAG_GRAVITY_RIGHT:
diffvalue = mMeasuredWidth - lineDes.rowsMaxWidth - getPaddingRight();
rect.left += diffvalue;
rect.right += diffvalue;
break;
default:
break;
}
//加上行間距
rect.top += mLineSpace * i;
rect.bottom += mLineSpace * i;
child.layout(rect.left, rect.top, rect.right, rect.bottom);
}
}
getLineDesArray().clear();
}
適配器
參考BaseRecyclerViewAdapterHelper實現的一個Adapter與ViewHolder用于綁定相關數據，并處理點擊，選中等事件。
1.思路
使用SparseIntArray mLayoutResIds保存layoutId，實現多布局樣式。
使用SparseArray<ArrayList<Integer>> mCheckedStateViewResIds保存需要實現選中狀態的子ViewId
使用HashMap<Integer, TagView> mCheckedPosList保存選中的View，實現單選，多選等功能
2.加載布局
像RecyclerView.Adapter一樣，我們把data傳進來，然后遍歷數據，通過ViewType來判斷到底使用mLayoutResIds中的哪個布局，并且遍歷 mCheckedStateViewResIds對需要做選中狀態變更的view設置setDuplicateParentStateEnabled(true)，然后把實例出來的View傳入ViewHolder最后加載出來。
private void addNewView() {
mFlowLayout.removeAllViews();
mCheckedPosList.clear();
TagView tagViewContainer = null;
K baseViewHolder = null;
T data = null;
int viewType = DEFAULT_VIEW_TYPE;
for (int i = 0; i < getCount(); i++) {
data = getItem(i);
viewType = getDefItemViewType(data);
baseViewHolder = onCreateViewHolder(mFlowLayout, viewType, i);
tagViewContainer = new TagView(mContext);
//關鍵代碼,使得內部View可以使用TagView的狀態
if (mCheckedStateViewResIds != null) {
ArrayList<Integer> viewResId = mCheckedStateViewResIds.get(viewType, new ArrayList<Integer>());
for (Integer stateViewId : viewResId) {
View stateView = baseViewHolder.getView(stateViewId.intValue());
if (stateView != null) {
stateView.setDuplicateParentStateEnabled(true);
}
}
}
baseViewHolder.itemView.setDuplicateParentStateEnabled(true);
if (baseViewHolder.itemView.getLayoutParams() != null) {
tagViewContainer.setLayoutParams(baseViewHolder.itemView.getLayoutParams());
} else {
ViewGroup.MarginLayoutParams lp = new ViewGroup.MarginLayoutParams(
ViewGroup.LayoutParams.WRAP_CONTENT,
ViewGroup.LayoutParams.WRAP_CONTENT);
lp.setMargins(leftMargin, topMargin, rightMargin, bottomMargin);
tagViewContainer.setLayoutParams(lp);
}
ViewGroup.LayoutParams lp = new ViewGroup.LayoutParams(
ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
baseViewHolder.itemView.setLayoutParams(lp);
tagViewContainer.addView(baseViewHolder.itemView);
//處理選中與非選中邏輯
if (setDefSelected(data, i)) {
if (mSelectedMax == 1 && mCheckedPosList.size() > 0) {
int oldSelected = 0;
TagView oldTagView;
for (Map.Entry<Integer, TagView> entry : mCheckedPosList.entrySet()) {
oldSelected = entry.getKey();
oldTagView = entry.getValue();
setChildUnChecked(oldSelected, oldTagView);
}
mCheckedPosList.clear();
}
mCheckedPosList.put(i, tagViewContainer);
setChildChecked(i, tagViewContainer);
}
mFlowLayout.addView(tagViewContainer);
convert(baseViewHolder, data);
bindViewClickListener(tagViewContainer, baseViewHolder);
}
}
3.ViewHolder
ViewHolder里面只是保存一些常用數據,方便在使用的時候調用
private final SparseArray<View> views;
private final LinkedHashSet<Integer> childClickViewIds;//需要添加點擊事件的子View
private final LinkedHashSet<Integer> itemChildLongClickViewIds;//需要添加點擊事件的子View
private final HashSet<Integer> nestViews;//需要添加兩種點擊事件的子View
public final View itemView;
private BaseTagFlowAdapter adapter;
private int position = -1;
private int viewType = BaseTagFlowAdapter.DEFAULT_VIEW_TYPE;
public BaseTagFlowViewHolder(final View view) {
this.itemView = view;
this.views = new SparseArray<>();
this.childClickViewIds = new LinkedHashSet<>();
this.itemChildLongClickViewIds = new LinkedHashSet<>();
this.nestViews = new HashSet<>();
}
歡迎大家留言指出我的不足。
