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的排列方向,有以下四種取值:
- row (default): 默認值,主軸為水平方向,從左到右。
- row_reverse:主軸為水平方向,起點在有端,從右到左。
- column:主軸為豎直方向,起點在上端,從上到下。
- 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個值:
- noWrap: 不換行,一行顯示完子元素。
- wrap: 按正常方向換行。
- 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種取值:
- flex_start (default): 默認值,左對齊
- flex_end: 右對齊
- center: 居中對齊
- space_between: 兩端對齊,中間間隔相同
- 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種取值:
- stretch (default) :默認值,如果item沒有設置高度,則充滿容器高度。
- flex_start:頂端對齊
- flex_end:底部對齊
- center:居中對齊
- 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種取值:
- stretch (default): 默認值,充滿交叉軸的高度(測試發現,需要alignItems 的值也為stretch 才有效)。
- flex_start: 與交叉軸起點對齊。
- flex_end: 與交叉軸終點對齊。
- center: 與交叉軸居中對齊。
- space_between: 交叉軸兩端對齊,中間間隔相等。
- 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值。
更多屬性或功能去官網查看,本案例希望對各位有那么幫助。
由於代碼太多,就不一一貼出來了,直接下載即可, 源碼點擊下載