FlowLayout自定义ViewGroup方式实现流式布局效果

引言

  除了使用hongyang大神的FlowLayout库来可以实现流式布局效果，还有自定义View的方式也能实现，话不多说，马上开始。
  传送门：FlowLayout使用hongyang大神的依赖库实现流式布局

---

效果展示

自定义FlowLayout.jpeg

点击效果

自定义FlowLayout.gif

介绍

  什么是流式布局？就是像水一样可以流动？不，之所以这样命名只是在强调它的不规则性，它会根据你的内容多少测量你需要的控件的尺寸，完成自定义的效果。

---

用法

第一步：自定义View，创建FlowLayoutView类

注：之后在布局文件中可以使用的自定义控件

/**
 * @data on 2020/9/8 2:13 PM
 * @auther armstrong
 * @describe 流式布局 -- 自定义View. from libo
 */
public class FlowLayoutView extends ViewGroup {
    private List rows = new ArrayList<>();
    private int usedWidth;
    /**
     * 当前需要操作的行
     */
    private Row curRow;
    private int verticalPadding = 30;
    private int horizontalPadding = 40;

    public FlowLayoutView(Context context) {
        super(context);
    }

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

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

        restoreLine();  //每次重新布局，属性要初始化，避免onMeasure重复调用混乱问题

        //子view设置宽高为父view大小减去padding值
        int width = MeasureSpec.getSize(widthMeasureSpec);
        int height = MeasureSpec.getSize(heightMeasureSpec);
        int widthMode = MeasureSpec.getMode(widthMeasureSpec);
        int heightMode = MeasureSpec.getMode(heightMeasureSpec);

        //设置每个子view宽高，并且将每个子View归到自己的行
        for (int i = 0; i < getChildCount(); i++) {
            View childView = getChildAt(i);

            //设置子view设置AT_MOST模式，即布局属性为wrap_content
            int childWidthSpec = MeasureSpec.makeMeasureSpec(width, widthMode == MeasureSpec.EXACTLY ? MeasureSpec.AT_MOST : widthMode);
            int childHeightSpec = MeasureSpec.makeMeasureSpec(height, heightMode == MeasureSpec.EXACTLY ? MeasureSpec.AT_MOST : heightMode);
            childView.measure(childWidthSpec, childHeightSpec);

            if (curRow == null) {
                curRow = new Row();
            }

            //根据当前childview宽度和剩余宽度判断是否能放进当前行，放不了就要换行
            if (childView.getMeasuredWidth() + horizontalPadding > width - usedWidth) {
                //先换行，再放入
                nextLine();
            }

            usedWidth += childView.getMeasuredWidth() + horizontalPadding;
            curRow.addView(childView);
        }

        //将最后一个row加入到rows中
        rows.add(curRow);

        //根据子view组成的高度重设自己高度
        int finalHeight = 0;
        for (Row row : rows) {
            finalHeight += row.height + verticalPadding;
        }

        setMeasuredDimension(width, finalHeight);
    }

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

        int top = 0;
        //遍历每一行，将每一行子view布局
        for (Row row : rows) {
            row.layout(top);
            top = top + row.height + verticalPadding;
        }
    }

    /**
     * 换行，需要将当前row存储，并且创建新的row，新的行使用空间置0
     */
    private void nextLine() {
        rows.add(curRow);
        curRow = new Row();
        usedWidth = 0;
    }

    /**
     * 每次onmeasure需要重置信息
     */
    private void restoreLine() {
        rows.clear();
        curRow = new Row();
        usedWidth = 0;
    }

    /**
     * 用于记录每一行放置子View的信息
     */
    class Row {
        /**
         * 该行放置的子view
         */
        private List childViews = new ArrayList<>();
        private int height;

        public void addView(View view) {
            childViews.add(view);
            height = view.getMeasuredHeight() > height ? view.getMeasuredHeight() : height;  //高度取最高子view的高度
        }

        public int getSize() {
            return childViews.size();
        }

        /**
         * 将当前childViews进行布局
         * top 当前hang处于的顶部高度
         */
        public void layout(int top) {
            int leftMargin = 0;
            for (int i = 0; i < childViews.size(); i++) {
                View view = childViews.get(i);
                view.layout(leftMargin, top, leftMargin + view.getMeasuredWidth(), top + view.getMeasuredHeight());
                leftMargin = leftMargin + view.getMeasuredWidth() + horizontalPadding;
            }
        }
    }

}

第二步：布局文件

第三步：TextView的控件布局

flow_tv_content.xml

第四步：在activity中写的代码

//自定义View实现流式布局
public class Case15 extends AppCompatActivity {
    private FlowLayoutView flowLayoutView;  //自定义ViewGroup
    private ArrayList datas = new ArrayList();

    private String[] tagTextArray = new String[]{"天猫精灵", "充电台灯", "睡衣", "手表", "创意水杯", "夏天T恤男", "灯光机械键盘",
            "计算机原理", "学霸笔记本", "可口可乐", "跑步机", "旅行箱", "竹浆卫生纸", "吹风机", "洗面奶", "窗帘"};

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_case15);

        //将数组转成list，因为一般都是从api接口接收的数据都是list
        for (int i = 0; i < tagTextArray.length; i++) {
            datas.add(tagTextArray[i]);
        }
        initView();
    }

    private void initView() {
        flowLayoutView = findViewById(R.id.flowlayout);
        for (int i = 0; i < datas.size(); i++) {
            View view = LayoutInflater.from(getApplicationContext()).inflate(R.layout.flow_tv_content, null);
            TextView tvContent = view.findViewById(R.id.flow_tv);
            tvContent.setText(datas.get(i));
            flowLayoutView.addView(view);
            tvContent.setOnClickListener((View)->{
                  Toast.makeText(this,tvContent.getText()+"",Toast.LENGTH_SHORT).show();
            });
        }
    }
}

---

大功告成！