玩转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"?>

    name="FlexboxLayout">

        
        name="flexDirection">

            name="row" value="0"/>  

            name="row_reverse" value="1"/> 

            name="column" value="2"/> 

            name="column_reverse" value="3"/> 

        

        
        name="flexWrap">
            name="nowrap" value="0"/> 
            name="wrap" value="1"/>   
            name="wrap_reverse" value="2"/>  
        

        
        name="justifyContent">

            name="flex_start" value="0"/>  
            name="flex_end" value="1"/>    
            name="center" value="2"/>      
            name="space_between" value="3"/> 
            name="space_around" value="4"/>  

        

        
        name="alignItems">

            name="flex_start" value="0"/> 

            name="flex_end" value="1"/>   

            name="center" value="2"/>     

            name="baseline" value="3"/>   

            name="stretch" value="4"/>    

        

name="alignContent">

    name="flex_start" value="0"/> 

    name="flex_end" value="1"/>   

    name="center" value="2"/>     

    name="space_between" value="3"/>  

    name="space_around" value="4"/>   

    name="stretch" value="5"/>        

    

    
    name="FlexboxLayout_Layout">


        
        format="integer" name="layout_order"/>

        
        format="float" name="layout_flexGrow"/>

        
        format="float" name="layout_flexShrink"/>

        
        format="fraction" name="layout_flexBasisPercent"/>

        
        name="layout_alignSelf">

            name="auto" value="-1"/>
            name="flex_start" value="0"/>
            name="flex_end" value="1"/>
            name="center" value="2"/>
            name="baseline" value="3"/>
            name="stretch" value="4"/>

        

    

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

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