原文链接:https://mp.weixin.qq.com/s/Mi3cK7xujmEMI_rc51-r4g

RelativeLayoutLinearLayout等常用布局相信大家早已耳熟能详,今天给大家介绍一款新的布局方式「弹性布局」--FlexboxLayout。

Flex是Flexible Box的缩写,意为「弹性布局」,在前端css样式中应用甚为广泛,之前做过React-Native和微信小程序,页面布局大多使用flex弹性布局,可以在不同屏幕尺寸上提供一致的布局结构,可以简便、完整、响应式地实现各种页面布局,今天为大家打开Android移动端的flex布局大门--FlexboxLayout,在android中我们经常所见的标签、流式布局等都可以用FlexboxLayout来实现。

安装

build 依赖

dependencies {
implementation 'com.google.android:flexbox:1.0.0'
}

FlexboxLayout 属性介绍

flexDirection

flex-direction 属性决定主轴的方向(即内部子元素的排列方向)。

  • row(默认值):水平显示,起点在左端
  • row_reverse:水平显示,起点在右端,与row相反的顺序
  • column:垂直显示,起点在顶部
  • column_reverse:垂直显示,起点在底部,与column相反的顺序

xml中使用app:flexDirection="row",代码中使用flexboxLayout.setFlexDirection(FlexDirection.ROW)

这里为了演示布局紧凑,不让元素撑满整个布局,xml里设置了app:alignItems="flex_start"app:alignContent="flex_start",后续有对alignItemsalignContent的属性介绍,读者可以去除这两个属性看看演示效果。

flexWrap

flexWrap 决定是否换行

  • nowrap(默认值):不换行
  • wrap:按正常方向换行,第一行在上方
  • wrap_reverse:按反方向换行,第一行在下方

xml中使用app:flexWrap="nowrap",代码中使用flexboxLayout.setFlexWrap(FlexWrap.NOWRAP)

justifyContent

justifyContent决定元素在主轴上的对齐方式

  • flex_start(默认值):主轴方向起点对齐
  • flex_end:主轴方向终点对齐
  • center: 主轴方向居中对齐
  • space_between:主轴方向两端对齐,元素之间的间隔都相等。
  • space-around:每个元素两侧的间隔相等。所以,元素之间的间隔比元素与布局边框的间隔大一倍。

xml中使用app:justifyContent="flex_start",代码中使用flexboxLayout.setJustifyContent(JustifyContent.FLEX_START)

注意这里是 主轴方向 上的对齐方式即flexDirection属性,例如主轴如果是row水平方向的,那么center属性就是水平居中,如果是column,那么就是垂直方向居中。

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 水平分隔线放在伸缩线之间
  • showDividerVertical beginning显示线条在布局的左边,end显示线条在布局的右边
  • dividerDrawableVertical 垂直分隔线放在伸缩线之间
  • showDivider 配合dividerDrawableHorizontal就是showDividerHorizontal的效果,配合dividerDrawableVertical就是showDividerVertical的效果,配合dividerDrawable就是显示水平和垂直方向的线条
  • dividerDrawable drawable属性,配合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,则前者占据的剩余空间将比其他的多一倍。属性类似于LinearLayoutweight属性。

三个view的app:layout_flexGrow值分别为1、1、2

layout_flexShrink

layout_flexShrink 决定元素的缩小比例,默认为1,即当空间不足是,该元素被缩小。值越大,缩小比例越大,0的话则不缩小。空间足够的情况,属性无效。

三个view的app:layout_flexShrink值分别为2、1、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/

欢迎关注微信号:春风十里不如认识你

Android 弹性布局 FlexboxLayout了解一下的更多相关文章

  1. FlexboxLayout——Android弹性布局

    FlexboxLayout是一个Android平台上与CSS的 Flexible box 弹性盒子布局模块 有相似功能的库.Flexbox 是CSS 的一种布局方案,可以简单.快捷的实现复杂布局. F ...

  2. Android 布局开发之百分比布局、弹性布局

    1.百分比布局 很简单,超级简单.引用之后就可以使用了. compile 'com.android.support:percent:23+' git地址: https://github.com/Jul ...

  3. Android可伸缩布局-FlexboxLayout(支持RecyclerView集成)

    Android可伸缩布局-FlexboxLayout(支持RecyclerView集成) 1 . 前言 前几天看到Google官方的博客介绍了Google开源的一个强大的布局-FlexboxLayou ...

  4. Flutter布局----弹性布局 (Flex)

    弹性布局(Flex) 弹性布局允许子组件按照一定比例来分配父容器空间.弹性布局的概念在其它UI系统中也都存在,如H5中的弹性盒子布局,Android中的FlexboxLayout等.Flutter中的 ...

  5. 淘宝弹性布局方案lib-flexible实践

    2个月前,写过一篇文章<从网易与淘宝的font-size思考前端设计稿与工作流>总结过一些移动web中有关手机适配的一些思路,当时也是因为工作的关系分析了下网易跟淘宝的移动页面,最后才有那 ...

  6. Flex弹性布局在移动设备上的应用

    引文 首先,我们有表格布局.当不考虑语义并且利用一些适当的嵌套和其他技巧,我们可以用table建立具有一定功能的布局. 然后是现在大多数人都在使用的浮动布局.我们可以使用任何我们想用的元素,但浮动并不 ...

  7. 弹性布局详解——5个div让你学会弹性布局

      前  言 JRedu 在网页制作过程中,布局是我们最重要的一个环节.可以说布局的好坏直接影响到整个网页的成败!布局成,则事半功倍:布局败,则事倍功半. 随着移动互联的到来,响应式网站风靡.这也就兴 ...

  8. 弹性布局flex

    前几天写过怪异盒子布局,以前在项目中用到弹性布局flex这个属性,当时没深入研究,这里各种查阅各种测试,把这个属性记录下 以免忘记, 弹性布局:是提供一种更加有效的方式来对一个容器中的条目进行排列.对 ...

  9. 前端入门5-CSS弹性布局flex

    本篇文章已授权微信公众号 dasu_Android(大苏)独家发布 声明 本系列文章内容全部梳理自以下四个来源: <HTML5权威指南> <JavaScript权威指南> MD ...

随机推荐

  1. MyBatis 延迟加载的三种加载方式深入,你get了吗?

    延迟加载 延迟加载对主对象都是直接加载,只有对关联对象是延迟加载. 延迟加载可以减轻数据库的压力, 延迟加载不可是一条SQL查询多表信息,这样构不成延迟加载,会形成直接加载. 延迟加载分为三种类型: ...

  2. PHP之ThinkPHP框架(会话)

    网页会话即是实现页面跳转及数据传递,在web开发中,Cookie和Session的使用是极其重要的,GET和POST是最常使用的页面间数据传递的方法,相对于PHP脚本基础,在ThinkPHP中对网页会 ...

  3. base64文件转MultipartFile文件

    在一些项目中,上传图片或者文件过大,这个时候我们就要选择压缩文件,压缩到我们指定的范围内在上传到服务器,当然压缩也是可以放到服务器进行操作的,但是考虑到前端传输时间问题,所以我们一般都是放到前端压缩后 ...

  4. hbaes之createTable执行流程

    hbase的客户端代码并不想hive一样用java编写,shell调用,而是使用ruby编写. 在admin.rb文件中方法create,其中接受两个参数,其中第二个参数类型为变长参数. 而在crea ...

  5. Saiku多用户使用时数据同步刷新(十七)

    Saiku多用户使用时数据同步刷新 这里我们需要了解一下关于saiku的刷新主要有两种数据需要刷新: >1 刷新数据库的表中的数据,得到最新的表数据进行展示. >2 刷新cube信息,得到 ...

  6. Redis 超时排查

    突然收到告警,提示redis挂了,同时大群也在说某某redis连接超时了,过了一会儿就恢复了.这时登上服务器,查看监控.首先看看qps: 可以看到qps并不高,但是中间有段时间没取到数据是怎么回事?那 ...

  7. MySQL Router实现MySQL的读写分离

    1.简介 MySQL Router是MySQL官方提供的一个轻量级MySQL中间件,用于取代以前老版本的SQL proxy. 既然MySQL Router是一个数据库的中间件,那么MySQL Rout ...

  8. 翻译:low_priority和high_priority(已提交到MariaDB官方手册)

    本文为mariadb官方手册:HIGH_PRIORITY and LOW_PRIORITY的译文. 原文:https://mariadb.com/kb/en/high_priority-and-low ...

  9. Docker镜像管理基础与基于容器的镜像制作示例

    一.Docker镜像 Docker镜像是启动Docker容器的一个非常重要的组件.Docker各组件之间的关系如图: Docker镜像含有启动容器所需要的文件系统及其内容,因此Docker镜像用于创建 ...

  10. [转]Laravel 数据库实例教程 —— 使用查询构建器实现对数据库的高级查询

    本文转自:https://laravelacademy.org/post/920.html 上一节我们简单介绍了如何使用查询构建器对数据库进行基本的增删改查操作,这一节我们来探讨如何使用查询构建器实现 ...