Android - 居中的FlowLayout

前言

因为需求的原因,需要去使用流式布局,但是这次我们的需求,和我之前的见到的流式布局不太一样。因为我们的是居中显示的流式布局。这时候,就得自己去自定义了。

老规矩,先看图。

这里说一下,我的实现思路: 第一种添加子View的方式:就是通过addView(view)添加 ① 这里需要自定义两个属性mChildSpacing和mRowSpacing,一个是用来控制child与child之间的间距(marginRight),一个是用来控制child的marginTop值

第二种是在xml中直接向ViewGroup中添加子View ① 直接添加子View,我们需要去设置子View的marginRight和marginTop,marginBottom也可以设置。不需要去设置marginLeft了。

既然要居中显示,就需要减去父View的paddingLeft和paddingRight值,将(剩余的宽度-该行控件的全部宽度)/2,这时候就均分了左右两边的剩余宽度了。我们就可以用父View的paddingLeft+均分后的值,就是第一个控件的初始left值。然后后面的控件依次向后排列即可。

到控件占满一行时,就需要换行了,这时候,curTop(父View paddingTop)+上一行中最大子View的高度+mRowSpacing(marginTop)得到的值就是另起一行的top值

大概就是这个思路了,下面我画了一个草图:

下面是自定义ViewGroup的全部代码和详细注释:

public class CenterFlowLayout extends ViewGroup {

    //默认item的spacing
    private static final int DEFAULT_CHILD_SPACING = 0;
    //默认item的topMargin值
    private static final int DEFAULT_ROW_SPACING = 0;
    //子View之间的间距
    private int mChildSpacing = DEFAULT_CHILD_SPACING;
    //子View的marginTop值
    private int mRowSpacing = DEFAULT_ROW_SPACING;
    //用来存储每行item所占用的宽度的总和
    private List<Integer> itemLineWidth = new ArrayList<>();
    //用来存储每行item的个数
    private List<Integer> itemLineNum = new ArrayList<>();
    //用来记录item所占用的总行数
    private int mRowTotalCount = 0;

    public CenterFlowLayout(Context context) {
        this(context, null);
    }

    public CenterFlowLayout(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public CenterFlowLayout(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);

        TypedArray typedArray = context.getTheme().obtainStyledAttributes(attrs, R.styleable.CenterFlowLayout, 0, 0);
        mChildSpacing = typedArray.getDimensionPixelSize(R.styleable.CenterFlowLayout_childSpacing, DEFAULT_CHILD_SPACING);
        mRowSpacing = typedArray.getDimensionPixelSize(R.styleable.CenterFlowLayout_rowSpacing, DEFAULT_ROW_SPACING);
        typedArray.recycle();
    }

    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        //获取父View的paddingLeft值
        int childLeft = getPaddingLeft();
        //获取父View的paddingTop值
        int childTop = getPaddingTop();
        //获取去除paddingRight之后的宽度
        int childRight = getMeasuredWidth() - getPaddingRight();
        //获取实际子View可用的宽度
        int availableWidth = childRight - childLeft;
        //子View初始时left值
        int curLeft;
        //子View初始时的top值
        int curTop = childTop;
        //单行中最大子View的高度
        int maxHeight = 0;
        //子View的高度
        int childHeight;
        //子View宽度
        int childWidth;
        //父View中子View的index
        int childIndex = 0;
        for (int j = 0; j < mRowTotalCount; j++) {
            //获取单行中子View的个数
            Integer childNum = itemLineNum.get(j);
            //初始化子View的left值
            curLeft = childLeft + (availableWidth - itemLineWidth.get(j)) / 2;
            //竖直方向上的margin值
            int verticalMargin = 0;
            for (int i = 0; i < childNum; i++) {
                //获取ViewGroup中的子View
                View child = getChildAt(childIndex++);
                //跳过可见性为GONE的子View
                if (child.getVisibility() == View.GONE) {
                    continue;
                }
                //获取子View的宽度
                childWidth = child.getMeasuredWidth();
                //获取子View的高度
                childHeight = child.getMeasuredHeight();
                //获取子View的LayoutParams
                MarginLayoutParams params = (CenterLayoutParams) child.getLayoutParams();
                int marginRight = 0, marginTop = 0, marginBottom;
                if (params instanceof MarginLayoutParams) {
                    //获取子View的marginRight值
                    marginRight = params.rightMargin;
                    //获取子View的marginTop值
                    marginTop = params.topMargin;
                    //获取子View的marginBottom值
                    marginBottom = params.bottomMargin;
                    //获取子View上下间距的和
                    if (childNum > 1 && i == 0) {
                        verticalMargin = marginTop + marginBottom;
                    }
                }
                //对子View进行布局
                child.layout(curLeft, curTop, curLeft + childWidth, curTop + childHeight);
                //找到单行中子View的最高高度
                if (maxHeight < childHeight) {
                    maxHeight = childHeight;
                }
                //叠加left值,向右一次排列
                curLeft += childWidth + mChildSpacing + marginRight;
            }
            //换行时的高度
            curTop += maxHeight + mRowSpacing + verticalMargin;
            //最大高度重置
            maxHeight = 0;
        }

    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        //将属性值重置
        itemLineNum.clear();
        itemLineWidth.clear();
        mRowTotalCount = 0;
        //获取ViewGroup的宽度
        int widthSize = MeasureSpec.getSize(widthMeasureSpec);
        //获取ViewGroup的宽度mode
        int widthMode = MeasureSpec.getMode(widthMeasureSpec);
        //获取ViewGroup的高度
        int heightSize = MeasureSpec.getSize(heightMeasureSpec);
        //获取ViewGroup的高度mode
        int heightMode = MeasureSpec.getMode(heightMeasureSpec);
        //获取ViewGroup的可用宽度
        int rowLength = widthSize - getPaddingLeft() - getPaddingRight();
        //测量的宽度
        int measuredWidth = 0;
        //测量的高度
        int measuredHeight = 0;
        //子View最大的宽度
        int maxWidth = 0;
        //子View最大的高度
        int maxHeight = 0;
        //子View的总行数
        int rowCount = 0;
        //子View的个数
        int childCount = getChildCount();
        //单行子View的宽度
        int rowWidth = 0;
        //子View宽度
        int childWidth;
        //子View高度
        int childHeight;
        //单行中子View的个数
        int childNumInRow = 0;
        //最后一行第一个子View的index
        int tempIndex = 0;
        //除最后一行外,其他单行中子View的总和
        int exceptLastRowNum = 0;
        for (int i = 0; i < childCount; i++) {
            View child = getChildAt(i);
            if (child.getVisibility() == View.GONE) {
                continue;
            }
            CenterLayoutParams params = (CenterLayoutParams) child.getLayoutParams();
            int marginRight = 0, marginTop = 0, marginBottom = 0;
            if (params instanceof MarginLayoutParams) {
                measureChildWithMargins(child, widthMeasureSpec, 0, heightMeasureSpec, measuredHeight);
                marginRight = params.rightMargin;
                marginTop = params.topMargin;
                marginBottom = params.bottomMargin;
            } else {
                measureChild(child, widthMeasureSpec, heightMeasureSpec);
            }
            //子View本身的宽度+子View之间的间距+子View的marginRight值(我这么写偷懒了,mChildSpacing和marginRight不用同时设置值)
            childWidth = child.getMeasuredWidth() + mChildSpacing + marginRight;
            //子View本身的高度+子View的marginTop值+子View的marginBottom+marginTop值(我这么写偷懒了,mRowSpacing和marginBottom + marginTop不用同时设置值)
            childHeight = child.getMeasuredHeight() + mRowSpacing + marginBottom + marginTop;
            //叠加子View的宽度
            rowWidth += childWidth;
            //取出最大的宽度
            maxWidth += Math.max(maxWidth, childWidth);
            //判断是否需要换行
            if (measuredWidth + childWidth > rowLength) {
                //循环后,就可获取,最后一行中第一个子View的index
                tempIndex = i;
                //获取单行的宽度
                rowWidth = rowWidth - childWidth - mChildSpacing - marginRight;
                //存储单行的宽度
                itemLineWidth.add(rowWidth);
                //设置下一行宽度为第一个子View的宽度
                rowWidth = childWidth;
                //行数自增
                ++rowCount;
                //保存测量的宽度
                measuredWidth = childWidth;
                //叠加子View的高度
                maxHeight += childHeight;
                //存储单行中子View的个数
                itemLineNum.add(childNumInRow);
                //叠加获取除了最后一行外,其他行子View的个数的总和
                exceptLastRowNum += childNumInRow;
                //重置子View的个数,因为已经要换行了
                childNumInRow = 1;
            } else {
                //叠加宽度
                measuredWidth += childWidth;
                //叠加单行中的子View个数
                ++childNumInRow;
                //计算出最大的高度
                maxHeight = Math.max(maxHeight, childHeight);
            }

        }
        //最后一行的宽度
        int lastRowWidth = 0;
        int singleHorizalMargin = 0;
        for (int i = tempIndex; i < childCount; i++) {
            View child = getChildAt(i);
            int horizalMargin = 0;
            CenterLayoutParams params = (CenterLayoutParams) child.getLayoutParams();
            if (params instanceof MarginLayoutParams) {
                //获取子View的marginRight
                singleHorizalMargin = horizalMargin = params.rightMargin;
            }
            //叠加最后一行中所有子View的宽度
            lastRowWidth += child.getMeasuredWidth() + mChildSpacing + horizalMargin;
        }
        //获取最后一行子View的个数
        int lastChildCount = childCount - exceptLastRowNum;
        //减去多余的marginRight或mChildSpacing,得到最终的宽度
        lastRowWidth -= mChildSpacing == 0 ? singleHorizalMargin : mChildSpacing;
        //保存最后一行的宽度值
        itemLineWidth.add(lastRowWidth);
        //保存最后一行子View的个数
        itemLineNum.add(lastChildCount);
        //子View的总行数
        mRowTotalCount = rowCount + 1;
        //子View的最大宽度+ViewGroup中的paddingLeft和paddingRight值
        maxWidth = Math.max(maxWidth, getSuggestedMinimumWidth()) + getPaddingRight() + getPaddingLeft();
        //子View的最大高度+ViewGroup中的paddingTop和paddingBottom值
        maxHeight = Math.max(maxHeight, getSuggestedMinimumHeight()) + getPaddingTop() + getPaddingBottom();
        //根据widthMode设置width值
        measuredWidth=widthMode==MeasureSpec.EXACTLY?widthSize:maxWidth;
        //根据heightMode设置height值
        measuredHeight=heightMode==MeasureSpec.EXACTLY?heightSize:maxHeight;
        //设置ViewGroup的宽高
        setMeasuredDimension(resolveSize(measuredWidth, widthMeasureSpec),
                resolveSize(measuredHeight, heightMeasureSpec));
    }

    /**
     * 设置子View的间距
     * @param childSpacing
     */
    public void setChildSpacing(int childSpacing){
        mChildSpacing=childSpacing;
        requestLayout();
    }

    /**
     * 设置子View的marginTop值
     * @param rowSpacing
     */
    public void setRowSpacing(int rowSpacing){
        mRowSpacing=rowSpacing;
        requestLayout();
    }

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

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

    /**
     * @param p
     * @return
     */
    @Override
    protected boolean checkLayoutParams(LayoutParams p) {
        return p instanceof CenterLayoutParams;
    }

    /**
     * 因为需要获取子View的margin值,所以这里需要重写一下该方法
     */
    public static class CenterLayoutParams extends MarginLayoutParams {

        public CenterLayoutParams(MarginLayoutParams source) {
            super(source);
        }

        public CenterLayoutParams(LayoutParams source) {
            super(source);
        }

        public CenterLayoutParams(Context c, AttributeSet attrs) {
            super(c, attrs);
        }

        public CenterLayoutParams(int width, int height) {
            super(width, height);
        }
    }
}

好了,具体思路和写法就这么多了,最后奉上GitHub地址,觉得还行就给个star吧?。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Android开发指南

11.粘性控件

3386
来自专栏Android知识点总结

3-AI--Activity间的数据传递

865
来自专栏Android群英传

PathMeasure之迷径追踪

741
来自专栏ml

一个程序,让你理解运算符重载操作

1 //实现运算符重载 2 #include<iostream> 3 #include<cstdio> 4 using namespace std; ...

2757
来自专栏曾大稳的博客

Android LayoutInflater.inflate()源码流程分析

  我们在根据layout文件得到View的时候都会使用LayoutInflater.from(mContext).inflate().下面我们来分析这个获取V...

661
来自专栏服务端技术杂谈

dubbo源码学习笔记----RPC

RpcContext 整个RpcContext通过ThreadLocal维持。 public class RpcContext { private sta...

2836
来自专栏向治洪

一个可以拖动的自定义Gridview代码

这个可以拖动的gridview继承于gridview,所以,用法和gridview一样, 代码如下: public class DragGridView ext...

2127
来自专栏Android常用基础

自定义View(九)-View的工作原理- View的layout()和draw()

上一节我们将View的测量流程理的差不多了,这篇我们来看下View的剩下的2大流程layout(布局)和draw(绘制)。相对测量来说,布局与绘制就简单了许多,...

872
来自专栏李蔚蓬的专栏

6.4 Android绘图技巧(Primary:四大方法&Layer)

创建一个新的Layer到“栈”中,可以使用saveLayer(), savaLayerAlpha(), 从“栈”中推出一个Layer,可以使用restore()...

772
来自专栏androidBlog

常用的自定义View例子一(流布式布局)

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/gdutxiaoxu/article/details/...

491

扫码关注云+社区