Android开发弹性布局FlexboxLayout知识总结

今天分享一下弹性布局FlexboxLayout的使用总结，又是一篇个人有道云笔记转移系列。早些年我们实现一个换行的标签云、实现一个不规则的九宫格、实现一个不规整瀑布流等等这些“嘿嘿嘿”设计总是要思索半天，FlexboxLayout的出现面对这些问题将为你节省几亿个脑细胞不在话下。我第一次接触这个布局方式还是从早前一个前端写H5的小哥嘴里得到的，我顺便举一反三搜了一下发现我们Android上也有，还是google官方出品，看来知识都是相通的。好了，废话不多说，直接淦！

GitHub

官方地址： https://github.com/google/flexbox-layout

接入依赖：

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

值得注意的是从1.1.0开始，该库直接对接AndroidX，如果想要使用1.1.0及以上版本尽快升级到AndroidX咯。

简单使用方式

XML

<com.google.android.flexbox.FlexboxLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:flexWrap="wrap"
    app:alignItems="stretch"
    app:alignContent="stretch" >

    <TextView
        android:id="@+id/textview1"
        android:layout_width="120dp"
        android:layout_height="80dp"
        app:layout_flexBasisPercent="50%"/>

    <TextView
        android:id="@+id/textview2"
        android:layout_width="80dp"
        android:layout_height="80dp"
        app:layout_alignSelf="center"/>

    <TextView
        android:id="@+id/textview3"
        android:layout_width="160dp"
        android:layout_height="80dp"
        app:layout_alignSelf="flex_end"/>

</com.google.android.flexbox.FlexboxLayout>

From Code

FlexboxLayout flexboxLayout = (FlexboxLayout) findViewById(R.id.flexbox_layout);
flexboxLayout.setFlexDirection(FlexDirection.ROW);

View view = flexboxLayout.getChildAt(0);
FlexboxLayout.LayoutParams lp = (FlexboxLayout.LayoutParams) view.getLayoutParams();
lp.setOrder(-1);
lp.setFlexGrow(2);
view.setLayoutParams(lp);

FlexboxLayoutManager (within RecyclerView)

// 针对所有item
RecyclerView recyclerView = (RecyclerView) context.findViewById(R.id.recyclerview);
FlexboxLayoutManager layoutManager = new FlexboxLayoutManager(context);
layoutManager.setFlexDirection(FlexDirection.COLUMN);
layoutManager.setJustifyContent(JustifyContent.FLEX_END);
recyclerView.setLayoutManager(layoutManager);

// 针对单个item
mImageView.setImageDrawable(drawable);
ViewGroup.LayoutParams lp = mImageView.getLayoutParams();
if (lp instanceof FlexboxLayoutManager.LayoutParams) {
    FlexboxLayoutManager.LayoutParams flexboxLp = (FlexboxLayoutManager.LayoutParams) lp;
    flexboxLp.setFlexGrow(1.0f);
    flexboxLp.setAlignSelf(AlignSelf.FLEX_END);
}

相关属性

下边我直接介绍相关属性使用方法

父布局属性

以下五种是父布局中所使用的，也是最常用的。

flexDirection

flexDirection属性是决定主轴的方向。好比LinearLayout的vertical(垂直) 和 horizontal(水平)方向。

• row：一般为默认值，主轴为水平方向，起点在左端。
• row-reverse: 主轴为水平方向，起点在右端。
• column：主轴为垂直方向，起点在上沿。
• column-reverse：主轴为垂直方向，起点在下沿。

flexWrap

flexWrap属性是决定是否换行排列，默认情况下是不支持换行排列。

• nowrap：不换行。
• wrap: 正常方向换行。
• wrap-reverse: 反方向换行。

justifyContent

justifyContent指定了项目在主轴上的对齐方式。

• flex-start: 默认值为左对齐。
• flex-end: 右对齐。
• center: 居中。
• space-between: 两端对齐，其间间距相等。
• space-around: 两侧间距相等。

alignltems

alignltems指定项目在副轴（交叉轴，和主轴垂直）上的对齐方式。

• flex-start: 交叉轴的起点对齐。(上)
• flex-end: 交叉轴的终点对齐。(下)
• center: 交叉轴的中点对齐。(中间线)
• baseline: 第一行文字的基线对齐。()
• stretch: 默认值是占满整个容器的高度，在未设置高度或者为auto。

alignContent

alignContent指定多根轴线的对齐方式，如果只有一条轴，该属性不起任何作用。

• flex-start: 与交叉轴的起点对齐。
• flex-end: 与交叉轴的终点对齐。
• center: 与交叉轴的中点对齐。
• space-between: 与交叉轴的两端对齐，轴线之间的间隔分布均匀。
• space-around: 每根轴线两侧的间隔相等。
• stretch: 默认值为轴线占满整个交叉轴。

分割线

水平分割线

采用showDividerHorizontal和dividerDrawableHorizontal属性设置水平分割线

• showDividerHorizontal
  控制显示水平方向的分割线，值为none | beginning | middle | end其中的一个或者多个。
• dividerDrawableHorizontal
  设置Flex 轴线之间水平方向的分割线。

垂直分割线

采用showDividerVertical和dividerDrawableVertical属性设置垂直分割线

• showDividerVertical
  控制显示垂直方向的分割线，值为none | beginning | middle | end其中的一个或者多个。
• dividerDrawableVertical
  设置子元素垂直方向的分割线。

水平垂直分割线

采用showDivider和dividerDrawable属性同时设置水平垂直分割线

• showDivider
  控制显示水平和垂直方向的分割线，值为none | beginning | middle | end其中的一个或者多个。
• dividerDrawable
  设置水平和垂直方向的分割线，但是注意，如果同时和其他属性使用，比如为Flex轴、子元素设置了justifyContent=“space_around”、alignContent=“space_between” 等等。可能会看到意料不到的结果，因此应该避免和这些值同时使用。

子布局属性

layout_order

这个属性可以改变布局子视图的顺序。默认情况下，子元素的显示和布局顺序与布局XML中的顺序相同。如果没有指定，则将1设置为默认值( CSS 中默认值为 0) ，数值越小，排列越靠前。

layout_flexGrow

放大比例。这个属性类似于 LinearLayout 中的 layout_weight 属性，如果没有指定，则将 0 设置为默认值。如果果同一 flex 行中的多个子 View 有正的 layout_flexGrow 值，那么剩余的空闲空间将根据它们声明的 layout_flexGrow 值的比例分布。

<com.google.android.flexbox.FlexboxLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="300dp"
    android:layout_height="300dp"
    android:background="@android:color/black">

    <!--
         flex-grow（放大比例，剩余空间怎么分配) : 权重
         float FLEX_GROW_DEFAULT = 0f;

         剩余宽度 = 300 - (0 +  0 + 0) = 300
         tv1宽度 = 0 + 300 * (2 / 4) = 150
         tv2宽度 = 0 + 300 * (1 / 4) = 75
         tv3宽度 = 0 + 300 * (1 / 4) = 75
    -->

    <TextView
        android:id="@+id/tv1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="@android:color/holo_purple"
        android:gravity="center"
        android:padding="5dp"
        android:text="tv1"
        android:textColor="@android:color/white"
        app:layout_flexGrow="2" />

    <TextView
        android:id="@+id/tv2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="#FFC107"
        android:gravity="center"
        android:padding="5dp"
        android:text="tv2"
        app:layout_flexGrow="1" />

    <TextView
        android:id="@+id/tv3"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="#00BCD4"
        android:gravity="center"
        android:padding="5dp"
        android:text="tv3"
        app:layout_flexGrow="1" />

</com.google.android.flexbox.FlexboxLayout>

layout_flexShrink

缩小比例。如果所有子 View 的 layout_flexShrink 属性都为 1，当空间不足时，都将等比例缩小。如果一个项目的 layout_flexShrink 属性为0，其他子View都为 1，则空间不足时，layout_flexShrink 属性为 0 的不缩小。

<com.google.android.flexbox.FlexboxLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="300dp"
    android:layout_height="500dp"
    android:background="@android:color/black">

    <!--
        flex-shrink （缩小比例，超出空间怎么压缩）
        默认： float FLEX_SHRINK_DEFAULT = 1f;

        计算方法：
        孩子宽度和 = 150 * 3 = 450
        450 - 300 = 150 即超出父布局宽度150
        tv1最终宽度 = 自身宽度150 - 超出宽度所占比例的宽度150 * (2 / 4)  = 75
        tv2最终宽度 = 自身宽度150 - 超出宽度所占比例的宽度150 * (1 / 4)  = 112.5
        tv3最终宽度 = 自身宽度150 - 超出宽度所占比例的宽度150 * (1 / 4)  = 112.5
    -->

    <TextView
        android:id="@+id/tv1"
        android:layout_width="150dp"
        android:layout_height="wrap_content"
        android:background="@android:color/holo_purple"
        android:gravity="center"
        android:padding="5dp"
        android:text="tv1"
        android:textColor="@android:color/white"
        app:layout_flexShrink="2" />

    <TextView
        android:id="@+id/tv2"
        android:layout_width="150dp"
        android:layout_height="wrap_content"
        android:background="#FFC107"
        android:gravity="center"
        android:padding="5dp"
        android:text="tv2"
        app:layout_flexShrink="1" />

    <TextView
        android:id="@+id/tv3"
        android:layout_width="150dp"
        android:layout_height="wrap_content"
        android:background="#00BCD4"
        android:gravity="center"
        android:padding="5dp"
        android:text="tv3"
        app:layout_flexShrink="1" />

</com.google.android.flexbox.FlexboxLayout>

layout_alignSelf

子元素对齐。对齐方式，取值和align相同，覆盖align-items。

layout_alignSelf 属性可以给子元素设置对齐方式，这个属性的功能和alignItems一样，

只不过alignItems作用于所有子元素，而 layout_alignSelf 作用于单个子元素。

默认值为auto, 表示继承alignItems属性，如果为auto以外的值，则会覆盖alignItems属性。有以下6种取值：

• auto (default)
• flex_start
• flex_end
• center
• baseline
• stretch

layout_flexBasisPercent

子元素占父元素百分比。layout_flexBasisPercent的值为一个百分比，表示设置子元素的长度为它父容器长度的百分比，如果设置了这个值，那么通过这个属性计算的值将会覆盖layout_width或者layout_height的值。

但是需要注意，这个值只有设置了父容器的长度时才有效，默认值是-1。

<com.google.android.flexbox.FlexboxLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="300dp"
    android:layout_height="300dp"
    android:background="@android:color/black">

    <!--
        layout_flexBasisPercent 
        决定了在分配多余空间之前，子元素占据的主轴空间的百分比。
        默认为自身大小     
    -->

    <TextView
        android:id="@+id/tv1"
        android:layout_width="50dp"
        android:layout_height="wrap_content"
        android:background="@android:color/holo_purple"
        android:gravity="center"
        android:padding="5dp"
        android:text="tv1"
        android:textColor="@android:color/white"
        app:layout_flexBasisPercent="40%" />

    <TextView
        android:id="@+id/tv2"
        android:layout_width="50dp"
        android:layout_height="wrap_content"
        android:background="#FFC107"
        android:gravity="center"
        android:padding="5dp"
        android:text="tv2"
        app:layout_flexBasisPercent="30%" />

    <TextView
        android:id="@+id/tv3"
        android:layout_width="50dp"
        android:layout_height="wrap_content"
        android:background="#00BCD4"
        android:gravity="center"
        android:padding="5dp"
        android:text="tv3"
        app:layout_flexBasisPercent="20%" />

</com.google.android.flexbox.FlexboxLayout>

layout_minWidth / layout_minHeight

这个属性设置了子 View 的最小的宽和高。在 layout_flexShrink 模式下，再怎么缩小也不会小于这个值

layout_maxWidth / layout_maxHeight

这个属性设置了子 View 的最大的宽和高。在 layout_flexGrow 模式下，再怎么放大也不会大于这个值

layout_wrapBefore

这个属性使得子 View 可以强制换行，不管在 main size 剩余空间有多少。这种对于类似 grid 网格布局中特殊设置某一个 item 布局特别有用。默认 false。

参考

• https://github.com/google/flexbox-layout
• https://stackoverflow.com/questions/31250174/css-flexbox-difference-between-align-items-and-align-content