android自定义流式布局解析与源码

原创 2015年11月18日 22:24:16

  今天给大家解析一下自定义流式布局的编写,以及分析一下写代码过程遇到的难点。该布局支持水平垂直方向和子view gravity选择,先看一下运行的效果,左边是垂直布局,右边是水平布局,套一个scrollview就支持滑动了

垂直布局 水平布局

说一下遇到的两个难点:

  • 自定义LayoutParams类

编写过程中需要自定义一个LayoutParams,这个LayoutParams类是要继承子父类的LayoutParams,在编码过程中需要将子view的ViewGroup.LayoutParams转成自定义的LayoutParams

    LayoutParams childLayoutParams = (LayoutParams) child.getLayoutParams();

这行代码如果没有进行处理就会报错,这时候就需要重写几个函数

    @Override
    protected boolean checkLayoutParams(ViewGroup.LayoutParams p) {
        return p instanceof LayoutParams;
    }
    @Override
    protected LayoutParams generateDefaultLayoutParams() {
        return new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
    }
    @Override
    public LayoutParams generateLayoutParams(AttributeSet attributeSet) {
        return new LayoutParams(getContext(), attributeSet);
    }
    @Override
    protected LayoutParams generateLayoutParams(ViewGroup.LayoutParams p) {
        return new LayoutParams(p);
    }

为什么需要重写这几个函数呢?我们去看看ViewGroup的源码就知道了

    private void addViewInner(View child, int index, LayoutParams params,
            boolean preventRequestLayout) {
        ....
        //注意该params为child的LayoutParams
        if (!checkLayoutParams(params)) {
            params = generateLayoutParams(params);
        }
        ....
    }

在添加每个子view的时候都会先检测该子view的params是不是该父view的LayoutParams类型,如果不是,则会调用generateLayoutParams函数将ViewGroup.LayoutParams类型转换为自定义的LayoutParams类型。而generateDefaultLayoutParams函数则是子view无layoutparmas的时候生成一个默认layoutparams。复写这四个函数之后,上面那行代码就不会出异常了。

  • 自定义attr

为了方便使用,需要自定义attr,但是attr的使用不是很熟悉,这里有个链接:
http://stackoverflow.com/questions/3441396/defining-custom-attrs
参考上面的方式,自定了自己的attr

<declare-styleable name="FlowLayout">
        <attr name="orientation" format="enum">
            <enum name="vertical" value="0"/>
            <enum name="horizontal" value="1"/>
        </attr>
        <attr name="childGravity">
            <flag name="top" value="0x30"/>
            <flag name="bottom" value="0x50"/>
            <flag name="left" value="0x03"/>
            <flag name="right" value="0x05"/>
            <flag name="center" value="0x11"/>
        </attr>
        <attr name="verticalSpacing" format="dimension"/>
        <attr name="horizontalSpacing" format="dimension"/>
    </declare-styleable>

关于gravity的使用,自己看了一下源码,具体了解了一下原理,它总共用了8位二进制来表示,前面4位用来表示y轴,后4位用来表示x轴,具体可以看Gravity类,这个类中有两个掩码HORIZONTAL_GRAVITY_MASK(00000111)和VERTICAL_GRAVITY_MASK(01110000),接着如果把所有的gravity变量都用二进制来表示,就很明了地知道这些变量与和或之后的结果是另外哪个gravity变量。
  

源码分析

最后就来直接看看代码,整个类最复杂的就是onMeasure函数了,这个函数中需要做大量的计算和处理,先贴出来代码:

FlowLayout.class类

public class FlowLayout extends ViewGroup{
    public static final int VERTICAL = 0;
    public static final int HORIZONTAL = 1;
    private final int CENTER = 1;
    private final int TOP = 2;
    private final int BOTTOM =3;
    private final int LEFT = 4;
    private final int RIGHT = 5;

    //默认间隙
    private int verticalSpacing = 10;
    private int horizontalSpacing = 10;
    //布局方向
    private int orientation = HORIZONTAL;
    //子view放置gravity
    private int childGravity = 1;

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

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

    public FlowLayout(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        getAttrValue(attrs);
    }

    private void getAttrValue(AttributeSet attrs){
        TypedArray typedArray = getContext().obtainStyledAttributes(attrs, R.styleable.FlowLayout);

        verticalSpacing = typedArray.getDimensionPixelSize(R.styleable.FlowLayout_verticalSpacing, 10);
        horizontalSpacing = typedArray.getDimensionPixelSize(R.styleable.FlowLayout_horizontalSpacing, 10);
        orientation = typedArray.getInt(R.styleable.FlowLayout_orientation, HORIZONTAL);

        int gravity = typedArray.getInt(R.styleable.FlowLayout_childGravity, Gravity.TOP);
        if (orientation == HORIZONTAL) {
            gravity = gravity & Gravity.VERTICAL_GRAVITY_MASK;
            if (gravity == Gravity.TOP)
                childGravity = TOP;
            else if (gravity == Gravity.BOTTOM)
                childGravity = BOTTOM;
            else
                childGravity = CENTER;
        }else{
            gravity = gravity & Gravity.HORIZONTAL_GRAVITY_MASK;
            if (gravity == Gravity.LEFT)
                childGravity = LEFT;
            else if (gravity == Gravity.RIGHT)
                childGravity = RIGHT;
            else
                childGravity = CENTER;
        }

        typedArray.recycle();
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        if (getChildCount() <= 0){
            super.onMeasure(widthMeasureSpec, heightMeasureSpec);
            return;
        }

        int paddingTop = getPaddingTop();
        int paddingLeft = getPaddingLeft();
        int paddingRight = getPaddingRight();
        int paddingBottom = getPaddingBottom();

        int width;
        int height;

        int childWidth;
        int childHeight;

        //该行最大子view大小
        int maxChildSize = 0;
        //剩余大小
        int lastSize;

        //水平布局,宽度固定,高度变化
        if (orientation == HORIZONTAL) {
            width = MeasureSpec.getSize(widthMeasureSpec);
            height = 0;
            lastSize = width - paddingLeft - paddingRight;

            //如果第一个子view的大小已经超过容器大小
            if (lastSize < getChildAt(0).getLayoutParams().width)
                throw new ChildSizeTooLongException("the 0 child's width too long");
        }
        //垂直布局,高度固定,宽度变化
        else{
            width = 0;
            height = MeasureSpec.getSize(heightMeasureSpec);
            lastSize = height - paddingTop - paddingBottom;

            //如果第一个子view的大小已经超过容器大小
            if (lastSize < getChildAt(0).getLayoutParams().height)
                throw new ChildSizeTooLongException("the 0 child's height too long");
        }

        //每行的第一个item的序号
        int firstItemOfLine = 0;

        //x,y坐标
        int x = paddingLeft;
        int y = paddingTop;

        int childSpec = MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED);
        for (int i = 0; i < getChildCount(); i++) {
            View child = getChildAt(i);

            LayoutParams lp = (LayoutParams) child.getLayoutParams();
            childHeight = lp.height;
            childWidth = lp.width;

            if (childHeight <= 0 || childWidth <= 0) {
                child.measure(childSpec, childSpec);
                childWidth = child.getMeasuredWidth();
                childHeight = child.getMeasuredHeight();
            }
            child.measure(MeasureSpec.makeMeasureSpec(childWidth, MeasureSpec.EXACTLY),
                    MeasureSpec.makeMeasureSpec(childHeight, MeasureSpec.EXACTLY));

            if (orientation == HORIZONTAL) {
                lastSize = lastSize - childWidth - horizontalSpacing;
            }else{
                lastSize = lastSize - childHeight - verticalSpacing;
            }

            //需要换行
            if (lastSize < 0) {
                if (orientation == HORIZONTAL) {
                    //根据gravity将上一行的子view放置在正确的位置上
                    for (int j=firstItemOfLine; j<i; j++){
                        View lineChild = getChildAt(j);
                        LayoutParams childLayoutParams = (LayoutParams) lineChild.getLayoutParams();
                        if (childGravity == TOP){
                            //默认,无需处理
                        }else if (childGravity == BOTTOM){
                            childLayoutParams.y += maxChildSize - lineChild.getMeasuredHeight();
                        }else if (childGravity == CENTER){
                            childLayoutParams.y += (maxChildSize - lineChild.getMeasuredHeight())/2;
                        }
                    }

                    //将大小重置
                    lastSize = width - paddingLeft - paddingRight - childWidth;

                    //换行之后该行的第一个view大小超过整体父view大小
                    if (lastSize < 0)
                        throw new ChildSizeTooLongException("the " + i + " child's width too long");

                    //高换行
                    height += maxChildSize + verticalSpacing;
                    //换行之后的第一行坐标
                    x = paddingLeft;
                    y += maxChildSize + verticalSpacing;
                    //将最大高度值置为这第一个view的高度
                    maxChildSize = childHeight;
                }else{
                    //根据gravity将上一行的子view放置在正确的位置上
                    for (int j=firstItemOfLine; j<i; j++){
                        View lineChild = getChildAt(j);
                        LayoutParams childLayoutParams = (LayoutParams) lineChild.getLayoutParams();
                        if (childGravity == LEFT){
                            //默认,无需处理
                        }else if (childGravity == RIGHT){
                            childLayoutParams.x += maxChildSize - lineChild.getMeasuredWidth();
                        }else if (childGravity == CENTER){
                            childLayoutParams.x += (maxChildSize - lineChild.getMeasuredWidth())/2;
                        }
                    }

                    //将大小重置
                    lastSize = height - paddingTop - paddingBottom - childHeight;

                    //换行之后该行的第一个view大小超过整体父view大小
                    if (lastSize < 0)
                        throw new ChildSizeTooLongException("the " + i + " child's height too long");

                    //宽换列
                    width += maxChildSize + horizontalSpacing;
                    //换列之后的第一列坐标
                    x += maxChildSize + horizontalSpacing;
                    y = paddingTop;
                    //将最大宽度值置为这第一个view的宽度
                    maxChildSize = childWidth;
                }

                //换行之后的第一个item序号
                firstItemOfLine= i;
            }
            //不需要换行
            else {
                if (orientation == HORIZONTAL) {
                    //计算出这一行子view中高度最大的view
                    maxChildSize = maxChildSize > childHeight ? maxChildSize : childHeight;
                }else{
                    //计算出这一列子view中宽度最大的view
                    maxChildSize = maxChildSize > childWidth ? maxChildSize : childWidth;
                }
            }
            lp.setXY(x, y);
            if (orientation == HORIZONTAL) {
                x += childWidth + horizontalSpacing;
            }else{
                y += childHeight + verticalSpacing;
            }
        }
        if (orientation == HORIZONTAL) {
            height += maxChildSize;
            height += + paddingBottom + paddingTop;
            heightMeasureSpec = MeasureSpec.makeMeasureSpec(height, MeasureSpec.EXACTLY);
            //不要忘记最后一行
            for (int i=firstItemOfLine; i<getChildCount(); i++){
                View lineChild = getChildAt(i);
                LayoutParams childLayoutParams = (LayoutParams) lineChild.getLayoutParams();
                if (childGravity == TOP){
                    //默认,无需处理
                }else if (childGravity == BOTTOM){
                    childLayoutParams.y += maxChildSize - lineChild.getMeasuredHeight();
                }else if (childGravity == CENTER){
                    childLayoutParams.y += (maxChildSize - lineChild.getMeasuredHeight())/2;
                }
            }
        }else{
            width += maxChildSize;
            width += paddingLeft + paddingRight;
            //不要忘记最后一列
            for (int i=firstItemOfLine; i<getChildCount(); i++){
                View lineChild = getChildAt(i);
                LayoutParams childLayoutParams = (LayoutParams) lineChild.getLayoutParams();
                if (childGravity == LEFT){
                    //默认,无需处理
                }else if (childGravity == RIGHT){
                    childLayoutParams.x += maxChildSize - lineChild.getMeasuredWidth();
                }else if (childGravity == CENTER){
                    childLayoutParams.x += (maxChildSize - lineChild.getMeasuredWidth())/2;
                }
            }
        }
        setMeasuredDimension(resolveSize(width, widthMeasureSpec), resolveSize(height, heightMeasureSpec));
    }
    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        final int count = getChildCount();
        for (int i = 0; i < count; i++) {
            View child = getChildAt(i);
            LayoutParams lp = (LayoutParams) child.getLayoutParams();
            child.layout(lp.x, lp.y, lp.x + child.getMeasuredWidth(), lp.y + child.getMeasuredHeight());
        }
    }
    /**
     * 设置布局方向
     * @param orientation {@link #HORIZONTAL}or{@link #VERTICAL}
     */
    public void setOrientation(int orientation){
        if (orientation!=HORIZONTAL && orientation!=VERTICAL)
            throw new IllegalArgumentException("orientation error");
        this.orientation = orientation;
        invalidate();
    }
    public int getOrientation(){
        return orientation;
    }
    @Override
    protected boolean checkLayoutParams(ViewGroup.LayoutParams p) {
        return p instanceof LayoutParams;
    }
    @Override
    protected LayoutParams generateDefaultLayoutParams() {
        return new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
    }
    @Override
    public LayoutParams generateLayoutParams(AttributeSet attributeSet) {
        return new LayoutParams(getContext(), attributeSet);
    }
    @Override
    protected LayoutParams generateLayoutParams(ViewGroup.LayoutParams p) {
        return new LayoutParams(p);
    }
    public static class LayoutParams extends ViewGroup.LayoutParams{
        public int x;
        public int y;
        public LayoutParams(ViewGroup.LayoutParams source) {
            super(source);
        }
        public LayoutParams(Context c, AttributeSet attrs) {
            super(c, attrs);
        }
        public LayoutParams(int width, int height) {
            super(width, height);
        }
        public void setXY(int x, int y){
            this.x = x;
            this.y = y;
        }
    }
    public static class ChildSizeTooLongException extends RuntimeException{
        public ChildSizeTooLongException(String message){
            super(message);
        }
    }
}

onMeasure函数第一步根据布局方向来确定整个view的宽或高,固定一个值不变,去计算另外一个值大小。第二步,循环该view所有子view,先获取子view宽和高,如果未知就让子view自己去计算宽和高;接着根据子view的大小去计算是否需要换行,垂直布局和水平布局的处理方式有些许差异;最后计算出子view的x和y轴坐标,并且赋值到该子view的layoutparams中即可。第三步,根据以上的计算结果最后统计出整个父view的大小并且调用setMeasuredDimension方法收尾即可。

onLayout函数非常简单,就是根据onMeasure函数中的计算结果x和y来布局所有子view。

问题讨论

最后还有一个问题就是

Method 'onMeasure' is too complex to analyze by data flow algorithm

由于在onMeasure函数里面的计算和处理代码有点多,导致在实际onMeasure操作时有些耗时,经测算,在HTC one m8t上面加入1000个子view,onMeasure函数会执行400ms左右,在500个以上就能明显感觉到卡顿,这个需要怎么处理,onMeasure函数我已经优化过了,留下的都是一些必要的操作,求指点~~

整体源码下载

我将代码放在了自己不才写的一个框架中:
https://github.com/zhaozepeng/Android_framework

布局类FlowLayout.class代码位于com.android.libcore_ui.widget.FlowLayout中
测试类FlowLayoutActivity.class代码位于com.android.sample.test_widget.FlowLayoutActivity中。

最后可以厚颜无耻的要一颗星么~(@^_^@)~

版权声明:转载请标明出处http://blog.csdn.net/self_study,对技术感兴趣的同鞋加群544645972一起交流 举报

相关文章推荐

太用力的人跑不远

写在前面:有阶段的自己,会用蛮力去学习一些东西,就是这东西不管是否适合目前自己的知识体系, 觉得学了之后会更牛逼就去学,但是这样的东西往往学了记不住。 学习的过程越用力反而显得越吃力, 太吃力的事情,...

Android 自定义ViewGroup 实战篇 -> 实现FlowLayout

转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/38352503 ,本文出自【张鸿洋的博客】1、概述上一篇已经基本给大家介绍了如何自...

精选:深入理解 Docker 内部原理及网络配置

网络绝对是任何系统的核心,对于容器而言也是如此。Docker 作为目前最火的轻量级容器技术,有很多令人称道的功能,如 Docker 的镜像管理。然而,Docker的网络一直以来都比较薄弱,所以我们有必要深入了解Docker的网络知识,以满足更高的网络需求。

android流式布局:FlexboxLayout用法探析(一)

FlexboxLayout是google官方开源的一个可以简单快速创建具有弹性功能的流式布局,它的目的是使用我们常见的布局模式,帮我们很好的实现UI区域的比例划分,比如三列布局,可以非常简单的实现。它...
  • tabolt
  • tabolt
  • 2016-07-01 13:56
  • 4000

Android 实现FlowLayout流式布局(类似热门标签)

今天跟大家分享一下FlowLayout,最近项目中有遇到热门标签这个样的布局(文章末尾可下载源码),如下图:一,创建FlowLayout并继承ViewGroupFlowLayout 类主要实现onMe...

Android图片加载框架最全解析(一),Glide的基本用法

现在Android上的图片加载框架非常成熟,从最早的老牌图片加载框架UniversalImageLoader,到后来Google推出的Volley,再到后来的新兴军Glide和Picasso,当然还有...

Android中常见的热门标签的流式布局的实现

一、概述: 在日常的app使用中,我们会在android 的app中看见 热门标签等自动换行的流式布局,今天,我们就来看看如何 自定义一个类似热门标签那样的流式布局吧(源码下载在下面最后给出) 类...

Unity Android平台下插件/SDK开发通用流程

本文主要面向对Android开发不甚了解的Unity开发者,介绍了基于最新的Android Studio的标准Android开发环境与项目结构的配置流程,在此基础上,开发者可以快速的进行SDK的接入与...

Android多点触控技术实战,自由地对图片进行缩放和移动

在上一篇文章中我带着大家一起实现了Android瀑布流照片墙的效果,虽然这种效果很炫很酷,但其实还只能算是一个半成品,因为照片墙中所有的图片都是只能看不能点的。因此本篇文章中,我们就来对这一功能进行完...
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)