Android流式布局：如何实现自适应灵活排版(建议收藏Android)

一、什么是流式 布局？

在移动端的开发中，经常遇到需求是需要在一个页面中展示大量图文数据，而这些数据的大小、数量是不确定的。在这种情况下使用传统的RelativeLayout布局或LinearLayout布局显然不太合适。流式布局就是为了解决以上问题而生的一种布局方式，它可以自适应大小、灵活排版，让移动端开发变得更加便利。

二、如何实现流式布局？

Android系统并没有内置流式布局这种布局方式，但是可以通过各种库来实现。下面介绍两种比较常用的实现方式。

1、使用FlexboxLayout库

FlexboxLayout是Google在2016年I/O大会上发布的一种布局方案，它提供了强大的灵活性和可操作性。使用它可以实现任意方向的流式布局，支持子View的自适应大小、对齐方式、换行等。下面是使用FlexboxLayout实现流式布局的示例代码。

dependencies {
    implementation 'com.google.android:flexbox:2.0.1'
}

public class FlexboxActivity extends AppCompatActivity {

    private ArrayList mDataList;

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

        initData();
        FlexboxLayout flexboxLayout = findViewById(R.id.flex_box);
        for (int i = 0; i < mDataList.size(); i++) {
            TextView textView = new TextView(this);
            textView.setText(mDataList.get(i));
            FlexboxLayout.LayoutParams lp = new FlexboxLayout.LayoutParams(
                    ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
            lp.setMargins(10, 10, 10, 10);
            textView.setLayoutParams(lp);
            textView.setBackgroundResource(R.drawable.shape_tag_bg);
            flexboxLayout.addView(textView);
        }
    }

    private void initData() {
        mDataList = new ArrayList();
        mDataList.add("Android");
        mDataList.add("Java");
        mDataList.add("Kotlin");
        mDataList.add("Python");
        mDataList.add("C++");
        mDataList.add("React Native");
        mDataList.add("Flutter");
        mDataList.add("Swift");
        mDataList.add("Objective-C");
        mDataList.add("HTML/CSS");
    }
}

2、使用FlowLayout库

FlowLayout是一个开源库，它封装了ViewGroup，用于实现标签流式布局。和FlexboxLayout库相似，它也支持子View的自适应大小、对齐方式、换行等功能，同时使用也非常简单，下面是示例代码。

dependencies {
    implementation 'com.nex3z:flow-layout:1.2.3'
}

public class FlowActivity extends AppCompatActivity {

    private ArrayList mDataList;

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

        initData();
        FlowLayout flowLayout = findViewById(R.id.flow_layout);
        for (int i = 0; i < mDataList.size(); i++) {
            TextView textView = new TextView(this);
            textView.setText(mDataList.get(i));
            FlowLayout.LayoutParams lp = new FlowLayout.LayoutParams(
                    FlowLayout.LayoutParams.WRAP_CONTENT, FlowLayout.LayoutParams.WRAP_CONTENT);
            lp.setMargins(10, 10, 10, 10);
            textView.setLayoutParams(lp);
            textView.setBackgroundResource(R.drawable.shape_tag_bg);
            flowLayout.addView(textView);
        }
    }

    private void initData() {
        mDataList = new ArrayList();
        mDataList.add("Android");
        mDataList.add("Java");
        mDataList.add("Kotlin");
        mDataList.add("Python");
        mDataList.add("C++");
        mDataList.add("React Native");
        mDataList.add("Flutter");
        mDataList.add("Swift");
        mDataList.add("Objective-C");
        mDataList.add("HTML/CSS");
    }
}