FlexboxLayout浅析-优快云博客

本文介绍如何在Android中使用Flexbox布局实现类似专题标签的效果，并提供具体实现步骤与代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图：热门专题下方就是一个Flexbox的效果，截图来自简书

使用：

1.添加依赖

compile 'com.google.android:flexbox:0.2.2'

2.布局文件简例

<com.google.android.flexbox.FlexboxLayout
        android:id="@+id/flexbox_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:flexWrap="wrap" />

其中flexWrap 这个属性决定Flex 容器是单行还是多行，并且决定副轴（与主轴垂直的轴）的方向。可能有以下3个值：

noWrap: 不换行，一行显示完子元素。
wrap: 按正常方向换行。
wrap_reverse: 按反方向换行

3.向其中填充数据的简介

我们此处要做的是将一堆词变成像上图一样的专题Flexbox样式

        String[] tags = {"婚姻育儿", "散文", "设计", "上班这点事儿", "影视天堂", "大学生活", "美人说", "运动和健身", "工具癖", "生活家", "程序员", "想法", "短篇小说", "美食", "教育", "心理", "奇思妙想", "美食", "摄影"};
        flexboxLayout = (FlexboxLayout) findViewById(R.id.flexbox_layout);
        for (int i = 0; i < tags.length; i++) {
            DataBean model = new DataBean();
            model.setId(i);
            model.setTitle(tags[i]);
            flexboxLayout.addView(createNewFlexItemTextView(model));
        }

    /**
     * 动态创建TextView
     * @param book
     * @return
     */
    private TextView createNewFlexItemTextView(final DataBean book) {
        TextView textView = new TextView(this);
        textView.setGravity(Gravity.CENTER);
        textView.setText(book.getTitle());
        textView.setTextSize(12);
        textView.setTextColor(getResources().getColor(R.color.colorAccent));
//        textView.setBackgroundResource(R.drawable.tag_states);
        textView.setTag(book.getId());
        textView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Log.e("TAG", book.getTitle());
            }
        });
        int padding = Utils.dp2px(this, 4);//随意搜到的dp转px的一个方法
        int paddingLeftAndRight = Utils.dp2px(this, 8);
        ViewCompat.setPaddingRelative(textView, paddingLeftAndRight, padding, paddingLeftAndRight, padding);
        FlexboxLayout.LayoutParams layoutParams = new FlexboxLayout.LayoutParams(
                ViewGroup.LayoutParams.WRAP_CONTENT,
                ViewGroup.LayoutParams.WRAP_CONTENT);
        int margin = Utils.dp2px(this, 6);
        int marginTop = Utils.dp2px(this, 16);
        layoutParams.setMargins(margin, marginTop, margin, 0);
        textView.setLayoutParams(layoutParams);
        return textView;
    }

做法是，将词组扔进数组后，绑定控件，抽象出一个Bean类来存放数据，通过addView，来循环放入子View

子View的样式，点击事件，间距控制，都通过createNewFlexItemTextView当中定义。