RelativeLayout、LinearLayout等經常使用佈局相信你們早已耳熟能詳，今天給你們介紹一款新的佈局方式「彈性佈局」--FlexboxLayout。
Flex是Flexible Box的縮寫，意爲「彈性佈局」，在前端css樣式中應用甚爲普遍，以前作過React-Native和微信小程序，頁面佈局大多使用flex彈性佈局，能夠在不一樣屏幕尺寸上提供一致的佈局結構，能夠簡便、完整、響應式地實現各類頁面佈局，今天爲你們打開Android移動端的flex佈局大門--FlexboxLayout，在android中咱們常常所見的標籤、流式佈局等均可以用FlexboxLayout來實現。前端
安裝
build 依賴android
dependencies {
implementation 'com.google.android:flexbox:1.0.0'
}
FlexboxLayout 屬性介紹
flexDirection
flex-direction 屬性決定主軸的方向（即內部子元素的排列方向）。git
row（默認值）：水平顯示，起點在左端row_reverse：水平顯示，起點在右端，與row相反的順序column：垂直顯示，起點在頂部column_reverse：垂直顯示，起點在底部，與column相反的順序
xml中使用app:flexDirection="row"，代碼中使用flexboxLayout.setFlexDirection(FlexDirection.ROW)github
這裏爲了演示佈局緊湊，不讓元素撐滿整個佈局，xml裏設置了
app:alignItems="flex_start"，app:alignContent="flex_start"，後續有對alignItems和alignContent的屬性介紹，讀者能夠去除這兩個屬性看看演示效果。小程序
flexWrap
flexWrap 決定是否換行微信小程序
nowrap（默認值）：不換行wrap：按正常方向換行，第一行在上方wrap_reverse：按反方向換行，第一行在下方
xml中使用app:flexWrap="nowrap"，代碼中使用flexboxLayout.setFlexWrap(FlexWrap.NOWRAP)
微信
justifyContent
justifyContent決定元素在主軸上的對齊方式app
flex_start（默認值）：主軸方向起點對齊flex_end：主軸方向終點對齊center： 主軸方向居中對齊space_between：主軸方向兩端對齊，元素之間的間隔都相等。space-around：每一個元素兩側的間隔相等。因此，元素之間的間隔比元素與佈局邊框的間隔大一倍。
xml中使用app:justifyContent="flex_start"，代碼中使用flexboxLayout.setJustifyContent(JustifyContent.FLEX_START)
注意這裏是 主軸方向 上的對齊方式即flexDirection屬性，例如主軸若是是row水平方向的，那麼center屬性就是水平居中，若是是column，那麼就是垂直方向居中。ide
alignItems
alignItems決定元素在交叉軸方向上的對齊方式，「交叉軸」 我理解的就是 與主軸交叉垂直的方向，好比主軸是水平的，那麼交叉軸就是垂直方向的
stretch（默認值）：交叉軸方向佔滿整個父佈局。flex_start交叉軸的起點對齊flex_end交叉軸的終點對齊。center交叉軸的居中對齊baseline元素第一行文字的基線對齊
默認值是stretch，無論元素佈局設置的寬高多少，都會在交叉軸方向佔滿父佈局，例如flexDirection是默認row水平方向，那麼元素就會在垂直方向撐滿父佈局。
通常會選擇使用flex_start屬性，能夠自由控制元素的大小。
alignContent
alignContent決定了多根軸線的對齊方式。若是項目只有一根軸線，該屬性不起做用。
stretch（默認值）：軸線佔滿整個交叉軸。flex_start交叉軸方向起點對齊flex_end交叉軸方向終點對齊center交叉軸方向居中對齊space_between交叉軸方向兩端對齊，元素之間的間隔都相等space_around每一個元素兩側的間隔相等。因此，元素之間的間隔比元素與佈局邊框的間隔大一倍
alignContent是在多行的狀況下起做用。
justifyContent設置主軸方向的對齊方式，alignContent是設置交叉軸方向的對齊方式。例如元素是水平方向換行，justifyContent設置center屬性就是水平居中，alignContent設置center屬性就是垂直居中。
divider屬性
描述了元素間的分割線
showDividerHorizontal四個屬性none | beginning | middle | end，beginning顯示線條在佈局的上面，end顯示線條在佈局的下面dividerDrawableHorizontal水平分隔線放在伸縮線之間showDividerVerticalbeginning顯示線條在佈局的左邊，end顯示線條在佈局的右邊dividerDrawableVertical垂直分隔線放在伸縮線之間showDivider配合dividerDrawableHorizontal就是showDividerHorizontal的效果，配合dividerDrawableVertical就是showDividerVertical的效果，配合dividerDrawable就是顯示水平和垂直方向的線條dividerDrawabledrawable屬性，配合showDivider能夠顯示水平和垂直方向的線條
app:alignContent="flex_start" app:alignItems="flex_start" app:flexWrap="wrap" app:dividerDrawable="@drawable/divider" app:showDivider="beginning|end|middle"
子元素屬性
除了給FlexboxLayout自身設置屬性，還能夠給到子元素設置屬性
layout_order
layout_order能夠改變元素排列順序，默認值是1，按順序排列的，值越大，排列越靠後
文字1的textView的屬性app:layout_order="2"，其他爲默認1
layout_flexGrow
layout_flexGrow決定元素的放大比例，默認不放大，值爲0。若是一個元素的layout_flexGrow 屬性爲2，其餘元素爲1，則前者佔據的剩餘空間將比其餘的多一倍。屬性相似於LinearLayout的weight屬性。
三個view的app:layout_flexGrow值分別爲一、一、2
layout_flexShrink
layout_flexShrink 決定元素的縮小比例，默認爲1，即當空間不足是，該元素被縮小。值越大，縮小比例越大，0的話則不縮小。空間足夠的狀況，屬性無效。
三個view的app:layout_flexShrink值分別爲二、一、1
layout_alignSelf
layout_alignSelf容許單個子元素有與其餘子元素不同的對齊方式，默認值爲auto，繼承父元素的alignItems 屬性，其他屬性值同alignItems屬性
第一個viewapp:layout_alignSelf="center"垂直居中
layout_flexBasisPercent
layout_flexBasisPercent 決定了在分配多餘空間以前，子元素佔據的主軸空間的百分比。默認爲自身大小
第一個viewapp:layout_flexBasisPercent="50%"水平佔比50%
與recyclerView搭配
FlexboxLayout的應用可謂普遍，主流的tag標籤 流式佈局就能夠使用FlexboxLayout動態添加view去實現，例外還能夠使用RecyclerView的佈局管理器FlexboxLayoutManager來完成流式佈局。
FlexboxLayoutManager manager = new FlexboxLayoutManager(this); manager.setFlexDirection(FlexDirection.ROW); manager.setFlexWrap(FlexWrap.WRAP); recyclerView.setLayoutManager(manager);
一樣圖片的流式佈局原理相通，這裏就不一一列舉。
最後附上github地址：https://github.com/taixiang/flexboxLayout
歡迎關注個人博客：https://blog.manjiexiang.cn/
歡迎關注微信號：春風十里不如認識你