自定义View——FlowLayout(流式标签布局)

参考
Android开发之流式布局(实现热门标签效果)
Android 自定义ViewGroup 实战篇 -> 实现FlowLayout

实现效果

能够根据宽度自动换行
要实现这种效果,也可以使用FlexboxLayoutFlexboxLayout是 Google I/O 上开源的一个布局控件
Android开发之玩转FlexboxLayout布局
Android FlexboxLayout 聪明的UI布局
Android轻松搞定流动布局(FlexboxLayout)

这里我们使用自定义ViewGroup的方式来实现

image.png

测量

1、由于在容器ViewGroup里装载的是原生控件(TextView,Button,ImageView等),所以对于原生控件的属性(内部对齐方式,缩放方式,内边距等)我们不需要去做另外的处理,但这里涉及到了一个控件与控件之间的距离(外边距margin),所以我们需要让ViewGroup去认识这个标签,在原生的ViewGroup里是不支持margin的,ViewGroup里有两个内部类分别是ViewGroup.LayoutParams和ViewGroup. MarginLayoutParams,ViewGroup. MarginLayoutParams继承于ViewGroup.LayoutParams也扩展了支持的属性,也就是magin属性,所以我们需要重写generateLayoutParams方法让其返回MarginLayoutParams对象

/**
     * 指定ViewGroup的LayoutParams
     *
     * @param attrs
     * @return
     */
    @Override
    public LayoutParams generateLayoutParams(AttributeSet attrs) {
        return new MarginLayoutParams(getContext(), attrs);
    }

2、在ViewGroup里测量是在onMeasure方法里实现的,由于LinearLayout和RelativeLayout等这些布局是继承于ViewGroup的,这些布局摆放控件的方式是不一样的,比如LinearLayout是呈线性摆放的,RelativeLayout是呈叠加摆放的,所以测量的方式也是不一样的,所以ViewGroup并没有给我们做好子View的测量工作,而是让我们去重写onMeasure方法进行测量,一个ViewGroup除非指定它的宽高精确值或者让其充满match_parent,否则它是不知道自身大小应该是多少的,所以我们需要对包含在ViewGroup里的子View进行逐个测量,然后累加宽高来确定ViewGroup的宽高值。

3、谷歌官方给我们提供了三种测量模式:
EXACTLY:精确大小,可以让ViewGroup宽高为我们的指定值或者是充满match_parent
AT_MOST:给出限定大小,子View可以在ViewGroup的允许范围内伸展大小
UNSPECIFIED:不指定限制,子View想要多大就给多大(几乎很少使用)

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}

我们可以在onMeasure方法里通过MeasureSpec.getMode和MeasureSpec.getSize得到对应的测量模式和测量尺寸,当模式为EXACTLY的时候,我们就可以直接应用所测量的尺寸,但如果是其他模式,那么我们就只能自己去测量子View的尺寸了。

布局

@Override
protected abstract void onLayout(boolean changed,
            int l, int t, int r, int b);

在自定义ViewGroup中提供了一个抽象方法onLayout需要我们对其实现,在这里我们可以对子View的位置进行确定排列,ViewGroup通过onLayout 方法来确定View在容器中的位置,View通过layout方法来确认自己在父容器中的位置,l,t,r,b参数分别代表left,top,right,bottom,也就是左上和右下。

自定义FlowTagLayout

详细注释都写在代码中

/**
 * author:      lin
 * date:        2018/10/15 16:56
 * description: 流式标签,自动换行,支持设置padding属性
 */

public class FlowLayout extends ViewGroup {

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

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

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

    //每一行的子View
    private List> mAllChildViews = new ArrayList<>();
    //每一行的高度
    private List mLineHeight = new ArrayList<>();

    /**
     * 测量所有子View大小,确定ViewGroup的宽高
     *
     * @param widthMeasureSpec
     * @param heightMeasureSpec
     */
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        //由于onMeasure会执行多次,避免重复的计算控件个数和高度,这里需要进行清空操作
        mAllChildViews.clear();
        mLineHeight.clear();

        //父控件传进来的宽度和高度以及对应的测量模式,获取总宽度,包含padding值
        int sizeWidth = MeasureSpec.getSize(widthMeasureSpec);
        int modeWidth = MeasureSpec.getMode(widthMeasureSpec);
        int sizeHeight = MeasureSpec.getSize(heightMeasureSpec);
        int modeHeight = MeasureSpec.getMode(heightMeasureSpec);

        //除去左右padding的宽度,作为比较是否换行的宽度
        //MeasureSpec.EXACTLY模式时适用,MeasureSpec.AT_MOST模式使用sizeWidth
        int noPaddingWidth = sizeWidth - getPaddingLeft() - getPaddingRight();

        //如果当前ViewGroup的宽高为wrap_content的情况
        int width = getPaddingLeft() + getPaddingRight();//自己测量的宽度,padding值+子view宽度
        int height = getPaddingTop() + getPaddingBottom();//自己测量的高度
        //记录当前行的宽度和高度
        int lineWidth = 0;
        int lineHeight = 0;

        //记录当前行的子view
        List lineViews = new ArrayList<>();

        //获取FlowTagLayout中子view的个数
        int childCount = getChildCount();
        //遍历子View
        for (int i = 0; i < childCount; i++) {
            View child = getChildAt(i);
            //测量子View的宽和高
            measureChild(child, widthMeasureSpec, heightMeasureSpec);
            //得到子View的LayoutParams
            MarginLayoutParams lp = (MarginLayoutParams) child.getLayoutParams();
            //子View占据的宽度
            int childWidth = child.getMeasuredWidth() + lp.leftMargin + lp.rightMargin;
            //子View占据的高度
            int childHeight = child.getMeasuredHeight() + lp.topMargin + lp.bottomMargin;
            //判断是否换行(MeasureSpec.EXACTLY和MeasureSpec.AT_MOST要区别处理)
            if (lineWidth + childWidth <= (modeWidth == MeasureSpec.EXACTLY ? noPaddingWidth : sizeWidth)) {//不换行
                //累加行宽
                lineWidth += childWidth;
                //得到最大行高
                lineHeight = Math.max(lineHeight, childHeight);
                //添加子View到当前行lineViews
                lineViews.add(child);
            } else {//换行
                //当前行的子view存储到mAllChildViews
                mAllChildViews.add(lineViews);
                //记录上一行的行高
                mLineHeight.add(lineHeight);
                //对比得到最大的宽度
                width = Math.max(width, lineWidth);
                //记录行高
                height += lineHeight;
                //新建下一行的子View集合
                lineViews = new ArrayList<>();
                //重置换行后的行宽
                lineWidth = childWidth;
                //重置换行后的行高
                lineHeight = childHeight;
                //添加到下一行的View集合
                lineViews.add(child);
            }
            //处理最后一个子View的情况
            if (i == childCount - 1) {
                //当前行的子view集合存储到mAllChildViews
                mAllChildViews.add(lineViews);
                //记录行高
                mLineHeight.add(lineHeight);
                //对比得到最大的宽度,最终的宽度
                width = Math.max(width, lineWidth);
                //记录行高,最终的高度
                height += lineHeight;
            }
        }
        //wrap_content
        setMeasuredDimension(modeWidth == MeasureSpec.EXACTLY ? sizeWidth : width,
                modeHeight == MeasureSpec.EXACTLY ? sizeHeight : height);

    }

    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {

        //FlowTagLayout的Padding值
        int left = getPaddingLeft();
        int top = getPaddingTop();
        //遍历所有子view
        for (int i = 0; i < mAllChildViews.size(); i++) {
            //每行行高
            int lineHeight = mLineHeight.get(i);
            //每一行内的子View
            List viewList = mAllChildViews.get(i);
            for (int j = 0; j < viewList.size(); j++) {
                View view = viewList.get(j);
                MarginLayoutParams marginLayoutParams = (MarginLayoutParams) view.getLayoutParams();
                int vl = left + marginLayoutParams.leftMargin;
                int vt = top + marginLayoutParams.topMargin;
                int vr = vl + view.getMeasuredWidth();
                int vb = vt + view.getMeasuredHeight();
                view.layout(vl, vt, vr, vb);
                left += view.getMeasuredWidth() + marginLayoutParams.leftMargin + marginLayoutParams.rightMargin;
            }
            left = getPaddingLeft();
            top += lineHeight;
        }
    }

    /**
     * 指定ViewGroup的LayoutParams
     *
     * @param attrs
     * @return
     */
    @Override
    public LayoutParams generateLayoutParams(AttributeSet attrs) {
        return new MarginLayoutParams(getContext(), attrs);
    }
}

在布局中使用





    

        

        

        


        

        

        

        

        

    



你可能感兴趣的:(自定义View——FlowLayout(流式标签布局))