自定义ViewGroup实现流式布局（支持ViewGroup Padding, 子View margin，每行高度可以不一样）

最新推荐文章于 2021-12-08 15:31:19 发布

张旭童

最新推荐文章于 2021-12-08 15:31:19 发布

阅读量9.5k

点赞数 14

文章标签：流式布局自定义ViewGroup padding margin 行高

本文链接：https://blog.csdn.net/zxt0601/article/details/50533658

版权

================================================================

预留填坑

先画一个我理解的margin padding 的图，感觉在写自定义ViewGroup的时候容易混乱：

黑色矩形区域为父ViewGroup区域，蓝色矩形区域为子View的布局区域(如果padding为0，则与黑色矩形区域重合)，绿色矩形为每一个子View。
红色短线为父ViewGroup的padding，绿色矩形四周的紫色短线为子View的margin。

================================================================

先直接贴代码，注释真心很详细了：

大体思路，自定义一个ViewGroup，重写onMeasure,onLayout方法，

在onMeasure方法里测量并设置子View和ViewGroup自己的宽高，

在onLayout方法里，为每个子View布局。

这里假设的是每一行的里的每个View的行高是一样的，不同的行行高可以不同。

效果图1： ViewGroup 的padding为5dp

效果图2 是将ViewGroup的padding设为60dp，每个textview margin为10dp：

是根据hyman大神的流式布局的思路，然后自己实现的，其中onLayout方法和hyman大神的不一样。

支持ViewGroup的padding，和子View的margin属性。

自定的ViewGroup代码如下：

package mcxtzhang.weixin521.leftmenu;

import android.content.Context;
import android.util.AttributeSet;
import android.util.Log;
import android.view.View;
import android.view.ViewGroup;

/**
 * 流式布局
 * Created by zhangxutong on 2016/1/17.
 */
public class FlowViewGroup extends ViewGroup {
    private static final String TAG = "zxt/FlowViewGroup";

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

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

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

    //在onMeasure里，测量所有子View的宽高，以及确定Viewgroup自己的宽高。
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        //获取系统传递过来测量出的宽度 高度，以及相应的测量模式。
        //如果测量模式为 EXACTLY( 确定的dp值，match_parent)，则可以调用setMeasuredDimension()设置，
        //如果测量模式为 AT_MOST(wrap_content),则需要经过计算再去调用setMeasuredDimension()设置
        int widthMeasure = MeasureSpec.getSize(widthMeasureSpec);
        int widthMode = MeasureSpec.getMode(widthMeasureSpec);
        int heightMeasure = MeasureSpec.getSize(heightMeasureSpec);
        int heightMode = MeasureSpec.getMode(heightMeasureSpec);

        //计算宽度 高度 //wrap_content测量模式下会使用到:
        //存储最后计算出的宽度，
        int maxLineWidth = 0;
        //存储最后计算出的高度
        int totalHeight = 0;
        //存储当前行的宽度
        int curLineWidth = 0;
        //存储当前行的高度
        int curLineHeight = 0;

        // 得到内部元素的个数
        int count = getChildCount();

        //存储子View
        View child =null;
        //存储子View的LayoutParams
        MarginLayoutParams params =null;
        //子View Layout需要的宽高(包含margin)，用于计算是否越界
        int childWidth;
        int childHeight;

        //遍历子View 计算父控件宽高
        for (int i = 0; i < count; i++) {
            child = getChildAt(i);
            //如果gone，不测量了
            if (View.GONE == child.getVisibility()) {
                continue;
            }
            //先测量子View
            measureChild(child, widthMeasureSpec, heightMeasureSpec);

            //获取子View的LayoutParams，(子View的LayoutParams的对象类型，取决于其ViewGroup的generateLayoutParams()方法的返回的对象类型，这里返回的是MarginLayoutParams)
            params = (MarginLayoutParams) child.getLayoutParams();
            //子View需要的宽度 为 子View 本身宽度+marginLeft + marginRight
            childWidth = child.getMeasuredWidth() + params.leftMargin + params.rightMargin;
            childHeight = child.getMeasuredHeight() + params.topMargin + params.bottomMargin;
            Log.i(TAG, "子View Layout需要的宽高(包含margin)：childWidth:" + childWidth + "   ,childHeight:" + childHeight);

            //如果当前的行宽度大于 父控件允许的最大宽度 则要换行
            //父控件允许的最大宽度 如果要适配 padding 这里要- getPaddingLeft() - getPaddingRight()
            //即为测量出的宽度减去父控件的左右边距
            if (curLineWidth + childWidth > widthMeasure - getPaddingLeft() - getPaddingRight()) {
                //通过比较 当前行宽 和以前存储的最大行宽,得到最新的最大行宽,用于设置父控件的宽度
                maxLineWidth = Math.max(maxLineWidth, curLineWidth);
                //父控件的高度增加了，为当前高度+当前行的高度
                totalHeight += curLineHeight;
                //换行后 刷新 当前行 宽高数据： 因为新的一行就这一个View，所以为当前这个view占用的宽高(要加上View 的 margin)
                curLineWidth = childWidth;
                curLineHeight = childHeight;
            } else {
                //不换行：叠加当前行宽 和 比较当前行高:
                curLineWidth += childWidth;
                curLineHeight = Math.max(curLineHeight, childHeight);
            }
            //如果已经是最后一个View,要比较当前行的 宽度和最大宽度，叠加一共的高度
            if (i == count - 1) {
                maxLineWidth = Math.max(maxLineWidth, curLineWidth);
                totalHeight += childHeight;
            }
        }

        Log.i(TAG, "系统测量允许的尺寸最大值：widthMeasure:" + widthMeasure + "   ,heightMeasure:" + heightMeasure);
        Log.i(TAG, "经过我们测量实际的尺寸(不包括父控件的padding)：maxLineWidth:" + maxLineWidth + "   ,totalHeight:" + totalHeight);

        //适配padding,如果是wrap_content,则除了子控件本身占据的控件，还要在加上父控件的padding
        setMeasuredDimension(
                widthMode != MeasureSpec.EXACTLY? maxLineWidth + getPaddingLeft() + getPaddingRight() : widthMeasure,
                heightMode != MeasureSpecEXACTLY ? totalHeight + getPaddingTop() + getPaddingBottom() : heightMeasure);
    }

    //布局父控件位置以及子控件的位置
    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        Log.i(TAG, "changed:" + changed + "   ,l:" + l + "  t:" + t + "  r:" + r + "  b:" + b);
        //子控件的个数
        int count = getChildCount();
        //ViewParent宽度(包含padding)
        int width = getWidth();
        //ViewParent 的右边x的布局限制值
        int rightLimit =  width - getPaddingRight();

        //存储基准的left top (子类.layout(),里的坐标是基于父控件的坐标，所以 x应该是从0+父控件左内边距开始，y从0+父控件上内边距开始)
        int baseLeft = 0 + getPaddingLeft();
        int baseTop = 0 + getPaddingTop();
        //存储现在的left top
        int curLeft = baseLeft;
        int curTop = baseTop;

        //子View
        View child = null;
        //子view用于layout的 l t r b
        int viewL,viewT,viewR,viewB;
        //子View的LayoutParams
        MarginLayoutParams params = null;
        //子View Layout需要的宽高(包含margin)，用于计算是否越界
        int childWidth;
        int childHeight;
        //子View 本身的宽高
        int childW,childH;

        //临时增加一个temp 存储上一个View的高度 解决过长的两行View导致显示不正确的bug
        int lastChildHeight =0;
        //
        for (int i = 0; i < count; i++) {
            child = getChildAt(i);
            //如果gone，不布局了
            if (View.GONE == child.getVisibility()) {
                continue;
            }
            //获取子View本身的宽高:
            childW = child.getMeasuredWidth();
            childH = child.getMeasuredHeight();
            //获取子View的LayoutParams，用于获取其margin
            params = (MarginLayoutParams) child.getLayoutParams();
            //子View需要的宽高 为 本身宽高+marginLeft + marginRight
            childWidth =  childW + params.leftMargin + params.rightMargin;
            childHeight = childH + params.topMargin + params.bottomMargin;

            //这里要考虑padding，所以右边界为 ViewParent宽度(包含padding) -ViewParent右内边距
            if (curLeft + childWidth > rightLimit ) {
                //如果当前行已经放不下该子View了 需要换行放置：
                //在新的一行布局子View，左x就是baseLeft，上y是 top +前一行高(这里假设的是每一行行高一样)，
                curTop = curTop + lastChildHeight;
                //layout时要考虑margin
                viewL = baseLeft +params.leftMargin;
                viewT = curTop + params.topMargin;
                viewR = viewL + childW;
                viewB = viewT + childH;
                //child.layout(baseLeft + params.leftMargin, curTop + params.topMargin, baseLeft + params.leftMargin + child.getMeasuredWidth(), curTop + params.topMargin + child.getMeasuredHeight());
                //Log.i(TAG,"新的一行:" +"   ,baseLeft:"+baseLeft +"  curTop:"+curTop+"  baseLeft+childWidth:"+(baseLeft+childWidth)+"  curTop+childHeight:"+ ( curTop+childHeight));
                curLeft = baseLeft + childWidth;

            } else {
                //当前行可以放下子View:
                viewL = curLeft +params.leftMargin;
                viewT = curTop + params.topMargin;
                viewR = viewL + childW;
                viewB = viewT + childH;

                //child.layout(curLeft + params.leftMargin, curTop + params.topMargin, curLeft + params.leftMargin + child.getMeasuredWidth(), curTop + params.topMargin + child.getMeasuredHeight());
                //Log.i(TAG,"当前行:"+changed +"   ,curLeft:"+curLeft +"  curTop:"+curTop+"  curLeft+childWidth:"+(curLeft+childWidth)+"  curTop+childHeight:"+(curTop+childHeight));
                curLeft = curLeft + childWidth;
            }
            lastChildHeight = childHeight;
            //布局子View
            child.layout(viewL,viewT,viewR,viewB);
        }
    }
    /**
     * @return 当前ViewGroup返回的Params的类型
     */
    @Override
    public ViewGroup.LayoutParams generateLayoutParams(AttributeSet attrs) {
        return new MarginLayoutParams(getContext(), attrs);
    }
}

使用方法：

一、动态使用：

private FlowViewGroup mFlowViewGroup;
private String[] mTexts = new String[]{"BatteryView.txt", "为自定义View",
        " 参考attrs.xml", " 定义自定义View属性", " 参考fragment_04.xml",
        " 使用自定义view，并传入属性值", " 两张图片为资源", "一张为view背景（白圈）",
        "一张为一个圆形图片", "用于遮盖XFerMode","形成圆形波浪效果"};

private void initView() {
    mFlowViewGroup = (FlowViewGroup) findViewById(R.id.flowlayout);
}

private void initDatas() {
    TextView tv;
    for (int i=0;i<mTexts.length;i++){
        tv= (TextView) LayoutInflater.from(this).inflate(R.layout.item_flow,mFlowViewGroup,false);
        tv.setText(mTexts[i]);
        tv.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(LeftMenu2Activity.this,""+((TextView)v).getText(),Toast.LENGTH_SHORT).show();
            }
        });
        mFlowViewGroup.addView(tv);
    }
}

其中布局文件为：

ViewGroup布局文件如下：

<mcxtzhang.weixin521.leftmenu.FlowViewGroup
    android:background="#d23c3c"
    android:padding="5dp"
    android:id="@+id/flowlayout"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

</mcxtzhang.weixin521.leftmenu.FlowViewGroup>

每个TextView布局文件如下：item_flow.xml:

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Demo Test"
    android:background="@drawable/textview_bg"
    android:layout_margin="10dp"
    />

background为一个自写的shape:textview_bg.xml 放在drawable文件夹下

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
    <corners android:radius="5dp"/>
    <gradient android:angle="45" android:startColor="#06fffa" android:endColor="#99aa55"/>
</shape>

二，静态使用：

直接在布局文件里：

<mcxtzhang.weixin521.leftmenu.FlowViewGroup
    android:padding="5dp"
    android:background="#00f00f"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="有padding" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="流式" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Java" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="RxJava" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="CardView" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="OKHttp" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TabLayout" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="FloatActionBar" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="ViewPager" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="AsynkTask" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="群英传" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="padding" />


</mcxtzhang.weixin521.leftmenu.FlowViewGroup>