【安卓小笔记】使用FlowLayout实现流式布局

flow layout， 流式布局， 这个概念在移动端或者前端开发中很常见，特别是在多标签的展示中， 往往起到了关键的作用。

1.在 build.gradle 文件中增加依赖：

 compile 'com.nex3z:flow-layout:0.1.4'

2.xml文件引用：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">


    <TextView
        android:id="@+id/label"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="标签："
        android:textColor="@color/black"
        android:textSize="16sp" />

    <com.nex3z.flowlayout.FlowLayout
        android:id="@+id/mflowlayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@+id/label"
        android:layout_margin="10dp"
        app:childSpacing="10dp"
        app:rowSpacing="10dp">

    com.nex3z.flowlayout.FlowLayout>

    <TextView
        android:id="@+id/add"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_marginStart="24dp"
        android:padding="16dp"
        android:text="添加" />

RelativeLayout>

• app:childSpacing 每个标签的间距
• app:rowSpacing 行间距

3.Java代码实现

public class FlowLayoutActivity extends BaseActivity {
    @BindView(R.id.mflowlayout)
    FlowLayout mFlowLayout;
    @BindView(R.id.add)
    TextView add;


    private int addNum = 0;
    private String[] content = {"网游","小说迷","汪星人","棋类运动","骑行","很长很长很长的标签","还是很长很长的标签"};
    private String[] more = {"标签1","标签22","标签3333","标签44444","标签555555","标签6666666"};

    @Override
    public int getLayoutId() {
        return R.layout.activity_flow_layout;
    }

    @Override
    public void initView() {
        ButterKnife.bind(this);
    }

    @Override
    public void initData() {

        for (int i = 0;i < content.length;i++){
        //创建一个Textview
            final TextView view = new TextView(mActivity);
            view.setText(content[i]);
            view.setBackground(getResources().getDrawable(R.drawable.corner_theme_empty));
            view.setTextColor(getResources().getColor(R.color.black));
            //设置padding
            int pxlr = view.getResources().getDimensionPixelOffset(R.dimen.divider_height_10dp);
            int pxlb = view.getResources().getDimensionPixelOffset(R.dimen.divider_height_6dp);
            view.setPadding(pxlr,pxlb,pxlr,pxlr);
            view.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                //标签点击事件
                    showToast(view.getText().toString());
                }
            });
            mFlowLayout.addView(view);
        }
    }

    @Override
    public void initListener() {
        add.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if (addNum <= more.length) {
                    final TextView view = new TextView(mActivity);
                    view.setText(more[addNum]);
                    view.setBackground(getResources().getDrawable(R.drawable.corner_theme_empty));
                    view.setTextColor(getResources().getColor(R.color.black));
                    int pxlr = view.getResources().getDimensionPixelOffset(R.dimen.divider_height_10dp);
                    int pxlb = view.getResources().getDimensionPixelOffset(R.dimen.divider_height_6dp);
                    view.setPadding(pxlr, pxlb, pxlr, pxlr);
                    view.setOnClickListener(new View.OnClickListener() {
                        @Override
                        public void onClick(View v) {
                            showToast(view.getText().toString());
                        }
                    });
                    mFlowLayout.addView(view);
                    addNum++;
                }
            }
        });
    }
}

4.具体实现后参考图：