Android上的Flexbox布局

这篇文章主要参考了官方文档和阮老师的Flex 布局教程：语法篇

github地址

简介

最近Google开源了一个叫flex-box的库，它的思路是参照的CSS的Flex布局设计的，因此属性基本都是和CSS上的Flex布局保持一致，但由于是两个不一样的平台，因此减小了几个不适用于Android的属性，新增了几个属性，具体咱们下面会说到。

关于CSS的Flex布局

在了解Google开源的flex-box，我以为有必要先了解下CSS的Flex布局，这有助于咱们理解那些属性定义。关于这方面的知识，能够阅读这篇博客。下面咱们只是简要的了解下，具体属性咱们放到讲解Google的flex-box中去说明。

//这段文字说明，来源于上面说到的博客
采用Flex布局的元素，称为Flex容器（flex container），简称"容器"。它的全部子元素自动成为容器成员，称为Flex项目（flex item），简称"项目"。
容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫作main start，结束位置叫作main end；交叉轴的开始位置叫作cross start，结束位置叫作cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫作main size，占据的交叉轴空间叫作cross size。复制代码

概念

关于Google的flexbox-layout

注意：如下文中用到的flexbox-layout指的是Google开源的库，Flex指的是CSS中的Flex布局。

首先咱们须要知道的是，flexbox-layout的基本概念和Flex是同样的，最外面的这层布局称为容器，在flexbox-layout指的是com.google.android.flexbox.FlexboxLayout，里面的子元素称为项目。容器默认存在两条轴，其中水平(这里是就上面的概念图而言，由于主轴的方向是能够指定的)的这条轴称为主轴(我的理解，能够存在多条，具体缘由后面讲)，垂直的这条称为交叉轴。其余属性好比start，end等等也是同样的，具体能够看上面的基本概念图。

下面咱们着重讲下flexbox-layout支持的属性，由于它既支持容器属性，也支持项目属性，因此咱们分红两个篇幅来讲明。

注意：如下属性设置的具体效果请参照说明文档和Demo，github地址

容器属性

• flexDirection

  这个属性用于肯定主轴方向，可选的值有：

  1. row 水平方向，起点在左边。默认值
  2. row_revers 水平方向，起点在右边。
  3. column 垂直方向，起点在上边。
  4. column_reverse 垂直方向，起点在下边。

  

  flexDirection

• flexWrap

  这个属性控制容器是单行仍是自动换行，以及主轴的方向，可选的值有：

  1. nowrap 单行。默认值
  2. wrap 自动换行，第一行在上方
  3. wrap-reverse 自动换行，第一行在下方

  关于wrap和wrap-reverse的区别：

  

  wrap

  

  wrap-reverse

• justifyContent

  这个属性控制项目在主轴上的对齐方式，可选的值有：

  注意：具体的对齐方式与主轴的方向有关，下面的说明是基于默认值

  1. flex_start 左对齐，默认值
  2. flex_end 右对齐
  3. center 居中对齐
  4. space_between 两端对齐，项目之间的间隔相等
  5. space_around 每一个项目两侧的间隔相等。因此，项目之间的间隔比项目与边框的间隔大一倍

  关于space_between和space_around的样式以下：

  

  space_between

  

  space_around

• alignItems

  这个属性定义项目在交叉轴上的对齐方式，可选的值有：

  注意：具体的对齐方式与主轴的方向有关

  1. stretch 占满整个容器高度，默认值
  2. flex_start 交叉轴的起点对齐
  3. flex_end 交叉轴的终点对齐
  4. center 居中对齐
  5. baseline 项目的第一行文字的基线对齐

  关于stretch和baseline的样式以下：

  

  stretch

  

  baseline

• alignContent

  这个属性控制容器的多条主轴的对齐方式，这也是咱们前面提到的主轴能够有多条，当flexWrap:wrap|wrapreverse。可选的值有：

  注意：只有一条主轴，该属性不起做用

  1. stretch 占满整个交叉轴，默认值
  2. flex_start 与交叉轴的起点对齐
  3. flex_end 与交叉轴的终点对齐
  4. center 与交叉轴的中心对齐
  5. space_between 与交叉轴两端对齐，轴线之间的间隔平均分布
  6. space_around 每根轴线两侧的间隔都相等。因此，轴线之间的间隔比轴线与边框的间隔大一倍

  这里须要注意区别下和alignItems的区别，alignContent是多条主轴基于交叉轴的对齐方式，然后者是项目基于交叉轴的对齐方式，一个是轴，一个是项目。

• showDividerHorizontal

• dividerDrawableHorizontal

• showDividerVertical

• dividerDrawableVertical

• showDivider

• dividerDrawable

  这几个属性都是跟分隔符有关，具体用法能够看文档。

项目属性

• layout_order(integer)

  这个属性能够改变项目的排列顺序，默认值为1。

• layout_flexGrow(float)

  这个属性定义项目基于当前行的放大比例，默认值为0。这个属性相似LinearLayout中的layout_weight属性，若是当前行只有一个项目的layout_flexGrow为正值，则该项目将占满当前行剩余的空间，下面的效果是三个相同大小的项目，其中一个layout_flexGrow为正值的效果：

  

  layout_flexGrow1

  若是存在多个layout_flexGrow为正值的状况，则这几个项目则会按设置的值为比例占用当前行剩余的空间，下面的效果是三个相同大小的项目，其中两个项目设置layout_flexGrow:1的效果：

  

  layout_flexGrow2

• layout_flexShrink (float)

  这个属性定义了项目的缩小比例，默认为1，即若是当前行空间不足，该项目缩小的方式。

  若是全部项目的layout_flexShrink属性都为1，当空间不足时，都将等比例缩小。若是一个项目的layout_flexShrink属性为0，其余项目都为1，则空间不足时，前者不缩小。

  我的理解，注意：要设置flexWrap:nowrap为单行

• layout_alignSelf

  该属性容许单个项目与其余项目不同的基于交叉轴的对齐方式。默认值为auto，即按照容器的alignItems属性，设置其余值，则会覆盖容器的值，可选的值：

  1. auto 默认值
  2. flex_start
  3. flex_end
  4. center
  5. baseline
  6. stretch

• layout_flexBasisPercent (fraction)

  这个属性设置项目长度相对于容器的百分比，若是设置了这个值，则从layout_width或layout_height指定的长度会被覆盖，须要注意的是，这个属性只在容器长度肯定的状况下有效，即MeasureSpec.EXACTLY。默认值为-1，表示不设置。

• layout_minWidth / layout_minHeight (dimension)

• layout_maxWidth / layout_maxHeight (dimension)

  这些属性设置对项目的最大最小限制

• layout_wrapBefore (boolean)

  这个属性默认值为false，若是设置为true，则该项目将强制成为当前行的第一个项目，会忽略flex_wrap:nowrap设置。

应用实例

1. 底部按钮

   

   底部按钮

2. 流式布局

   

   流式布局

TODO