android recyclerview流式布局,Android FlexboxLayout流式布局

Android FlexboxLayout流式布局

FlexBoxLayout是为Android带来了与 CSS Flexible Box Layout(CSS 弹性盒子)相似功能的库。

一：添加依赖

如果迁移的AndroidX中dependencies {

implementation 'com.google.android:flexbox:2.0.1'

}

否则：dependencies {

implementation 'com.google.android:flexbox:1.0.0'

}

二：实例：

布局添加：

android:layout_width="match_parent"

android:layout_height="wrap_content"

app:flexWrap="wrap">

style="@style/TextStyle"

android:text="你真的这样的世界吗"/>

style="@style/TextStyle"

android:text="你真的了解中国吗" />

style="@style/TextStyle"

android:text="你真的了解你自己吗"/>

style="@style/TextStyle"

android:text="你了解你的父母吗" />

style="@style/TextStyle"

android:text="你..." />

style="@style/TextStyle"

android:text="我...." />

style="@style/TextStyle"

android:text="他...." />

TextStyle 布局风格

5dp

wrap_content

wrap_content

@drawable/shape_border

end

1

8dp

@android:color/black

在drawable下创建shape_border.xml<?xml version="1.0" encoding="utf-8"?>

三、FlexboxLayout属性介绍app:flexWrap="nowrap"//该属性表示是否换行和换行的方向

flexWrap属性一共有三个枚举值，分别是nowrap、wrap和wrap_reverse

nowrap:单行显示，不换行，默认就是这个属性。

wrap：当内容超过一行时，自动换行。

wrap_reverse ：反向换行(下一行内容在当前行之上)

app:flexDirection="column"//主轴方向按竖直(列)方向排版。效果：

column_reverse : 主轴方向按竖直(列)方向反向排版(从下向上)。

row : 主轴方向按水平(行)方向排版，默认就是这个属性

row_reverse : 主轴方向按水平(行)方向反向排版

app:justifyContent="flex_start"

关于这个属性，官方有一段说明：

作用是控制元素在主轴上的对齐方式，需要配合flexDirection或flexWrap属性来使用。

看一下源码，可见app:justifyContent属性有flex_start、flex_end、center、space_between、space_around和space_evenly6个枚举值。

android:layout_height="wrap_content"

app:flexWrap="wrap"

app:flexDirection="row"

app:justifyContent="flex_end">

app:flexDirection 得是row 是column 没效果

flex_start: 左对齐，默认值。

flex_end : 右对齐。

center：居中对齐。

space_between: 两端对齐。

space_around : 分散对齐。

space_evenly:子元素在一行内均匀分布空间。

4.app:alignItems="stretch"//该属性表示元素在每条轴线上的对齐方式。

注意：如果设置了alignContent，且值不为stretch,那么该属性失效。

我们改变每一子View的布局Padding 看看效果

style="@style/TextStyle"

android:text="你真的这样的世界吗"

android:padding="10dp"/>

style="@style/TextStyle"

android:text="你真的了解中国吗"

android:padding="20dp"/>

style="@style/TextStyle"

android:text="你真的了解你自己吗"

android:padding="5dp"/>

style="@style/TextStyle"

android:text="你了解你的父母吗"

android:padding="15dp"/>

app:alignItems属性有flex_start、flex_end、center、baseline和stretch

stretch: 默认值，如果子元素未设置高度，则沾满父布局高度。

flex_start :顶端对齐

flex_end :底端对齐。

center : 居中对齐。

baseline :按照第一个元素的基线对齐。

下面这张图片可以很直观的表达这个属性的作用

app:alignContent="stretch"//该属性表示每条轴线在整个布局中的对齐方式。

app:alignContent属性有flex_start、flex_end、center、space_between、space_around和stretch6个枚举值。stretch:默认值，轴线占满整个父布局。

flex_start:顶部对齐所有轴线

flex_end:底部对齐所有轴线。

center:居中对齐所有轴线。

space_between:两端对齐所有轴线。

space_around:分散对齐所有轴线。

6.dividerDrawable (reference)//水平和竖直方向分割线。dividerDrawableHorizontal / dividerDrawableVertical (reference)//水平/竖直方向分割线。

app:showDivider="middle"//显示水平和竖直方向分割线方式。

android:layout_width="match_parent"

android:layout_height="wrap_content"

app:flexWrap="wrap"

app:flexDirection="row"

app:alignItems="flex_start"

app:dividerDrawable="@color/red"

app:showDivider="middle">

9.app:layout_order="2"//指定子元素排序优先级，值越小越排在前面，默认值为1。设置值类型为float。

style="@style/TextStyle"

android:text="你真的这样的世界吗"

android:padding="10dp"

app:layout_order="2"

/>

这样的话这样一条就排到最后去了app:layout_flexShrink="0"

子元素缩放比例，如果设置了换行(flexWrap=“wrap或wrap_reverse”)则该属性无效。

设置值类型为float，0表示不缩放，数值越大，缩放比例越大，默认为1，负值无效。

app:layout_flexGrow="0"

分配同一轴线剩余控件所占权重，默认值为0，表示不参与分配。用法类似于LinearLayout的weight，不过weight分配的是整个父布局控件，而layout_flexGrow分配的是同一行/列的剩余空间。

四：与RecyclerView配合使用public class FourActivity extends AppCompatActivity {

private RecyclerView recycler;

private FlexAdapter flexAdapter;

private List mDatas=new ArrayList<>();

@Override

protected void onCreate(@Nullable Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_four_one);

initData();

recycler= findViewById(R.id.recycler);

FlexboxLayoutManager manager=new FlexboxLayoutManager(this);

//设置主轴排列方式

manager.setFlexDirection(FlexDirection.ROW);

//设置是否换行

manager.setFlexWrap(FlexWrap.WRAP);

//manager.setAlignItems(AlignItems.FLEX_END);

recycler.setLayoutManager(manager);

flexAdapter=new FlexAdapter(this,mDatas);

recycler.setAdapter(flexAdapter);

}

private void initData() {

mDatas.add("我真的ok");

mDatas.add("你好世界");

mDatas.add("世界");

mDatas.add("你是一个AAA什么");

mDatas.add("我真的AAAok");

mDatas.add("你好世界AAA");

mDatas.add("世界AAA");

mDatas.add("你是一个什么AAA");

}

}

FlexboxLayoutManager 可以替换其他布局管理器实现流式布局

由于RecyclerView 的一些特性，Flexbox 的一些属性在FlexboxLayoutManager中没有实现，下面是FlexboxLayout和FlexboxLayoutManager支持的属性的对比：

END:螃蟹在剥我的壳,笔记本在写我。漫天的我落在枫叶上雪花上。而你在想我。