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

忘是亡心i 2024-04-06 09:43 21阅读 0赞

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

FlexboxLayout GitHub 地址：[GitHub - google/flexbox-layout: Flexbox for Android][GitHub - google_flexbox-layout_ Flexbox for Android]

Demo 地址：[GitHub - JasonZhangHG/SuperTextView: SuperTextView][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);
        }
    }

实现后的效果：![76e329b090374a9b98d841403107c2f3.jpeg][]

![05ab367de3e747d1bd399c747636784c.jpeg][]

[GitHub - google_flexbox-layout_ Flexbox for Android]: https://github.com/google/flexbox-layout
[GitHub - JasonZhangHG_SuperTextView_ SuperTextView]: https://github.com/JasonZhangHG/SuperTextView.git
[76e329b090374a9b98d841403107c2f3.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/96fe1836b6fa48ee8ab2f2a8c7aa320a.jpeg
[05ab367de3e747d1bd399c747636784c.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/9080d64e0778487cb2d818c1bc895205.jpeg