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定義的比例(有點像LinearLayoutlayout_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值。

 

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

 

 

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

 

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

 




 








 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM