关于Google新的适配方式---FlexboxLayout

---

前言

工欲善其事必先利其器，学习FlexboxLayout之前，先看看它是用来干嘛的，都有哪些特性，了解之后，再来利用它。先放上项目地址--flexbox-layout的GitHub地址

---

正文

• 概念
  Flexbox，简单理解为弹性盒子，就是一个可伸缩的区域或者空间
  在GitHub上，给出的介绍是一个将CSS Flexible Box Layout Module的类似功能带入Android的库，关于CSS的Flexible Box，这里有一篇介绍比较详细的文章 ,尽管具体语法不同，但是思想是想通的，可以参考。
  FlexboxLayout可以理解成一个高级版的LinearLayout，因为两个布局都把子view按顺序排列。两者之间最大的差别在于FlexboxLayout具有换行的特性。

• 引入
  稳定版本

dependencies {
    compile 'com.google.android:flexbox:0.2.6'
}

开发测试版本 --包含了Recyclerview的集成

dependencies {
    compile 'com.google.android:flexbox:0.3.0-alpha3'
}

根据个人需求，选择合适版本

• 用法

  
    <com.google.android.flexbox.FlexboxLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:alignItems="flex_start">

        <TextView
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:background="@color/colorAccent" />

        <TextView
            android:layout_width="100dp"
            android:layout_height="150dp"
            android:background="@color/blue" />

        <TextView
            android:layout_width="100dp"
            android:layout_height="180dp"
            android:background="@color/little_pink_primary" />

        <TextView
            android:layout_width="100dp"
            android:layout_height="50dp"
            android:background="@color/black" />

        <TextView
            android:layout_width="120dp"
            android:layout_height="100dp"
            android:background="@color/orange" />

        <TextView
            android:layout_width="100dp"
            android:layout_height="80dp"
            android:background="@color/side" />

        <TextView
            android:layout_width="80dp"
            android:layout_height="200dp"
            android:background="@color/reset_check" />
    </com.google.android.flexbox.FlexboxLayout>

布局.png

可以看到类似LinearLayout，子元素是依次排列，唯一设置了属性就是app:alignItems="flex_start"，那么FlexboxLayout都有哪些属性，每个属性的作用，需要我们一点点梳理，具体分为两个方面，一方面是FlexboxLayout的属性，另一方面是FlexboxLayout子元素的属性

FlexboxLayout属性

• flexDirecition 子元素在主轴的排列方向
• app:flexDirection="row" 默认值，水平方向，起点在左，从左到右。
• app:flexDirection="row_reverse" 和row属性相反，水平方向，从右到左，起点在右端。
• app:flexDirection="column" 主轴是竖直方向，起点在上端，从上到下。
• app:flexDirection="column_reverse" 和column相反，竖直方向，起点在下方从下到上

通过四张图的对比，是明显看出来各个属性的作用的

row row_reverse column column_reverse

• alignItems 子元素在副轴的排列方向，例如：主轴水平方向--副轴竖直方向
• stretch 默认值，如果子元素未设置高度或设为auto，将占满整个父容器的高度
• flex_start：顶端对齐
• flex_end：底部对齐
• center：居中对齐
• baseline：子元素的第一行内容的基线对齐
  stretch

flex_start flex_end Paste_Image.png

根据图能很明显看出baseline的作用

baseline

• flexWrap 默认 Flex不换行，更改flexWrap可以支持换行
• nowrap不换行
• wrap 换行

• wrap_reverse 反向换行

  
  nowrap

wrap wrap_reverse

• justifyContent 元素在主轴的对齐方式
• flex_start 默认，左对齐
• flex_end 右对齐
  -center 居中对齐
• space_around 相邻元素两侧间隔相等，两侧元素和边框的间隔是两个元素间隔的一半

• space-between 两端对齐，相邻两元素间隔相等

  
  flex_start

flex_end center space_around space-between

• alignContent 存在多条副轴时，副轴轴线时的对齐方式，子元素只有一行时不起作用

• stretch 默认值，充满副轴的高度，只有副轴排列app:alignItems="stretch"时，app:alignContent="stretch"才会生效，即app:alignItems="stretch"且app:alignContent="stretch"

  
  alignContent="stretch"且app:alignItems="stretch"

• flex_start 与交叉轴的起点对齐

  
  flex_start

• flex_end 与交叉轴的终点对齐

flex_end

• center：与交叉轴的中点对齐。

center

• space_around 每根轴线两侧间隔相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍

  
  space_around

• space_between 两端对齐，轴线之间的间隔相等

  
  space_between

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

FlexboxLayout子元素属性

• layout_order
  子元素默认是按照元素的位置先后排列的，但是layout_order的值可以控制元素的排列顺序，按照数字的大小排列，例如将第三个元素layout_order 设置-1

第三个元素出现在第一个的位置

• layout_flexGrow 元素放大比例，默认为0，类似于 LinearLayout 中的layout_weight属性，根据比例等分，如果有一个子元素的 layout_flexGrow 是一个正值，那么会将全部剩余空间分配给这个Item,如果有多个Item这个属性都为正值，那么剩余空间的分配按照layout_flexGrow定义的比例等分。

• layout_flexShrink 子元素缩小比例，默认为1，当子元素多行时无效，
  如果所有子元素的layout_flexShrink 值为1,空间不足时，都等比缩小，如果有一个为0，其他为1，空间不足时，为0的不缩小，负值无效。

• layout_alignSelf 子元素的对齐方式， 允许单个子元素有与其他子元素不一样的对齐方式，可覆盖 alignItems 属性。默认值为auto，表示继承父元素的 alignItems 属性，如果没有父元素，则等同于stretch。

• auto (default) 继承父元素alignItems 属性，父元素alignItems 属性不存在则默认stretch

• flex_start 同alignItems 的flex_start属性

• flex_end 同alignItems 的flex_end属性

• center 同alignItems 的cente属性

• baseline 同alignItems 的baseline属性

• stretch 同alignItems 的stretch属性

• layout_flexBasisPercent 子元素占父容器长度的百分比，覆盖了子元素自身的layout_width或layout_height，前提是父容器的长度或者宽度设置了值，否则无效

layout_flexBasisPercent

• **layout_minWidth / layout_minHeight ** 强制限定子元素的最小宽度或者最小高度，即使layout_flexShrink缩小比例，也会保证不小于子元素宽度或者高度的最小值

• **layout_maxWidth / layout_maxHeight ** 强制限定子元素的最大宽度或者最大高度，即使layout_flexGrow放大比例，也会保证不大于子元素宽度或者高度的最大值

• layout_wrapBefore 强制换行，即使父容器设置了flex_wrap=nowrap,依然将当前元素换到下一行的第一个元素显示。

上面讲到FlexboxLayout有两个版本，内部测试版，添加了与Recyclerview的结合。