Android自定义流式布局/自动换行布局

最近，Google开源了一个流式排版库“FlexboxLayout”，功能强大，支持多种排版方式，如各种方向的自动换行等，具体资料各位可搜索学习^_^。

由于我的项目中，只需要从左到右S型的自动换行，需求效果图如下：

使用FlexboxLayout这个框架未免显得有些臃肿，所以自己动手写了一个流式ViewGroup。

安卓中自定义ViewGroup的步骤是：

1. 新建一个类，继承ViewGroup
2. 重写构造方法
3. 重写onMeasure、onLayout方法

onMeasuer方法里一般写测量子View宽高、确定此控件宽高的代码；onLayout方法则是确定子View如何摆放（排版）。

代码如下：

    import android.content.Context;    import android.util.AttributeSet;    import android.view.View;    import android.view.ViewGroup;    public class FlexBoxLayout extends ViewGroup {        private int mScreenWidth;        private int horizontalSpace, verticalSpace;        private float mDensity;//设备密度，用于将dp转为px        public FlexBoxLayout(Context context) {            this(context, null);        }        public FlexBoxLayout(Context context, AttributeSet attrs) {            super(context, attrs);            //获取屏幕宽高、设备密度            mScreenWidth = context.getResources().getDisplayMetrics().widthPixels;            mDensity = context.getResources().getDisplayMetrics().density;        }       @Override       protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {            super.onMeasure(widthMeasureSpec, heightMeasureSpec);            //确定此容器的宽高            int widthMode = MeasureSpec.getMode(widthMeasureSpec);            int widthSize = MeasureSpec.getSize(widthMeasureSpec);            int heightMode = MeasureSpec.getMode(heightMeasureSpec);            int heightSize = MeasureSpec.getSize(heightMeasureSpec);            //测量子View的宽高            int childCount = getChildCount();            View child = null;            //子view摆放的起始位置            int left = getPaddingLeft();            //一行view中将最大的高度存于此变量，用于子view进行换行时高度的计算            int maxHeightInLine = 0;            //存储所有行的高度相加，用于确定此容器的高度            int allHeight = 0;            for (int i = 0; i < childCount; i++) {                child = getChildAt(i);                //测量子View宽高                measureChild(child, widthMeasureSpec, heightMeasureSpec);                //两两对比，取得一行中最大的高度                if (child.getMeasuredHeight() + child.getPaddingTop() + child.getPaddingBottom() > maxHeightInLine) {                    maxHeightInLine = child.getMeasuredHeight() + child.getPaddingTop() + child.getPaddingBottom();                }                left += child.getMeasuredWidth() + dip2px(horizontalSpace) + child.getPaddingLeft() + child.getPaddingRight();                if (left >= widthSize - getPaddingRight() - getPaddingLeft()) {//换行                    left = getPaddingLeft();                    //累积行的总高度                    allHeight += maxHeightInLine + dip2px(verticalSpace);                    //因为换行了，所以每行的最大高度置0                    maxHeightInLine = 0;                }            }            //再加上最后一行的高度,因为之前的高度累积条件是换行            //最后一行没有换行操作，所以高度应该再加上            allHeight += maxHeightInLine;            if (widthMode != MeasureSpec.EXACTLY) {                widthSize = mScreenWidth;//如果没有指定宽，则默认为屏幕宽            }            if (heightMode != MeasureSpec.EXACTLY) {//如果没有指定高度                heightSize = allHeight + getPaddingBottom() + getPaddingTop();            }            setMeasuredDimension(widthSize, heightSize);        }        @Override        protected void onLayout(boolean changed, int l, int t, int r, int b) {          if (changed) {              //摆放子view              View child = null;              //初始子view摆放的左上位置              int left = getPaddingLeft();              int top = getPaddingTop();              //一行view中将最大的高度存于此变量，用于子view进行换行时高度的计算              int maxHeightInLine = 0;              for (int i = 0, len = getChildCount(); i < len; i++) {                  child = getChildAt(i);                  //从第二个子view开始算起                  //因为第一个子view默认从头开始摆放                  if (i > 0) {                      //两两对比，取得一行中最大的高度                  if (getChildAt(i - 1).getMeasuredHeight() > maxHeightInLine) {                          maxHeightInLine = getChildAt(i - 1).getMeasuredHeight();                     }                      //当前子view的起始left为 上一个子view的宽度+水平间距                      left += getChildAt(i - 1).getMeasuredWidth() + dip2px(horizontalSpace);                      if (left + child.getMeasuredWidth() >= getWidth() - getPaddingRight() - getPaddingLeft()) {//这一行所有子view相加的宽度大于容器的宽度，需要换行                          //换行的首个子view，起始left应该为0+容器的paddingLeft                          left = getPaddingLeft();                          //top的位置为上一行中拥有最大高度的某个View的高度+垂直间距                          top += maxHeightInLine + dip2px(verticalSpace);                          //将上一行View的最大高度置0                          maxHeightInLine = 0;                      }                  }                  //摆放子view                  child.layout(left, top, left + child.getMeasuredWidth(), top + child.getMeasuredHeight());              }          }      }        /**         * dp转为px         *         * @param dpValue         * @return         */        private int dip2px(float dpValue) {            return (int) (dpValue * mDensity + 0.5f);        }        /**         * 设置子view间的水平间距 单位dp         *         * @param horizontalSpace         */        public void setHorizontalSpace(int horizontalSpace) {            this.horizontalSpace = horizontalSpace;        }        /**         * 设置子view间的垂直间距 单位dp         *         * @param verticalSpace         */        public void setVerticalSpace(int verticalSpace) {            this.verticalSpace = verticalSpace;        }    }    

使用如下：
xml文件：

        <com.zengd.FlexBoxLayout            android:id="@+id/flexBoxLayout"            android:layout_width="match_parent"            android:layout_height="match_parent">            <!--这里写子View，也可代码动态添加-->            ……        </com.zengd.FlexBoxLayout>

Activity里的代码：

    FlexBoxLayout flexBoxLayout = (FlexBoxLayout) findViewById(R.id.flex_box_layout);    flexBoxLayout.setHorizontalSpace(10);//不设置默认为0    flexBoxLayout.setVerticalSpace(10);//不设置默认为0

运行效果如图：

本项目Demo地址:
https://github.com/zengd0/FlexBoxLayout