FlexboxLayout

前几天看到Google官方的博客介绍了Google开源的一个强大的布局－FlexboxLayout，看见第一眼我心里的想法是，卧槽，Android 居然有这么一个强大的布局….于是就试试。。。

github地址：https://github.com/google/flexbox-layout

那么FlexboxLayout 它到底是个什么东西呢？看一下Github对这个库的介绍:FlexboxLayout is a library project which brings the similar capabilities of CSS Flexible Box Layout Module to Android. 意思是：FlexboxLayout是一个Android平台上与CSS的 Flexible box 布局模块 有相似功能的库。Flexbox 是CSS 的一种布局方案，可以简单、快捷的实现复杂布局。FlexboxLayout可以理解成一个高级版的LinearLayout，因为两个布局都把子view按顺序排列。两者之间最大的差别在于FlexboxLayout具有换行的特性。

上图：

图1

看图说话~虽然网上也有非常多的实现这种效果的开源，但是毕竟是谷歌官方出品，还是挺一下呗~~~

代码再说话：

<?xml version="1.0" encoding="utf-8"?><com.google.android.flexbox.FlexboxLayoutxmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"android:id="@+id/flexbox_layout"android:layout_width="match_parent"android:layout_height="match_parent"app:alignContent="flex_start"app:alignItems="center"app:flexDirection="row"app:flexWrap="wrap"app:justifyContent="flex_start"app:showDivider="beginning|middle"><TextView    android:layout_width="wrap_content"    android:layout_height="40dp"    android:background="@drawable/shape_tv"    android:gravity="center"    android:paddingLeft="15dp"    android:paddingRight="15dp"    android:text="程序猿"    android:textColor="@color/text_color"    app:layout_alignSelf="flex_start"    /><TextView    android:layout_width="wrap_content"    android:layout_height="40dp"    android:background="@drawable/shape_tv"    android:gravity="center"    android:paddingLeft="15dp"    android:paddingRight="15dp"    android:text="产品狗"    android:textColor="@color/text_color"    app:layout_alignSelf="flex_start"    app:layout_flexGrow="1"    /><TextView    android:layout_width="wrap_content"    android:layout_height="40dp"    android:background="@drawable/shape_tv"    android:gravity="center"    android:paddingLeft="15dp"    android:paddingRight="15dp"    android:text="攻城狮"    android:textColor="@color/text_color"    app:layout_alignSelf="flex_start"    app:layout_flexGrow="1"    /><TextView    android:layout_width="wrap_content"    android:layout_height="40dp"    android:background="@drawable/shape_tv"    android:gravity="center"    android:paddingLeft="15dp"    android:paddingRight="15dp"    android:text="码农.码农"    android:textColor="@color/text_color"    app:layout_alignSelf="flex_start"    app:layout_flexGrow="1"    /><TextView    android:layout_width="wrap_content"    android:layout_height="40dp"    android:background="@drawable/shape_tv"    android:gravity="center"    android:paddingLeft="15dp"    android:paddingRight="15dp"    android:text="广告圈"    android:textColor="@color/text_color"    app:layout_alignSelf="flex_start"    /><TextView    android:layout_width="wrap_content"    android:layout_height="40dp"    android:background="@drawable/shape_tv"    android:gravity="center"    android:paddingLeft="15dp"    android:paddingRight="15dp"    android:text="IT.射鸡师"    android:textColor="@color/text_color"    app:layout_alignSelf="flex_start"    /><TextView    android:layout_width="wrap_content"    android:layout_height="40dp"    android:background="@drawable/shape_tv"    android:gravity="center"    android:paddingLeft="15dp"    android:paddingRight="15dp"    android:text="娱乐"    android:textColor="@color/text_color"    app:layout_alignSelf="flex_start"    /><TextView    android:layout_width="wrap_content"    android:layout_height="40dp"    android:background="@drawable/shape_tv"    android:gravity="center"    android:paddingLeft="15dp"    android:paddingRight="15dp"    android:text="军事"    android:textColor="@color/text_color"    app:layout_alignSelf="flex_start"    /><TextView    android:layout_width="wrap_content"    android:layout_height="40dp"    android:background="@drawable/shape_tv"    android:gravity="center"    android:paddingLeft="15dp"    android:paddingRight="15dp"    android:text="新闻"    android:textColor="@color/text_color"    app:layout_alignSelf="flex_start"    /><TextView    android:layout_width="wrap_content"    android:layout_height="40dp"    android:background="@drawable/shape_tv"    android:gravity="center"    android:paddingLeft="15dp"    android:paddingRight="15dp"    android:text="头条"    android:textColor="@color/text_color"    app:layout_alignSelf="flex_start"    /><TextView    android:layout_width="wrap_content"    android:layout_height="40dp"    android:background="@drawable/shape_tv"    android:gravity="center"    android:paddingLeft="15dp"    android:paddingRight="15dp"    android:text="游戏"    android:textColor="@color/text_color"    app:layout_alignSelf="flex_start"    /><TextView    android:layout_width="wrap_content"    android:layout_height="40dp"    android:background="@drawable/shape_tv"    android:gravity="center"    android:paddingLeft="15dp"    android:paddingRight="15dp"    android:text="生活"    android:textColor="@color/text_color"    app:layout_alignSelf="flex_start"    app:layout_order="2"    /><TextView    android:layout_width="wrap_content"    android:layout_height="40dp"    android:background="@drawable/shape_tv"    android:gravity="center"    android:paddingLeft="15dp"    android:paddingRight="15dp"    android:text="音乐"    android:textColor="@color/text_color"    app:layout_alignSelf="flex_start"    app:layout_order="2"    /><TextView    android:layout_width="wrap_content"    android:layout_height="40dp"    android:background="@drawable/shape_tv"    android:gravity="center"    android:paddingLeft="15dp"    android:paddingRight="15dp"    android:text="人生"    android:textColor="@color/text_color"    app:layout_alignSelf="flex_start"    app:layout_order="2"    /></com.google.android.flexbox.FlexboxLayout>

属性解释一下：

针对他的属性，可以分为两类：针对自己的；针对子Item的~

针对自己的： ## Attributes for the FlexboxLayout:

flexDirection

flexDirection属性决定了主轴的方向，即FlexboxLayout里子Item的排列方向，有以下四种取值：

row (default)： 默认值，主轴为水平方向，从左到右。(图1就是默认)

row_reverse：主轴为水平方向，起点在右端，从右到左。(图2)

column：主轴为竖直方向，起点在上端，从上到下。(图3)

column_reverse：主轴为竖直方向，起点在下端，从下往上。(图4)

图1：

图2

图3

图4

flexWrap

flexWrap 这个属性决定Flexbox容器是单行还是多行，并且决定副轴（与主轴垂直的轴）的方向。可能有以下3个值：

noWrap: 不换行，一行显示完子元素。

wrap: 按正常方向换行。

wrap_reverse: 按反方向换行。

justifyContent

justifyContent 属性控制元素主轴方向上的对齐方式，有以下5种取值：

flex_start (default): 默认值，左对齐

flex_end: 右对齐

center: 居中对齐

space_between: 两端对齐，中间间隔相同

space_around: 每个元素到两侧的距离相等。

alignItems

alignItems 属性控制元素在副轴方向的对齐方式，有以下5种取值：

stretch (default) ：默认值，如果item没有设置高度，则充满容器高度。

flex_start：顶端对齐

flex_end：底部对齐

center：居中对齐

baseline：第一行内容的的基线对齐。

对子元素的属性：

layout_order

layout_order 属性可以改变子元素的排列顺序，默认情况下，FlexboxLayout子元素的排列是按照xml文件中出现的顺序。默认值为1，值越小排在越靠前。

layout_flexShrink(float)

layout_flexShrink子元素缩小比例，当空间不足时，子元素需要缩小（设置了换行则无效），默认值为1，如果所有子元素的layout_flexShrink 值为1,空间不足时，都等比缩小，如果有一个为0，其他为1，空间不足时，为0的不缩小，负值无效。

layout_flexBasisPercent (fraction)

layout_flexBasisPercent的值为一个百分比，表示设置子元素的长度为它父容器长度的百分比，如果设置了这个值，那么通过这个属性计算的值将会覆盖layout_width或者layout_height的值。但是需要注意，这个值只有设置了父容器的长度时才有效（也就是MeasureSpec mode 是 MeasureSpec.EXACTLY）。默认值时-1。

layout_minWidth / layout_minHeight (dimension)

强制限制 FlexboxLayout的子元素（宽或高）不会小于最小值，不管layout_flexShrink这个属性的值为多少，子元素不会被缩小到小于设置的这个最小值。

layout_maxWidth / layout_maxHeight (dimension)

这个和上面的刚好相反，强制限制FlexboxLayout子元素不会大于这个最大值, 不管layout_flexGrow的值为多少，子元素不会被放大到超过这个最大值。

layout_wrapBefore

layout_wrapBefore属性控制强制换行，默认值为false,如果将一个子元素的这个属性设置为true，那么这个子元素将会成为一行的第一个元素。这个属性将忽略flex_wrap 设置的 noWrap值。

详细使用介绍，还是得看官方滴~~

https://github.com/google/flexbox-layout