玩转Google新开源项目：FlexboxLayout

Google在前些天新开源了一个Android项目：FlexboxLayout。带着好奇心，我也对FlexboxLayout一探究竟。Flexbox是在Css3中出现的Style样式，用于定义一个可伸缩的盒子模型布局。它有以下几个特点：（1）Flexbox是布局模块，而不是一个简单的属性，它包含父元素和子元素的属性。（2）布局的主体思想是元素可以改变大小以适应可用空间，当可用空间变大，Flex元素将拉伸大小以填充可用空间，当Flex元素超出可用空间时将自动缩小。总之，Flex元素是可以让你的布局根据浏览器的大小变化进行自动伸缩。以上就是在CSS3中Flexbox的两个主要特点。那么Google也想，是不是同样可以仿照CSS3中Flexbox效果实现于Android布局呢？所以FlexboxLayout就此诞生。首先，我们来看一张图（此图来源自：详解CSS3弹性盒模型（Flexbox））从上图可以看到，布局非常类似LinearLayout在为子元素设置了weight情况下的效果。左对齐、右对齐、居中对齐、等比例排布、间隔排布等等。其实FlexboxLayout要比LinearLayout所实现的效果还要强大，还记得鸿洋大神写过的一个FlowLayout流式布局吗？没错，用FlexboxLayout同样可以轻松实现这样的效果（比如，搜索结果Tag标签等等。。）ok，下面进入主题。1.引用方式：在项目的gradle中直接引用：

compile

'com.google.android:flexbox:0.1.2'

2.使用方式：使用方式和大部分Android提供的widget大同小异，即xml布局使用和代码中使用。（1）XML布局：（2）代码中使用：接下来，我们来看看FlexboxLayout所具有的属性：

<?xml version="1.0" encoding="utf-8"?><resources><declare-styleable name="FlexboxLayout"><!-- flexDirection: 项目的排列方向,类似 LinearLayout 的 vertical 和 horizontal --><attr name="flexDirection"><enum name="row" value="0"/>  <!-- 水平方向，起点在左端 --><enum name="row_reverse" value="1"/> <!-- 水平方向，起点在右端 --><enum name="column" value="2"/> <!-- 垂直方向，起点在左端 --><enum name="column_reverse" value="3"/> <!-- 垂直方向，起点在右端 --></attr>

<!-- flexWrap: 默认情况下 Flex 跟 LinearLayout 一样，都是不带换行排列的，但是flexWrap属性可以支持换行排列 --><attr name="flexWrap"><enum name="nowrap" value="0"/> <!-- 不换行 （默认） --><enum name="wrap" value="1"/>   <!-- 正方向换行 --><enum name="wrap_reverse" value="2"/>  <!-- 反方向换行 --></attr>

<!-- justifyContent: 对齐方式 --><attr name="justifyContent"><enum name="flex_start" value="0"/>  <!-- 左对齐 --><enum name="flex_end" value="1"/>    <!-- 右对齐 --><enum name="center" value="2"/>      <!-- 居中 --><enum name="space_between" value="3"/> <!-- 两端对齐，View之间的间隔都相等 --><enum name="space_around" value="4"/>  <!-- View两侧的间隔相等。所以，View之间的间隔比View距离边界的间隔大一倍。 --></attr>

<!-- alignItems: View在Y轴上的对齐方式 --><attr name="alignItems"><enum name="flex_start" value="0"/> <!-- Y轴的起点对齐 --><enum name="flex_end" value="1"/>   <!-- Y轴的终点对齐 --><enum name="center" value="2"/>     <!-- Y轴的中心对齐 --><enum name="baseline" value="3"/>   <!-- View中的第一行文字的基线对齐 --><enum name="stretch" value="4"/>    <!-- 如果View未设置高度或设为auto，将占满整个容器的高度 --></attr>

<!-- alignContent: 定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。--><attr name="alignContent"><enum name="flex_start" value="0"/> <!-- 与交叉轴的起点对齐 --><enum name="flex_end" value="1"/>   <!-- 与交叉轴的终点对齐 --><enum name="center" value="2"/>     <!-- 与交叉轴的中心对齐 --><enum name="space_between" value="3"/>  <!-- 与交叉轴两端对齐，轴线之间的间隔平均分布。 --><enum name="space_around" value="4"/>   <!-- 每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。 --><enum name="stretch" value="5"/>        <!-- 轴线占满整个交叉轴 --></attr>

</declare-styleable><!--  控制子元素的属性 --><declare-styleable name="FlexboxLayout_Layout"><!--默认情况下子元素的排列方式按照文档流的顺序依次排序，而order属性可以控制排列的顺序，负值在前，正值在后，按照从小到大的顺序依次排列。我们说之所以 FlexboxLayout 相对LinearLayout强就是因为一些属性比较给力，order就是其中之一。--><attr format="integer" name="layout_order"/><!-- 定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。跟 LinearLayout 中的weight属性一样layout_flexGrow  属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的 layout_flexGrow  属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。--><attr format="float" name="layout_flexGrow"/><!--定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。如果所有项目的 layout_flexShrink  属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。负值对该属性无效。--><attr format="float" name="layout_flexShrink"/><!--定义了在分配多余空间之前，子元素占据的main size主轴空间.浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即子元素的本来大小。--><attr format="fraction" name="layout_flexBasisPercent"/><!--允许单个子元素有与其他子元素不一样的对齐方式，可覆盖 alignItems 属性。默认值为auto，表示继承父元素的 alignItems 属性，如果没有父元素，则等同于stretch。该属性可取6个值，除了auto，其他都与align-items属性完全一致。--><attr name="layout_alignSelf"><enum name="auto" value="-1"/><enum name="flex_start" value="0"/><enum name="flex_end" value="1"/><enum name="center" value="2"/><enum name="baseline" value="3"/><enum name="stretch" value="4"/></attr></declare-styleable></resources>

ok，关于FlexboxLayout基本的介绍就到这里，更详细的介绍可以看这篇文章：http://mp.weixin.qq.com

大家可以在自己的项目中尽情使用啦！