提到布局，大家都知道ConstraintLayout、LinearLayout、RelativeLayout等等。那么今天我们来介绍一下Google I/O在2016年发布的FlexboxLayout,这款布局听说称之为高级版的LinearLayout,FlexboxLayout相对于LinearLayout来说主要就是多了一个“换行”的特性。
Flexbox是web前端里面css领域的一种布局，跟LinearLayout很相似，但是相对来说强大了很多。
使用- 引入
首先，需要添加依赖
implementation 'com.google.android:flexbox:1.0.0'FlexboxLayout五大属性
- flexDirection
flexdirection属性决定主轴的方向(即项目的排列方向)。在LinearLayout中相当于vertical和horizontal。
- row(默认值):水平显示，起点在左端。
- row-reverse:水平显示，起点在右端。
- column:垂直显示，起点在顶部。
- column_reverse:垂直显示，起点在底部。
flexdirection属性实现效果和相应代码:
- row
- row-reverse
- column
- column_reverse
2.flexWrap
这个属性可以支持flex换行。其中，有两种换行方式，一种是以项目排列方向换行，另一种是反方向换行。
- nowrap(默认值):不换行
- wrap:按正常方向换行
- wrap_reverse:按反方向换行
flexWrap属性实现效果和相应代码:
- nowrap
- wrap
- wrap_reverse
3.justifyContent
这个属性决定了元素在主轴上的对齐方式
- flex_start(默认值):左对齐
- flex_end:右对齐
- center:居中
- space_between:两端对齐，元素之间间隔都相等
- space_around:每个元素两侧的间隔相等，元素之间的间隔比元素与布局边框的间隔要大一倍
justifyContent属性实现效果和相应代码:
- flex_start
- flex_end
- center
- space_between
- space_around
4.alignItems
这个属性决定元素在交叉轴方向上的对齐方式。
- stretch(默认值):交叉轴方向占满整个父布局
- flex_start:交叉轴的起点对齐
- flex_end:交叉轴的终点对齐
- center:交叉轴的居中对齐
- baseline:元素第一行文字的基线对齐
alignItems属性实现效果和相应代码:
- stretch
- flex_start
- flex_end
- center
- baseline
5.alignContent
这个属性决定了多根轴线的对齐方式。但是如果只有一根，属性不起作用。
- stretch(默认值):轴线占满整个交叉轴
- flex_start:交叉轴方向起点对齐
- flex_end:交叉轴方向终点对齐
- center:交叉轴方向居中对齐
- space_between:交叉轴方向两端对齐，元素之间的间隔都相等
- space_around:每个元素两侧的间隔相等。元素之间的间隔比元素与布局边框的间隔大一倍
alignContent属性实现效果和相应代码:
- stretch:
- flex_start:
- flex_end:
- center:
- space_between:
- space_around:
6.子元素属性
FlexboxLayout同时还支持以下元素属性:
- 元素权重:
- 元素的缩放比例:
- 改变元素的排列顺序:
- 子元素占据空间的百分比
- 单个子元素的位置对齐方式
- 分割线
以上就是关于FlexboxLayout属性的基本介绍和基本用法，我觉得对比LinearLayout好用挺多，有很多优点，有兴趣的话大家可以去试一试！因为本人只是一名大学生，涉猎稍浅，只通过查阅资料了解一点皮毛，如果有所帮助，可以点个赞，谢谢！GOOK LUCK!
