Recyclerview + Flexbox水平排列超出页面宽度自动换行

最新推荐文章于 2024-08-07 09:33:01 发布

七七八十一呢

最新推荐文章于 2024-08-07 09:33:01 发布

阅读量1.7k

点赞数 1

分类专栏： Android进阶文章标签： android flex css

本文链接：https://blog.csdn.net/qq_34371249/article/details/113848214

版权

本文展示了如何在Android中使用RecyclerView结合FlexboxLayout实现当item宽度超出屏幕时自动换行的效果。通过引入Google的Flexbox布局库，并添加相关依赖，可以实现类似CSS Flexbox的功能。详细代码和原理将在后续部分讲解。

摘要由CSDN通过智能技术生成

一、效果图

当item行宽度超出页面宽度的时候，自动换行

二、实现

FlexboxLayout ，github https://github.com/google/flexbox-layout
官方原话简介：FlexboxLayout is a library project which brings the similar capabilities of CSS Flexible Box Layout Module to Android.

具体属性详解，这篇博文很清楚：https://blog.csdn.net/weixin_39397471/article/details/90257522

gradle中添加依赖：

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

如果项目中没有转化为AndroidX，使用1.0.0版本

通过代码设置属性

FlexboxLayoutManager flManager = new FlexboxLayoutManager(this);
//
flManager.setFlexWrap(FlexWrap.WRAP);
//设置主轴的方向
flManager.setFlexDirection(FlexDirection.ROW);
mFlexRecyclerView.setLayoutManager(flManager);

FlexWrap.WRAP:当内容超过一行，自动换行
FlexWrap.NOWRAP:单行显示不换行，默认值
FlexWrap.WRAP_REVERSE：反向换行，下一行内容在这一行上方

/**
  * Main axis direction -> horizontal. Main start to
  * main end -> Left to right (in LTR languages).
  * Cross start to cross end -> Top to bottom
  */
FlexDirection.ROW：主轴方向按照水平方向排列

/**
  * Main axis direction -> horizontal. Main start
  * to main end -> Right to left (in LTR languages). Cross start to cross end ->
  * Top to bottom.
  */
FlexDirection.ROW_REVERSE：主轴方向按照水平方向反向排版(从右侧开始排列)

/**
  * Main axis direction -> vertical. Main start
  * to main end -> Top to bottom. Cross start to cross end ->
  * Left to right (In LTR languages).
  */
FlexDirection.COLUMN：主轴方向按竖直方向排版

/**
  * Main axis direction -> vertical. Main start
  * to main end -> Bottom to top. Cross start to cross end -> Left to right
  * (In LTR languages)
  */
FlexDirection.COLUMN_REVERSE：主轴方向按竖直方向反向排版(从下方开始排列)

具体代码：

public class FlexActivity extends AppCompatActivity implements IMoveAndSwipeCallback{

    private RecyclerView mFlexRecyclerView;
    private List<Str