安卓快速实现流式布局(RecyclerView+ FlexboxLayout)

最新推荐文章于 2025-11-15 04:42:22 发布

原创最新推荐文章于 2025-11-15 04:42:22 发布 · 1.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#android #java #开发语言

开发技术积累专栏收录该内容

101 篇文章

订阅专栏

本文介绍了如何在Android开发中利用Google推出的FlexboxLayout来替代自定义View实现流式布局，以此减少bug并提高开发效率。通过示例代码展示了如何在XML布局和Activity中设置FlexboxLayoutManager，以及实现后的效果。

项目开发中类似标签的东西经常会用到流式布局，之前实现流式布局经常需要自定义View,现在Google推出FlexboxLayout 感觉方便了很多，重要的是bug也少了很多

FlexboxLayout GitHub 地址：GitHub - google/flexbox-layout: Flexbox for Android

Demo 地址：GitHub - JasonZhangHG/SuperTextView: SuperTextView

代码：XML布局:

<?xml version="1.0" encoding="utf-8"?>
<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">
    
    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/rlv_tag_list"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="30dp" />

</RelativeLayout>

Activity 代码：

public class FlexboxLayoutActivity extends AppCompatActivity {

    private RecyclerView mTagListView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_flexbox_layout);
        mTagListView = findViewById(R.id.rlv_tag_list);

        FlexboxLayoutManager layoutManager = new FlexboxLayoutManager(this);
        layoutManager.setFlexDirection(FlexDirection.ROW);
        layoutManager.setJustifyContent(JustifyContent.FLEX_START);
        mTagListView.setLayoutManager(layoutManager);
        TagAdapter tagAdapter = new TagAdapter();
        List<String> iconList = new ArrayList<>();
        iconList.add("e_1");
        iconList.add("e_2");
        iconList.add("e_3");
        iconList.add("e_4");
        iconList.add("e_5");
        tagAdapter.setDataSilently(iconList);
        mTagListView.setAdapter(tagAdapter);
    }
}

实现后的效果：