Android FlexBoxLayout 弹性盒子布局
前言
FlexBoxLayout是谷歌前几年开源的一个控件,使用起来很方便。顾名思义他是一个弹性的、可伸缩的布局,应用场景也有很多,如:搜索页的搜索历史标签流式展示;动态添加view等。
前段时间项目中正好有用到此布局,特地总结一下。
使用方法
1.build.gradle(app)中添加依赖
implementation 'com.google.android:flexbox:1.1.0'
2.布局中就可以直接引用了
<com.google.android.flexbox.FlexboxLayout android:layout_width="match_parent" android:layout_height="match_parent"> </com.google.android.flexbox.FlexboxLayout>
控制布局属性
一、flexDirection 该属性控制布局方向,其值有4个:
1.row 设置方向为水平方向,起点在左侧(默认值) 2.row-reverse 设置方向为水平方向,起点在右侧 3.column 设置方向为垂直方向,起点在顶部 4.column-reverse 设置方向为垂直方向,起点在底部
二、flexWrap 该属性控制布局是否换行,其值有3个:
1.nowrap 设置为不换行 2.wrap 正常方向换行 3.wrap-reverse 反方向换行
三、justifyContent 该属性控制布局的对齐方式,其值有5个:
1.flex-start 左对齐(默认值) 2.flex-end 右对齐 3.center 居中对齐 4.space-between 两端对齐 5.space-around 间隔相等对齐,相当于LinerLayout中的weight属性
四、alignContent 多行对齐方式(单行不起作用),其值有6个:
1.flex-start 左对齐 2.flex-end 右对齐 3.center 居中对齐 4.space-between 两端对齐 5.space-around 间隔相等对齐,相当于LinerLayout中的weight属性 6.stretch 充满布局的高度,需要alignItems的值也为stretch才生效(默认值)
五、alignItems 反向对齐方式(例如当前布局是横向的,那么alignItems则是设置纵向对齐方式),其值有5个:
1.flex-start 左对齐 2.flex-end 右对齐 3.center 居中对齐 4.baseline 第一行内容的基线对齐 5.stretch 如果item没设置高度,则自动充满布局(默认值)
控制子元素属性
一、layout_order 该属性可以改变子元素的排列顺序,默认值是1
二、layout_flexGrow 该属性空着子元素的放大比例
三、layout_flexShrink 该属性控制子元素缩小比例
四、layout_alignSelf 该属性控制子元素的对齐方式,跟上面布局属性alignItems基本上是一样,唯一区别是layout_alignSelf可以设置单个子元素,而alignItems设置的全部子元素。其值有6个:
1.flex-start 左对齐 2.flex-end 右对齐 3.center 居中对齐 4.baseline 第一行内容的基线对齐 5.stretch 如果item没设置高度,则自动充满布局 6.auto 自动,如果值为auto则会继承alignItems,反之则会覆盖(默认值)
五、layout_flexBasisPercent 该属性为子元素的长度跟他父布局的一个百分比,设置完此属性会覆盖父布局宽或高,但父布局只有设置了长度时此属性才会生效。
六、layout_minWidth、layout_minHeight 该属性会强制子元素不会小于最小值,设置完layout_flexShrink(缩小比例)也不会超过最小值。
七、layout_maxWidth、layout_maxHeight 该属性会强制子元素不会小于最大值,设置完layout_flexGrow(放大比例)也不会超过最大值。
八、layout_wrapBefore 该属性会控制子元素强制换行,默认值是false,如果设置为true,则当前子元素不受flex_wrap(换行属性)的控制。
以上就是总结的弹性布局,有错误地方还请指出!
Demo和图片就暂时不附加了,如有需要请留言。
整理不易,转载请注明出处,谢谢!!