AutoFlowLayout:多功能流式布局與網(wǎng)格布局控件

近期工作需要用到流式布局，網(wǎng)上也有很多關(guān)于這方面的資料。發(fā)現(xiàn)流式布局與網(wǎng)格布局的自定義很有意思，是學(xué)習(xí)自定義控件的一個很好的方式，所以就擼了個幾百行代碼的控件，既實(shí)用又具有學(xué)習(xí)價值。

一、AutoFlowLayout應(yīng)用場景

流式布局，在很多標(biāo)簽類的場景中可以用的；而網(wǎng)格布局在分類中以及自拍九宮格等場景很常見。如下所示：



如此使用頻繁而又實(shí)現(xiàn)簡單的控件，怎能不自己擼一個呢？控件，還是定制的好啊。

二、AutoFlowLayout實(shí)現(xiàn)效果

先介紹下自己擼的這個控件的功能及效果。

1.功能

流式布局

  • 自動換行
  • 行數(shù)自定：單行/多行
  • 支持單選/多選
  • 支持行居中/靠左顯示
  • 支持添加/刪除子View
  • 支持子View點(diǎn)擊/長按事件

網(wǎng)格布局

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

2.效果

下面以gif圖的形式展現(xiàn)下實(shí)現(xiàn)的效果，樣式簡單了些，不過依然能展示出這個簡單控件的多功能實(shí)用性。
流式布局



網(wǎng)格布局

最后一個是帶間隔以及分割線的，由于錄屏原因，只在跳過去的一瞬間顯示了粉紅色的一條線。真實(shí)如下圖所示，可以定義橫豎間距的大小，以及分割線的顏色，寬度。

Github地址：AutoFlowLayout

三、AutoFlowLayout使用

1.添加依賴

①.在項(xiàng)目的 build.gradle 文件中添加

allprojects {
        repositories {
            ...
            maven { url 'https://jitpack.io' }
        }
    }

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

dependencies {
            compile 'com.github.LRH1993:AutoFlowLayout:1.0.5'
    }

2.屬性說明

下表是自定義的屬性說明，可在xml中聲明，同時有對應(yīng)的get/set方法，可在代碼中動態(tài)添加。


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>

代碼設(shè)置數(shù)據(jù)

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使用方式一樣，實(shí)現(xiàn)FlowAdapter即可。

四、AutoFlowLayout原理

ViewGroup的測量、布局及繪制順序如下所示：


詳細(xì)的自定義View原理參考：圖解View測量、布局及繪制原理

下面具體介紹自定義實(shí)現(xiàn)網(wǎng)格布局的過程。

1.重寫generateLayoutParams()方法

因?yàn)槲覀円趏nMeasure以及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) {
        // 獲得它的父容器為它設(shè)置的測量模式和大小
        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;
        //未設(shè)置行數(shù) 推測行數(shù)
        if (mRowNumbers == 0) {
            mRowNumbers = getChildCount()%mColumnNumbers == 0 ?
                    getChildCount()/mColumnNumbers : (getChildCount()/mColumnNumbers + 1);
        }
        int maxChildHeight = 0;
        int maxWidth = 0;
        int maxHeight = 0;
        int maxLineWidth = 0;
        //統(tǒng)計(jì)最大高度/最大寬度
        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;
        }
        //寬高超過屏幕大小，則進(jìn)行壓縮存放
        if (tempHeight > sizeHeight) {
            heightResult = sizeHeight;
        } else {
            heightResult = tempHeight;
        }
        setMeasuredDimension((modeWidth == MeasureSpec.EXACTLY) ? sizeWidth
                : widthResult, (modeHeight == MeasureSpec.EXACTLY) ? sizeHeight
                : heightResult);
    }

3.onLayout過程

網(wǎng)格布局默認(rèn)所有子View的寬高一致，先推算出每個子View的平均寬高，然后逐個推算每個子View的left,top,right,bottom位置，調(diào)用child.layout()進(jìn)行子View布局。

private void setGridLayout() {
        mCheckedViews.clear();
        mCurrentItemIndex = -1;
        int sizeWidth = getWidth();
        int sizeHeight = getHeight();
        //子View的平均寬高 默認(rèn)所有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進(jìn)行繪制分割線。所以重寫dispatchDraw()方法。因?yàn)椴恍枰獙ψ约哼M(jìn)行繪制，所以不需要重寫onDraw()方法。
需要額外注意下，繪制過程中，考慮橫豎間距的大小，這種情況下默認(rèn)不考慮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);
                            }

                        }

                    }
                }
            }

        }
    }

繪制流式標(biāo)簽的過程類似，一樣的簡單。不過通過實(shí)現(xiàn)的過程，確實(shí)加深了對自定義ViewGroup的理解。

Github地址:https://github.com/LRH1993/AutoFlowLayout
點(diǎn)個star，一起來學(xué)習(xí)自定義ViewGroup吧！

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 179,001評論 25贊 709
  • 內(nèi)容抽屜菜單ListViewWebViewSwitchButton按鈕點(diǎn)贊按鈕進(jìn)度條TabLayout圖標(biāo)下拉刷新...
    皇小弟閱讀 47,149評論 22贊 665
  • 李嫵娟 周口太康 原創(chuàng)分享堅(jiān)持第10天 上星期女兒放學(xué)回到家告訴我：“媽媽，我要學(xué)習(xí)唱國歌，今天我午托班的老師...
    李嫵娟閱讀 441評論 0贊 6
  • 最近在讀《創(chuàng)京東》，講的是京東商城如何從一個中關(guān)村檔口賣光碟的小販發(fā)展成為目前國內(nèi)第四大互聯(lián)網(wǎng)公司的故事。之前由于...
    張小_強(qiáng)閱讀 5,873評論 4贊 1
  • 今天早上去打羽毛球， 沒有人陪我去，就找陌生人打。一番激戰(zhàn)之后，中場休息，對方饒有興致的問我，你是不是經(jīng)常去健身房...
    沐雪兮葉閱讀 1,504評論 20贊 28

友情鏈接更多精彩內(nèi)容