FlexboxLayout——花樣瀑布流

項目需要實現(xiàn)一個瀑布流的功能，正好了解到FlexboxLayout布局许溅，便準(zhǔn)備用FlexboxLayout來實現(xiàn)

一、什么是FlexboxLayout

看一下Github對這個庫的介紹:FlexboxLayout is a library project which brings the similar capabilities ofCSS Flexible Box Layout Moduleto Android. 意思是：FlexboxLayout是一個Android平臺上與CSS的 Flexible box 布局模塊有相似功能的庫童谒。Flexbox 是CSS 的一種布局方案纫溃，可以簡單、快捷的實現(xiàn)復(fù)雜布局赁酝。FlexboxLayout可以理解成一個高級版的LinearLayout犯祠，因為兩個布局都把子view按順序排列。兩者之間最大的差別在于FlexboxLayout具有換行的特性酌呆。

二雷则、 FlexboxLayout效果圖

image

三、FlexboxLayout重要屬性

1.flexDirection:

flexDirection屬性決定了主軸的方向肪笋，即FlexboxLayout里子Item的排列方向，有以下四種取值：

row (default)：默認(rèn)值度迂，主軸為水平方向藤乙，從左到右。

row_reverse：主軸為水平方向惭墓，起點在有端坛梁，從右到左。

column：主軸為豎直方向腊凶，起點在上端划咐，從上到下拴念。

column_reverse：主軸為豎直方向，起點在下端褐缠，從下往上政鼠。

2.flexWrap

flexWrap 這個屬性決定Flex 容器是單行還是多行，并且決定副軸（與主軸垂直的軸）的方向队魏。可能有以下3個值：

noWrap: 不換行公般，一行顯示完子元素。

wrap: 按正常方向換行胡桨。

wrap_reverse: 按反方向換行官帘。

3.justifyContent

justifyContent 屬性控制元素主軸方向上的對齊方式，有以下5種取值：

flex_start (default): 默認(rèn)值昧谊，左對齊

flex_end: 右對齊

center: 居中對齊

space_between: 兩端對齊刽虹，中間間隔相同

space_around: 每個元素到兩側(cè)的距離相等。

4.alignItems

alignItems 屬性控制元素在副軸方向的對齊方式呢诬，有以下5種取值：

stretch (default) ：默認(rèn)值涌哲，如果item沒有設(shè)置高度，則充滿容器高度馅巷。

flex_start：頂端對齊

flex_end：底部對齊

center：居中對齊

baseline：第一行內(nèi)容的的基線對齊

5.alignContent

alignContent 屬性控制多根軸線的對齊方式(也就是控制多行膛虫，如果子元素只有一行，則不起作用)钓猬，可能有以下6種取值：

stretch (default): 默認(rèn)值稍刀，充滿交叉軸的高度（測試發(fā)現(xiàn)，需要alignItems 的值也為stretch 才有效）敞曹。

flex_start: 與交叉軸起點對齊账月。

flex_end: 與交叉軸終點對齊。

center: 與交叉軸居中對齊澳迫。

space_between: 交叉軸兩端對齊局齿，中間間隔相等。

space_around: 到交叉軸兩端的距離相等橄登。

以下介紹幾個子元素支持的重要屬性

layout_flexGrow(float)

layout_flexGrow 子元素的放大比例抓歼，決定如何分配剩余空間（如果存在剩余空間的話），默認(rèn)值為0,不會分配剩余空間拢锹，如果有一個item的 layout_flexGrow 是一個正值谣妻，那么會將全部剩余空間分配給這個Item,如果有多個Item這個屬性都為正值，那么剩余空間的分配按照layout_flexGrow定義的比例（有點像LinearLayout的layout_weight屬性）卒稳。

layout_flexBasisPercent (fraction)

layout_flexBasisPercent的值為一個百分比蹋半，表示設(shè)置子元素的長度為它父容器長度的百分比，如果設(shè)置了這個值充坑，那么通過這個屬性計算的值將會覆蓋layout_width或者layout_height的值减江。但是需要注意染突，這個值只有設(shè)置了父容器的長度時才有效（也就是MeasureSpec mode 是 MeasureSpec.EXACTLY）。默認(rèn)值時-1辈灼。

四份企，如何實現(xiàn)

1、添加依賴

compile 'com.google.android:flexbox:1.0.0'

2.布局文件


    xmlns:app="http://schemas.android.com/apk/res-auto"

    android:id="@+id/flexbox_layout"

    android:layout_width="wrap_content"

    android:layout_height="match_parent"

    app:alignContent="stretch"

    app:flexDirection="row"

    app:flexWrap="wrap">

        android:id="@+id/text1"

        android:layout_width="wrap_content"

        android:layout_height="100dp"

        android:text="1"

        app:layout_flexGrow="1.0" />

        android:id="@+id/text2"

        android:layout_width="wrap_content"

        android:layout_height="match_parent"

        android:text="2"

        app:layout_wrapBefore="true" />

        android:id="@+id/text3"

        android:layout_width="wrap_content"

        android:layout_height="match_parent"

        android:text="3" />

</com.google.android.flexbox.FlexboxLayout>

也可以通過代碼設(shè)置排列方向等：


flexboxLayout.setFlexDirection(FlexDirection.ROW);

View view = flexboxLayout.getChildAt(0);

FlexboxLayout.LayoutParams lp = (FlexboxLayout.LayoutParams) view.getLayoutParams();

lp.order = -1;

lp.flexGrow = 2;

view.setLayoutParams(lp);```

## 五茵休、 RecyclerView 的支持

#### 1.在布局文件中放入recyclerView就行了

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="match_parent"

android:layout_height="match_parent">

    android:id="@+id/test_recyclerView"

    android:layout_width="match_parent"

    android:layout_height="match_parent"/>

2.設(shè)置recylerView的LayoutManager


RecyclerViewmRecyclerView=(RecyclerView)findViewById(R.id.test_recyclerView);FlexboxLayoutManagerlayoutManager=newFlexboxLayoutManager();layoutManager.setFlexWrap(FlexWrap.WRAP);//設(shè)置是否換行 layoutManager.setFlexDirection(FlexDirection.ROW);// 設(shè)置主軸排列方式layoutManager.setAlignItems(AlignItems.STRETCH);layoutManager.setJustifyContent(JustifyContent.FLEX_START);mRecyclerView.setLayoutManager(layoutManager);

3.Adapter 中綁定 View 的時候薪棒，設(shè)置子元素的屬性


if (lp instanceof FlexboxLayoutManager.LayoutParams) {

    FlexboxLayoutManager.LayoutParams flexboxLp = (FlexboxLayoutManager.LayoutParams) lp;

    flexboxLp.setFlexGrow(1.0f);

    flexboxLp.setAlignSelf(AlignSelf.FLEX_END);

}