Android隨筆——搞定流動佈局（FlexboxLayout）

轉載請標明地址 QuincySx：[http://www.jianshu.com/p/fbeb3808a17f]

---

簡介

FlexboxLayout 是 Google 推出的一個佈局，它的作用就和 LinearLayout 相似，如果只是功能相似的話，那個谷歌就沒有推出他的必要性了，他是一個聰明的佈局，他和LinearLayout最大的區別就是能夠換行，並且可以和 RecyclerView 無縫使用，今天我們就一點點的來介紹一下這個佈局

使用方式

1. 新增依賴 compile `com.google.android:flexbox:0.3.0`

2.在佈局中使用

<com.google.android.flexbox.FlexboxLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
</com.google.android.flexbox.FlexboxLayout>

這個佈局的最新版本、用法大家可以去 Github 上去看，點這裡

注: 0.3.0 或以上版本才可以與 RecyclerView 配合使用

主要的幾個屬性

flexDirection 屬性

這個屬性的作用就和 LinearLayout 的 orientation 屬性類似，用來控制檢視顯示是橫向還是豎向
row：預設值 表示橫向排列
row_reverse：表示橫向排列，但是是從右往左排
column：表示豎向排列
column_reverse：表示豎向排列，從下到上排列

flexWrap 屬性

這個屬性是表示換不換行，因為這個控制元件預設是不會換行的
nowrap：預設值 不會換行
wrap：換行
wrap：換行，但是排列順序是反的

alignItems 屬性

這是屬性是表示各個 View 的對齊方式，這個控制元件預設的對齊方式是 View 高或寬是一樣的，怎講呢，如果你的排列方式是橫向的，那麼每個子控制元件的寬都是一樣寬的，但是你的排列方式是豎向的，那麼每個子控制元件的高是相同的
stretch：預設值 表示子控制元件的高或寬相同
flex_start：左對齊/上對齊 這裡它是根據 flexDirection 屬性的值不同會有響應變化
flex_end：右對齊/下對齊
center：根據中線居中對齊
baseline：根據內容對齊，和 ConstraintLayout 裡面那個對齊有一點類似的意思

justifyContent 屬性

這個屬性是表示在主軸上的排列方式,再控制元件無法排列滿整個佈局時
flex_start：預設值 整體控制元件都連在一起排列在上方，或下方
center：控制元件都連在一起，居中排列
flex_end：整體控制元件都連在一起排列在上方，或下方
space_around：控制元件都分散開排列，第一個控制元件，與最後一個控制元件與父容器有間隔
space_between：遇上一個屬性類似，差別在第一個控制元件，與最後一個控制元件是貼在父容器邊上的

alignContent 屬性

此屬性與上一個屬性是類似的，當開啟了換行，由於顯示了多行主軸就可能發生了變化，所以效果也會產生變換，當前這個屬性就是針對多軸的情況而使用的屬性
flex_start：預設值 整體控制元件都連在一起排列在上方，或下方
center：控制元件都連在一起，居中排列
flex_end：整體控制元件都連在一起排列在上方，或下方
space_around：控制元件都分散開排列，第一個控制元件，與最後一個控制元件與父容器有間隔
space_between：遇上一個屬性類似，差別在第一個控制元件，與最後一個控制元件是貼在父容器邊上的