FlexboxLayout——Android彈性布局

FlexboxLayout是一個Android平台上與CSS的 Flexible box 彈性盒子布局模塊 有相似功能的庫。Flexbox 是CSS 的一種布局方案，可以簡單、快捷的實現復雜布局。

FlexboxLayout項目開源地址：https://github.com/google/flexbox-layout

效果如圖下：

 　　　　　　

項目中添加依賴

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

FlexboxLayout 常用屬性

flexDirection

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

1. row (default)： 默認值，主軸為水平方向，從左到右。
2. row_reverse：主軸為水平方向，起點在有端，從右到左。
3. column：主軸為豎直方向，起點在上端，從上到下。
4. column_reverse：主軸為豎直方向，起點在下端，從下往上。

 <com.google.android.flexbox.FlexboxLayout
        android:id="@+id/flexbox_layout4"
        android:layout_width="match_parent"
        android:layout_height="119dp"
        android:layout_marginTop="9dp"
        app:flexDirection="column">
.................

 

flexWrap

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

1. noWrap: 不換行，一行顯示完子元素。
2. wrap: 按正常方向換行。
3. wrap_reverse: 按反方向換行。

 <com.google.android.flexbox.FlexboxLayout
        android:id="@+id/flexbox_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:flexWrap="wrap"
        >
     ...............

 

justifyContent

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

1. flex_start (default): 默認值，左對齊
2. flex_end: 右對齊
3. center: 居中對齊
4. space_between: 兩端對齊，中間間隔相同
5. space_around: 每個元素到兩側的距離相等。

<com.google.android.flexbox.FlexboxLayout
        android:id="@+id/flexbox_layout2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:justifyContent="space_between"
        >
............

 

alignItems

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

1. stretch (default) ：默認值，如果item沒有設置高度，則充滿容器高度。
2. flex_start：頂端對齊
3. flex_end：底部對齊
4. center：居中對齊
5. baseline：第一行內容的的基線對齊

 <com.google.android.flexbox.FlexboxLayout
        android:id="@+id/flexbox_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="9dp"
        app:alignItems="flex_start">
..........................

 

alignContent

alignContent 屬性控制多根軸線的對齊方式(也就是控制多行，如果子元素只有一行，則不起作用（針對多行元素），表示控件在副軸上的對齊方向，默認值為stretch，表示占滿整個副軸，因為上文中我把FlexboxLayout的高度設置為包裹內容，所以這個屬性大家可能沒看到效果，這里我把FlexboxLayout的高度改為match_parent，可能有以下6種取值：

1. stretch (default): 默認值，充滿交叉軸的高度（測試發現，需要alignItems 的值也為stretch 才有效）。
2. flex_start: 與交叉軸起點對齊。
3. flex_end: 與交叉軸終點對齊。
4. center: 與交叉軸居中對齊。
5. space_between: 交叉軸兩端對齊，中間間隔相等。
6. space_around: 到交叉軸兩端的距離相等。

 <com.google.android.flexbox.FlexboxLayout
        android:id="@+id/flexbox_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:alignContent="flex_start"
        app:flexWrap="wrap"
        app:alignItems="center"
        >
..............

 

 

子元素的屬性

layout_order

layout_order 屬性可以改變子元素的排列順序，默認情況下，FlexboxLayout子元素的排列是按照xml文件中出現的順序。默認值為1，值越小排在越靠前。

 

layout_flexGrow(float)

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

 

layout_flexShrink(float)

layout_flexShrink:子元素縮小比例，當空間不足時，子元素需要縮小（設置了換行則無效），默認值為1，如果所有子元素的layout_flexShrink 值為1,空間不足時，都等比縮小，如果有一個為0，其他為1，空間不足時，為0的不縮小，負值無效。

 

layout_alignSelf

layout_alignSelf 屬性可以給子元素設置對齊方式，上面講的alignItems屬性可以設置對齊，這個屬性的功能和alignItems一樣，只不過alignItems作用於所有子元素，而 layout_alignSelf 作用於單個子元素。默認值為auto, 表示繼承alignItems屬性，如果為auto以外的值，則會覆蓋alignItems屬性。有以下6種取值：

• auto (default)
• flex_start
• flex_end
• center
• baseline
• stretch

除了auto以外，其他和alignItems屬性一樣。

 

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值。

 

更多屬性或功能去官網查看，本案例希望對各位有那么幫助。

 

 

不足之處請留言指正！有問題的可以給我留言！謝謝！

 

由於代碼太多，就不一一貼出來了，直接下載即可， 源碼點擊下載