乐趣区

关于android:Android-FlexboxLayout流式布局

jiezi

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 属性介绍

  1. app:flexWrap=”nowrap”// 该属性示意是否换行和换行的方向
    flexWrap 属性一共有三个枚举值，别离是 nowrap、wrap 和 wrap_reverse
    nowrap: 单行显示，不换行，默认就是这个属性。
    wrap：当内容超过一行时，主动换行。
    wrap_reverse：反向换行（下一行内容在以后行之上）
  2. app:flexDirection=”column”// 主轴方向按竖直（列）方向排版。成果：

    column_reverse : 主轴方向按竖直（列）方向反向排版（从下向上）。
    row : 主轴方向按程度（行）方向排版，默认就是这个属性
    row_reverse : 主轴方向按程度（行）方向反向排版
  3. 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 : 依照第一个元素的基线对齐。
上面这张图片能够很直观的表白这个属性的作用

  1. 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）// 程度和竖直方向分割线。

  1. dividerDrawableHorizontal / dividerDrawableVertical（reference）// 程度 / 竖直方向分割线。

  2. 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"
            />

这样的话这样一条就排到最初去了

  1. app:layout_flexShrink=”0″
    子元素缩放比例，如果设置了换行（flexWrap=“wrap 或 wrap_reverse”）则该属性有效。
    设置值类型为 float，0 示意不缩放，数值越大，缩放比例越大，默认为 1，负值有效。
  2. 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: 螃蟹在剥我的壳, 笔记本在写我。漫天的我落在枫叶上雪花上。而你在想我。

退出移动版