AutoFlowLayout：多功能流式佈局與網格佈局控件

時間 2019-11-16

標籤 autoflowlayout 多功能佈局網格控件简体版

原文原文鏈接

近期工做須要用到流式佈局，網上也有不少關於這方面的資料。發現流式佈局與網格佈局的自定義頗有意思，是學習自定義控件的一個很好的方式，因此就擼了個幾百行代碼的控件，既實用又具備學習價值。android

1、AutoFlowLayout應用場景

流式佈局，在不少標籤類的場景中能夠用的；而網格佈局在分類中以及自拍九宮格等場景很常見。以下所示：
git

如此使用頻繁而又實現簡單的控件，怎能不本身擼一個呢？控件，仍是定製的好啊。

2、AutoFlowLayout實現效果

先介紹下本身擼的這個控件的功能及效果。github

1.功能

流式佈局canvas

自動換行
行數自定：單行/多行
支持單選/多選
支持行居中/靠左顯示
支持添加/刪除子View
支持子View點擊/長按事件

網格佈局bash

行數/列數自定
支持單選/多選
支持添加/刪除子View
支持子View點擊/長按事件
支持添加多樣式分割線及橫豎間隔

2.效果

下面以gif圖的形式展示下實現的效果，樣式簡單了些，不過依然能展現出這個簡單控件的多功能實用性。
流式佈局
maven

網格佈局

最後一個是帶間隔以及分割線的，因爲錄屏緣由，只在跳過去的一瞬間顯示了粉紅色的一條線。真實以下圖所示，能夠定義橫豎間距的大小，以及分割線的顏色，寬度。

Github地址：AutoFlowLayoutide

3、AutoFlowLayout使用

1.添加依賴

①.在項目的 build.gradle 文件中添加佈局

allprojects {
        repositories {
            ...
            maven { url 'https://jitpack.io' }
        }
    }複製代碼

②.在 module 的 build.gradle 文件中添加依賴學習

dependencies {
            compile 'com.github.LRH1993:AutoFlowLayout:1.0.5'
    }複製代碼

2.屬性說明

下表是自定義的屬性說明，可在xml中聲明，同時有對應的get/set方法，可在代碼中動態添加。
gradle

3.使用示例

佈局

<?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent">
    <com.example.library.AutoFlowLayout
        android:id="@+id/afl_cotent"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>
</RelativeLayout>複製代碼

代碼設置數據

mFlowLayout.setAdapter(new FlowAdapter(Arrays.asList(mData)) {
            @Override
            public View getView(int position) {
                View item = mLayoutInflater.inflate(R.layout.special_item, null);
                TextView tvAttrTag = (TextView) item.findViewById(R.id.tv_attr_tag);
                tvAttrTag.setText(mData[position]);
                return item;
            }
        });複製代碼

與ListView,GridView使用方式同樣，實現FlowAdapter便可。

4、AutoFlowLayout原理

ViewGroup的測量、佈局及繪製順序以下所示：

詳細的自定義View原理參考：圖解View測量、佈局及繪製原理

下面具體介紹自定義實現網格佈局的過程。

1.重寫generateLayoutParams()方法

由於咱們要在onMeasure以及onLayout的過程當中，測量子View的margin，因此要重寫該方法，並返回MarginLayoutParams。

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

    @Override
    protected LayoutParams generateLayoutParams(LayoutParams p) {
        return new MarginLayoutParams(p);
    }
    @Override
    protected LayoutParams generateDefaultLayoutParams() {
        return new MarginLayoutParams(super.generateDefaultLayoutParams());
    }複製代碼

2.onMeasure過程

主要針對wrap_content狀況下，要逐行逐列的測量每一個子View的寬高，padding，margin以及橫豎間距，來得到最終ViewGroup的寬高。

private void setGridMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        // 得到它的父容器爲它設置的測量模式和大小
        int sizeWidth = MeasureSpec.getSize(widthMeasureSpec);
        int sizeHeight = MeasureSpec.getSize(heightMeasureSpec);
        int modeWidth = MeasureSpec.getMode(widthMeasureSpec);
        int modeHeight = MeasureSpec.getMode(heightMeasureSpec);
        //獲取viewgroup的padding
        int paddingLeft = getPaddingLeft();
        int paddingRight = getPaddingRight();
        int paddingTop = getPaddingTop();
        int paddingBottom = getPaddingBottom();
        //最終的寬高值
        int heightResult;
        int widthResult;
        //未設置行數 推測行數
        if (mRowNumbers == 0) {
            mRowNumbers = getChildCount()%mColumnNumbers == 0 ?
                    getChildCount()/mColumnNumbers : (getChildCount()/mColumnNumbers + 1);
        }
        int maxChildHeight = 0;
        int maxWidth = 0;
        int maxHeight = 0;
        int maxLineWidth = 0;
        //統計最大高度/最大寬度
        for (int i = 0; i <  mRowNumbers; i++) {
            for (int j = 0; j < mColumnNumbers; j++) {
                final View child = getChildAt(i * mColumnNumbers + j);
                if (child != null) {
                    if (child.getVisibility() != GONE) {
                        measureChild(child,widthMeasureSpec,heightMeasureSpec);
                        // 獲得child的lp
                        MarginLayoutParams lp = (MarginLayoutParams) child
                                .getLayoutParams();
                        maxLineWidth +=child.getMeasuredWidth()+lp.leftMargin+lp.rightMargin;
                        maxChildHeight = Math.max(maxChildHeight, child.getMeasuredHeight()+lp.topMargin+lp.bottomMargin);
                    }
                }
            }
            maxWidth = Math.max(maxLineWidth,maxWidth);
            maxLineWidth = 0;
            maxHeight += maxChildHeight;
            maxChildHeight = 0;
        }
        int tempWidth = (int) (maxWidth+mHorizontalSpace*(mColumnNumbers-1)+paddingLeft+paddingRight);
        int tempHeight = (int) (maxHeight+mVerticalSpace*(mRowNumbers-1)+paddingBottom+paddingTop);
        if (tempWidth > sizeWidth) {
            widthResult = sizeWidth;
        } else {
            widthResult = tempWidth;
        }
        //寬高超過屏幕大小，則進行壓縮存放
        if (tempHeight > sizeHeight) {
            heightResult = sizeHeight;
        } else {
            heightResult = tempHeight;
        }
        setMeasuredDimension((modeWidth == MeasureSpec.EXACTLY) ? sizeWidth
                : widthResult, (modeHeight == MeasureSpec.EXACTLY) ? sizeHeight
                : heightResult);
    }複製代碼

3.onLayout過程

網格佈局默認全部子View的寬高一致，先推算出每一個子View的平均寬高，而後逐個推算每一個子View的left,top,right,bottom位置，調用child.layout()進行子View佈局。

private void setGridLayout() {
        mCheckedViews.clear();
        mCurrentItemIndex = -1;
        int sizeWidth = getWidth();
        int sizeHeight = getHeight();
        //子View的平均寬高 默認全部View寬高一致
        View  tempChild = getChildAt(0);
        MarginLayoutParams  lp = (MarginLayoutParams) tempChild
                .getLayoutParams();
        int childAvWidth = (int) ((sizeWidth - getPaddingLeft() - getPaddingRight() - mHorizontalSpace * (mColumnNumbers-1))/mColumnNumbers)-lp.leftMargin-lp.rightMargin;
        int childAvHeight = (int) ((sizeHeight - getPaddingTop() - getPaddingBottom() - mVerticalSpace * (mRowNumbers-1))/mRowNumbers)-lp.topMargin-lp.bottomMargin;
        for (int i = 0; i < mRowNumbers; i++) {
            for (int j = 0; j < mColumnNumbers; j++) {
                final View child = getChildAt(i * mColumnNumbers + j);
                if (child != null) {
                    mCurrentItemIndex++;
                    if (child.getVisibility() != View.GONE) {
                        setChildClickOperation(child, -1);
                        int childLeft = (int) (getPaddingLeft() + j * (childAvWidth + mHorizontalSpace))+j * (lp.leftMargin + lp.rightMargin) + lp.leftMargin;
                        int childTop = (int) (getPaddingTop() + i * (childAvHeight + mVerticalSpace)) + i * (lp.topMargin + lp.bottomMargin) + lp.topMargin;
                        child.layout(childLeft, childTop, childLeft + childAvWidth, childAvHeight +childTop);
                    }
                }
            }
        }
    }複製代碼

4.dispatchDraw過程

繪製分割線得問過程，須要逐個對子View進行繪製分割線。因此重寫dispatchDraw()方法。由於不須要對本身進行繪製，因此不須要重寫onDraw()方法。
須要額外注意下，繪製過程當中，考慮橫豎間距的大小，這種狀況下默認不考慮margin。

protected void dispatchDraw(Canvas canvas) {
        super.dispatchDraw(canvas);
        if (mIsGridMode && mIsCutLine) {
            Paint linePaint = new Paint();
            linePaint.setStyle(Paint.Style.STROKE);
            linePaint.setStrokeWidth(mCutLineWidth);
            linePaint.setColor(mCutLineColor);
            for (int i = 0; i < mRowNumbers; i++) {
                for (int j = 0; j < mColumnNumbers; j++) {
                    View child = getChildAt(i * mColumnNumbers + j);
                    //最後一列
                    if (j == mColumnNumbers-1) {
                        //不是最後一行  只畫底部
                        if (i != mRowNumbers-1){
                            canvas.drawLine(child.getLeft()-mHorizontalSpace/2,child.getBottom()+mVerticalSpace/2,
                                    child.getRight(),child.getBottom()+mVerticalSpace/2,linePaint);
                        }
                    } else {
                        //最後一行 只畫右部
                        if (i ==  mRowNumbers -1) {
                            canvas.drawLine(child.getRight()+mHorizontalSpace/2, child.getTop()-mVerticalSpace/2,
                                    child.getRight()+mHorizontalSpace/2,child.getBottom(),linePaint);
                        } else {
                            //底部 右部 都畫
                            if (j == 0) {
                                canvas.drawLine(child.getLeft(),child.getBottom()+mVerticalSpace/2,
                                        child.getRight()+mHorizontalSpace/2,child.getBottom()+mVerticalSpace/2,linePaint);
                            } else {
                                canvas.drawLine(child.getLeft()-mHorizontalSpace/2,child.getBottom()+mVerticalSpace/2,
                                        child.getRight()+mHorizontalSpace/2,child.getBottom()+mVerticalSpace/2,linePaint);
                            }
                            if (i == 0) {
                                canvas.drawLine(child.getRight()+mHorizontalSpace/2, child.getTop(),
                                        child.getRight()+mHorizontalSpace/2,child.getBottom()+mVerticalSpace/2,linePaint);
                            } else {
                                canvas.drawLine(child.getRight()+mHorizontalSpace/2, child.getTop()-mVerticalSpace/2,
                                        child.getRight()+mHorizontalSpace/2,child.getBottom()+mVerticalSpace/2,linePaint);
                            }

                        }

                    }
                }
            }

        }
    }複製代碼