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

 

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

 

 

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

 

因爲代碼太多，就不一一貼出來了，直接下載便可， 源碼點擊下載