[置顶] 玩转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

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