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'}二：实例：
布局增加：
<com.google.android.flexbox.FlexboxLayout android:layout_width="match_parent" android:layout_height="wrap_content" app:flexWrap="wrap"> <TextView style="@style/TextStyle" android:text="你真的这样的世界吗"/> <TextView style="@style/TextStyle" android:text="你真的理解中国吗" /> <TextView style="@style/TextStyle" android:text="你真的理解你本人吗"/> <TextView style="@style/TextStyle" android:text="你理解你的父母吗" /> <TextView style="@style/TextStyle" android:text="你..." /> <TextView style="@style/TextStyle" android:text="我...." /> <TextView style="@style/TextStyle" android:text="他...." /> </com.google.android.flexbox.FlexboxLayout>TextStyle 布局格调
<style name="TextStyle"> <item name="android:layout_margin">5dp</item> <item name="android:layout_width">wrap_content</item> <item name="android:layout_height">wrap_content</item> <item name="android:background">@drawable/shape_border</item> <item name="android:ellipsize">end</item> <item name="android:maxLines">1</item> <item name="android:padding">8dp</item> <item name="android:textColor">@android:color/black</item>在drawable下创立shape_border.xml
<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android"> <corners android:radius="12dp"/> <stroke android:color="@color/red" android:width="2dp"/></shape>三、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"
对于这个属性，官网有一段阐明：
<!-- Omitting flex-flow property since it's reflected in the parent flex container. Set the flexDirection and/or flexWrap to the parent flex container explicitly if you want to use the flex-flow similar way to the web. -->作用是管制元素在主轴上的对齐形式，须要配合flexDirection或flexWrap属性来应用。
看一下源码，可见app:justifyContent属性有flex_start、flex_end、center、space_between、space_around和space_evenly6个枚举值。
<com.google.android.flexbox.FlexboxLayout
android:layout_width="match_parent" 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 看看成果
<TextView style="@style/TextStyle" android:text="你真的这样的世界吗" android:padding="10dp"/> <TextView style="@style/TextStyle" android:text="你真的理解中国吗" android:padding="20dp"/> <TextView style="@style/TextStyle" android:text="你真的理解你本人吗" android:padding="5dp"/> <TextView 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"//显示程度和竖直方向分割线形式。
<com.google.android.flexbox.FlexboxLayout 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。
<TextView 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<String> 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:螃蟹在剥我的壳,笔记本在写我。漫天的我落在枫叶上雪花上。而你在想我。