流式布局--标签

最新推荐文章于 2018-08-31 10:01:49 发布

SuzyYoo

最新推荐文章于 2018-08-31 10:01:49 发布

阅读量294

点赞数

分类专栏： Android 高级UI 文章标签： android 布局标签

本文链接：https://blog.csdn.net/u013491677/article/details/76274313

版权

Android 同时被 2 个专栏收录

35 篇文章 0 订阅

订阅专栏

高级UI

4 篇文章 0 订阅

订阅专栏

自定义流式布局实现标签功能

自定义控件 FlowLayout(extends ViewGroup)

实现思路：1.动态测量View的宽高;2.遍历子元素，动态设置子元素的位置;3.根据String[] 向 FlowLayout动态添加子元素；4.添加子元素的点击事件。5.子元素使用TextView。

效果：

一、自定义FlowLayout(extends ViewGroup)

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

import java.util.ArrayList;
import java.util.List;

/**
 * 自定义View--标签
 */
public class FlowLayout extends ViewGroup {

    private LayoutInflater mLayoutInflater;


    /**
     * 构造方法--使用new创建时调用
     *
     * @param context
     */
    public FlowLayout(Context context) {
        this(context, null);
    }

    /**
     * 构造方法--在xml中添加控件时调用
     *
     * @param context
     * @param attrs{属性集}
     */
    public FlowLayout(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    /**
     * 构造方法--在xml添加控件，并使用了自定义属性集时调用
     *
     * @param context
     * @param attrs
     * @param defStyleAttr
     */
    public FlowLayout(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        mLayoutInflater = LayoutInflater.from(context);
    }
}

主要用到三个方法：generateLayoutParams()、onMeasure()、onLayout()。

1.1 generateLayoutParams()

ViewGroup都有对应的LayoutParams，view.getLayoutParams()拿到的LayoutParams是子View所在父控件的LayoutParams。自定义ViewGroup使用哪种LayoutParams根据UI效果选择（这里标签功能仅仅关心每个Item之间的间隔，所以使用MarginLayoutParams）。

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

1.2 onMeasure()

测量子View的宽和高，设置ViewGroup的宽和高。根据子View的布局文件，为子View设置测量模式和测量值。

测量 = 测量模式 + 测量值。

测量模式有三种：

EXACTLY:精确测量，例如100dp、match_parent；
AT_MOST:根据子View内部的数据或形态设置宽和高，例如:wrap_content;(主要计算该模式下的宽高)

UNSPECIFIED:子View想要多大就给多大，一般用于系统内部的测量过程。

/**
 * 确定自定义View的测量宽高
 *
 * @param widthMeasureSpec
 * @param heightMeasureSpec
 */
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

    int specWidth = MeasureSpec.getSize(widthMeasureSpec);//测量宽度
    int specModeWidth = MeasureSpec.getMode(widthMeasureSpec);//宽度测量模式
    int specHeight = MeasureSpec.getSize(heightMeasureSpec);//测量高度
    int specModeHeight = MeasureSpec.getMode(heightMeasureSpec);//高度测量模式

    /*wrap_content模式下，需要计算最终宽高--计算开始*/
    int resultWidth = 0;//最终宽度
    int resultHeight = 0;//最终高度

    int lineWidth = 0;//记录当前行宽度
    int lineHeight = 0;//记录当前行高度

    int childCount = getChildCount();//得到子元素的个数

    for (int i = 0; i < childCount; i++) {
        //获取当前的子元素
        View childView = getChildAt(i);
        //测量子元素的宽和高，测量之后可以通过childView.getMeasuredWidth()得到当前子元素的宽度。
        measureChild(childView, widthMeasureSpec, heightMeasureSpec);
        //拿到子元素父容器的的LayoutParams(自定义View的LayoutParams)
        MarginLayoutParams mlp = (MarginLayoutParams) childView.getLayoutParams();

        //子元素占据的宽度
        int childWidth = childView.getMeasuredWidth() + mlp.leftMargin + mlp.rightMargin;
        //子元素占据的高度
        int childHeight = childView.getMeasuredHeight() + mlp.topMargin + mlp.bottomMargin;

        //当前行宽 + 子元素宽度 > 容器宽度 ：说明这一行放不下该childView
        if (lineWidth + childWidth > specWidth - getPaddingLeft() - getPaddingRight()) {//需要换行
            resultWidth = Math.max(resultWidth, lineWidth);//最终宽度 = 最宽行的宽度
            resultHeight += lineHeight;//最终高度 = 所有行高相加

            lineWidth = childWidth;//重置行宽，因为此时已经换行。行宽 = 子元素占据的宽度
            lineHeight = childHeight;//重置行高
        } else {//非换行
            lineWidth += childWidth;//行宽 = 该行childView的宽度叠加
            lineHeight = Math.max(lineHeight, childHeight);//行高 = 该行最高的子元素的高度
        }

        //最后一个控件，并没有执行换行逻辑，但是自定义View的最终宽高必须加上最后不完整的一行
        if (i == childCount - 1) {
            resultWidth = Math.max(resultWidth, lineWidth);
            resultHeight += lineHeight;
        }
    }
     /*wrap_content模式下，需要计算最终宽高--计算结束*/


    //根据测量模式设置最终宽高：如果是自适应，设置宽度为计算出的最终宽度
    setMeasuredDimension(
        specModeWidth == MeasureSpec.AT_MOST ? resultWidth + getPaddingLeft() + getPaddingRight() : specWidth,
        specModeHeight == MeasureSpec.AT_MOST ? resultHeight + getPaddingTop() + getPaddingBottom() : specHeight);

}

1.3 onLayout()

设置子View的位置，总体分两步：1.遍历子元素，并记录子元素；2.遍历子元素，计算子元素的坐标点，设置子元素的在Layout上的位置。

/** 存储所有的View */
private List<List<View>> mAllViews = new ArrayList<>();

/** 存储每一行的高度 */
private List<Integer> mLinHeight = new ArrayList<>();

/**
 * 设置子View的位置
 *
 * @param changed
 * @param l
 * @param t
 * @param r
 * @param b
 */
@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
    //执行过程中onLayout有可能会调用多次
    mAllViews.clear();
    mLinHeight.clear();

    /*记录所有子元素--开始*/
    //当前自定义View的宽度
    int width = getWidth();

    int lineWidth = 0;//记录当前行宽
    int lineHeight = 0;//记录当前行高

    //记录当前行的所有子元素
    List<View> linViews = new ArrayList<>();

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

    for (int i = 0; i < childCount; i++) {
        //获取当前的子View
        View childView = getChildAt(i);
        //拿到父容器的LayoutParams
        MarginLayoutParams mlp = (MarginLayoutParams) childView.getLayoutParams();
        //当前子元素宽度
        int childWidth = childView.getMeasuredWidth();
        //当前子元素高度
        int childHeight = childView.getMeasuredHeight();

        //如果该行显示不下当前子元素，则需要换行
        if (lineWidth + childWidth + mlp.leftMargin + mlp.rightMargin > width - getPaddingLeft() - getPaddingRight()) {
            //存储当前行高
            mLinHeight.add(lineHeight);
            //存储当前行所有Views
            mAllViews.add(linViews);

            //重置行宽
            lineWidth = childWidth + mlp.leftMargin + mlp.rightMargin;
            //重置行高
            lineHeight = childHeight + mlp.topMargin + mlp.bottomMargin;
            //重置行View集合
            linViews = new ArrayList<>();

            //添加子View到linViews
            linViews.add(childView);

        } else {//不需要换行
            //行宽 = 每个子元素的宽度 + 每个子元素的Margin
            lineWidth += childWidth + mlp.leftMargin + mlp.rightMargin;
            //行高 = 最高的子元素的高度
            lineHeight = Math.max(lineHeight, childHeight + mlp.topMargin + mlp.bottomMargin);
            //添加子View到linViews
            linViews.add(childView);
        }
    }

    //处理最后一行
    mLinHeight.add(lineHeight);
    mAllViews.add(linViews);
    /*记录所有子元素--结束*/


    /*设置子View的位置--开始*/
    int top = getPaddingTop();
    int lineNum = mAllViews.size();//行数
    //逐行设置View
    for (int i = 0; i < lineNum; i++) {
        linViews = mAllViews.get(i);//拿到该行的linViews
        lineHeight = mLinHeight.get(i);//拿到该行的高度
        int left = getPaddingLeft();//重置左侧坐标点

        //遍历该行View
        for (int j = 0; j < linViews.size(); j++) {
            View childView = linViews.get(j);
            //判断子元素的显示状态
            if (childView.getVisibility() == View.GONE) {
                continue;
            }
            //得到父容器的LayoutParams
            MarginLayoutParams mlp = (MarginLayoutParams) childView.getLayoutParams();
            //计算当前子元素的四个坐标点
            int lc = left + mlp.leftMargin;
            int tc = top + mlp.topMargin;
            int rc = lc + childView.getMeasuredWidth();
            int bc = tc + childView.getMeasuredHeight();
            //为子元素进行布局
            childView.layout(lc, tc, rc, bc);
            //移动左侧坐标点
            left += mlp.leftMargin + childView.getMeasuredWidth() + mlp.rightMargin;
        }
        //移动上侧坐标点
        top += lineHeight;
    }
    /*设置子View的位置--结束*/

}

1.4 动态添加子元素，并为子元素添加onclick事件

1.4.1 设置子元素的显示风格

子元素的布局文件：

文件位置：//res/layout/flow_item.xml

背景资源文件：

文件位置：//res/drawable/flow_item_bg.xml

1.4.2 动态创建子元素，并初始化数据，添加onclick事件

//定义事件接口
public interface onItemClickListener {
    void onItemClick(TextView view, int position);
}

/**
 * 初始化数据
 * @param strArr
 * @param viewGroup
 * @param mOnItemClickListener
 */
public void initValues(final String[] strArr, FlowLayout viewGroup,
    final onItemClickListener mOnItemClickListener) {
    removeAllViews();
    for (int i = 0; i < strArr.length; i++) {
        final int pos = i;
        final TextView tv = (TextView) mLayoutInflater.inflate(R.layout.flow_item, viewGroup, false);
        tv.setText(strArr[i]);
        tv.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if(mOnItemClickListener != null){

                    mOnItemClickListener.onItemClick(tv, pos);
                }
            }
        });
        viewGroup.addView(tv);
    }
}