flexboxlayout，flexbox

flexboxlayout，flexbox

      提到FlexboxLayout大家估計有點模糊，它是谷歌最近開源的一個android排版庫，它的前身Flexbox是2009年W3C提出了一種新的布局，可以簡便、完整、響應式的實現頁面布局，Flexbox 是屬於web前端領域CSS的一種布局方案。

首先：我們看一下它的屬性。

 flexDirection:

     flexDirection屬性是決定主軸的方向。好比LinearLayout的vertical(垂直) 和 horizontal(水平)方向。

     flexDirection有四個可選值：

• row：一般為默認值，主軸為水平方向，起點在左端。
• row-reverse: 主軸為水平方向，起點在右端。
• column：主軸為垂直方向，起點在上沿。
• column-reverse：主軸為垂直方向，起點在下沿。

   如圖：

  row：

  row-reverse:

  column：

  column-reverse：

 

 flexWrap：

     默認情況下是不支持換行排列。

• nowrap：不換行。
• wrap: 正常方向換行。
• wrap-reverse: 反方向換行。     

   如圖：

wrap：

 

wrap-reverse：

 

 

 justifyContent:

     指定了項目在主軸上的對齊方式。

• flex-start: 默認值為左對齊。
• flex-end: 右對齊。
• center: 居中。
• space-between: 兩端對齊，其間間距相等。
• space-around: 兩側間距相等。

 如圖：

space-around:

 

alignltems:

     指定項目在副軸軸上的對齊方式。

• flex-start: 交叉軸的起點對齊。(上)
• flex-end:  交叉軸的終點對齊。(下)
• center:     交叉軸的中點對齊。(中間線)
• baseline:  第一行文字的基線對齊。()
• stretch:   默認值是占滿整個容器的高度，在未設置高度或者為auto。 

     如圖：

     flex-start:

    

     flex-end:

    

   center:

   

   baseline:基線跟圖一類似

   

   stretch:默認

   

    alignContent:

    指定多根軸線的對齊方式，如果只有一條軸，該屬性不起任何作用。

• flex-start: 與交叉軸的起點對齊。
• flex-end:  與交叉軸的終點對齊。
• center:     與交叉軸的中點對齊。
• space-between:  與交叉軸的兩端對齊，軸線之間的間隔分布均勻。
• space-around:   每根軸線兩側的間隔相等。 
• stretch: 默認值為軸線占滿整個交叉軸。   

子元素的屬性：

      layout_order:默認情況下子元素的排列方式按照文檔流的順序依次排序，而order可以控制排列的順序，負值在前，正直災後，按照從小到大的順序一次排列。

     

      layout_flexGrow:指定項目的放大比例，默認為0，如果存在剩余空間，也不放大。如果為1，等分剩余空間。

 

      layout_flexShrink:縮小比例，默認為1，空間不足，項目縮小。如果屬性都為1，空間不足時，將等比縮小。負值無效。

 

      layout_alignSelf:允許單個子元素與其它子元素有不一樣的對齊方式，可覆蓋alignltems屬性，默認值為auto，表示繼承父元素的alignltems屬性，如沒有父元素，則等同於stretch。

      該屬性有6個值，除了auto，其它都與align-items屬性一樣。

      layout_flexBasisPercent:指定了在分配多余空間之前，子元素占據的main size主軸空間，浏覽器根據這個屬性，計算主軸是否有多余空間。默認值為auto，即子元素的本來大小。圖片後續附上。

   activity_main.xml

<com.google.android.flexbox.FlexboxLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/flexbox_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:alignContent="flex_start"
    app:alignItems="flex_start"
    app:flexWrap="wrap"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:showIn="@layout/activity_main">


    <TextView
        android:id="@+id/textview1"
        style="@style/FlexItem"
        android:layout_width="@dimen/flex_item_length2"
        android:layout_height="@dimen/flex_item_length"
        android:text="@string/one" />

    <TextView
        android:id="@+id/textview2"
        style="@style/FlexItem"
        android:layout_width="@dimen/flex_item_length3"
        android:layout_height="@dimen/flex_item_length"
        android:text="@string/two" />

    <TextView
        android:id="@+id/textview3"
        style="@style/FlexItem"
        android:layout_width="@dimen/flex_item_length"
        android:layout_height="@dimen/flex_item_length"
        android:text="@string/three" />

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

添加依賴：

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

 

源碼git上有，大家可以去git上下載。