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和图片就暂时不附加了,如有需要请留言。

整理不易,转载请注明出处,谢谢!!

 

posted @ 2022-05-13 14:18  渣娃  阅读(2041)  评论(0编辑  收藏  举报