1 開始使用
compile 'com.google.android:flexbox:0.3.0-alpha4'
2 常用父布局屬性
- app:flexDirection 設(shè)置主軸方向（item的排列方向）
row (default)： 默認(rèn)值，主軸為水平方向茶鹃，從左到右师坎。
row_reverse：主軸為水平方向伊滋，從右到左猜憎。
column：主軸為豎直方向则奥，從上到下所踊。
column_reverse：主軸為豎直方向辉哥，從下往上。
app:flexDirection
- app:flexWrap 設(shè)置是否換行
noWrap (default):不換行耳贬，一行顯示完子元素踏堡。
wrap: 按正常方向換行。
wrap_reverse: 按反方向換行咒劲。
【例圖其他屬性】
app:flexDirection="row"
app:flexWrap
- app:justifyContent 設(shè)置主軸上元素的對齊方式
flex_start (default): 默認(rèn)值顷蟆，左對齊
flex_end: 右對齊
center: 居中對齊
space_between: 兩端對齊，中間間隔相同
space_around: 每個元素兩側(cè)的距離相等缎患。所以慕的，項目之間的間隔比項目與邊框的間隔大一倍。
【例圖其他屬性】
app:flexDirection="row"
app:flexWrap="wrap"
app:justifyContent
- app:alignItems 設(shè)置副軸上元素的對齊方式（針對每個單行）
stretch (default) ：默認(rèn)值挤渔，如果item沒有設(shè)置高度肮街，則充滿容器高度。
flex_start：交叉軸的起點對齊判导。
flex_end：交叉軸的終點對齊嫉父。
center：交叉軸的中點對齊。
baseline：第一行內(nèi)容的基線對齊
【例圖其他屬性】
app:flexDirection="row"
app:flexWrap="wrap"
app:justifyContent="flex_start"
app:alignItems
- app:alignContent 設(shè)置副軸上元素的對齊方式（針對多行的整個容器）
stretch (default): 默認(rèn)值眼刃，充滿交叉軸的高度（需要alignItems 的值也為stretch 才有效）绕辖。
flex_start: 與交叉軸起點對齊。
flex_end: 與交叉軸終點對齊擂红。
center: 與交叉軸居中對齊仪际。
space_between: 交叉軸兩端對齊，中間間隔相等。
space_around: 到交叉軸兩端的距離相等树碱。所以肯适，軸線之間的間隔比軸線與邊框的間隔大一倍。
【例圖其他屬性】1成榜，2
app:flexDirection="row"
app:flexWrap="wrap"
app:justifyContent="flex_start"
//上面一排圖片
app:alignItems="stretch"
//下面一排圖片
app:alignItems="flex_start"
app:alignContent 圖1圖2
【例圖其他屬性】3
app:flexDirection="row"
app:flexWrap="wrap"
app:justifyContent="flex_start"
app:alignItems="flex_end"
app:alignContent 圖3 定義app:alignContent 順序和 圖1圖2一致
【例圖其他屬性】4
app:flexDirection="row"
app:flexWrap="wrap"
app:justifyContent="flex_start"
app:alignItems="center"
app:alignContent 圖4 定義app:alignContent 順序和 圖1圖2一致
【例圖其他屬性】5
app:flexDirection="row"
app:flexWrap="wrap"
app:justifyContent="flex_start"
app:alignItems="baseline"
app:alignContent 圖5 定義app:alignContent 順序和 圖1圖2一致
- divider 類
1.showDivider
2.showDividerHorizontal
3.showDividerVertical
4.dividerDrawable
5.dividerDrawableHorizontal
6.dividerDrawableVertical
showDivider 控制顯示水平和垂直方向的分割線框舔，值為none | beginning | middle | end其中的一個或者多個。
showDividerHorizontal 控制顯示水平方向的分割線赎婚，值為none | beginning | middle | end其中的一個或者多個刘绣。
showDividerVertical 控制顯示垂直方向的分割線，值為none | beginning | middle | end其中的一個或者多個挣输。
dividerDrawable 設(shè)置水平和垂直方向的分割線Drawable纬凤。
dividerDrawableHorizontal 設(shè)置Flex 軸線之間水平方向的分割線Drawable。
dividerDrawableVertical 設(shè)置子元素垂直方向的分割線Drawable撩嚼。
3 常用子元素屬性
- app:layout_order： 不指定默認(rèn)情況下子元素的排列方式按照文檔流的順序依次排序移斩，而app:layout_order可以控制排列的順序，負(fù)值在前绢馍，正值在后，按照從小到大的順序一次排列肠套。
app:layout_flexGrow ： 子元素的放大比例舰涌， 決定如何分配剩余空間（如果存在剩余空間的話），默認(rèn)值為0,就是不放大你稚，如果有一個item的 layout_flexGrow 是一個正值瓷耙，那么會將全部剩余空間分配給這個Item,如果有多個Item這個屬性都為正值，那么剩余空間的分配按照layout_flexGrow定義的比例分配（有點像LinearLayout的layout_weight屬性）刁赖。
app:layout_flexShrink ： 縮小比例搁痛，默認(rèn)為1，空間不足宇弛，項目縮小鸡典。如果屬性都為1，空間不足時枪芒，將等比縮小彻况。負(fù)值無效。
- app:layout_alignSelf ： 允許單個子元素與其它子元素有不一樣的對齊方式舅踪，可覆蓋alignltems屬性纽甘，默認(rèn)值為auto，表示繼承父元素的alignltems屬性抽碌，如沒有父元素悍赢，則等同于stretch。該屬性有6個值，除了auto左权，其它都與alignItems屬性一樣皮胡。
auto (default) 繼承父元素的alignItems
flex_start
flex_end
center
baseline
stretch
- app:layout_flexBasisPercent ：表示設(shè)置子元素的長度為它父容器長度的百分比，如果設(shè)置了這個值涮总，那么通過這個屬性計算的值將會覆蓋layout_width或者layout_height的值胸囱。但是需要注意，這個值只有設(shè)置了父容器的長度時才有效（也就是MeasureSpec mode 是 MeasureSpec.EXACTLY）瀑梗。默認(rèn)值時-1烹笔。
app:layout_minWidth / app:layout_minHeight 強制限制 FlexboxLayout的子元素（寬或高）不會小于最小值，不管layout_flexShrink這個屬性的值為多少抛丽，子元素不會被縮小到小于設(shè)置的這個最小值谤职。
app:layout_maxWidth / app:layout_maxHeight 強制限制FlexboxLayout子元素不會大于這個最大值, 不管layout_flexGrow的值為多少，子元素不會被放大到超過這個最大值亿鲜。
app:layout_wrapBefore 控制強制換行允蜈，默認(rèn)值為false,如果將一個子元素的這個屬性設(shè)置為true，那么這個子元素將會成為一行的第一個元素蒿柳。這個屬性將忽略flex_wrap 設(shè)置的 noWrap值饶套。
4 FlexboxLayoutManager 配合 RecyclerView 使用
mRecyclerView = (RecyclerView)findViewById(R.id.test_recyclerView);
FlexboxLayoutManager layoutManager = new FlexboxLayoutManager();
layoutManager.setFlexWrap(FlexWrap.WRAP);
layoutManager.setFlexDirection(FlexDirection.ROW);
layoutManager.setAlignItems(AlignItems.STRETCH);
layoutManager.setJustifyContent(JustifyContent.FLEX_START);
mRecyclerView.setLayoutManager(layoutManager);
//adapter 中設(shè)置子元素的放大比例
ImageView IV= rvViewHolder.getView(R.id.image_src);
IV.setImageResource(mData);
ViewGroup.LayoutParams lp = IV.getLayoutParams();
if (lp instanceof FlexboxLayoutManager.LayoutParams) {
FlexboxLayoutManager.LayoutParams flexboxLp =
(FlexboxLayoutManager.LayoutParams) mImageView.getLayoutParams();
flexboxLp.setFlexGrow(1.0f);
}
參考文檔
- Android可伸縮布局－FlexboxLayout(支持RecyclerView集成) http://www.reibang.com/p/3c471953e36d
- Android FlexboxLayout 聰明的UI布局 http://www.reibang.com/p/b3a9c4a99053
- FlexboxLayout——實現(xiàn)靈活多變的瀑布流 http://www.reibang.com/p/8060f7623f1c
