首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Android开发之玩转FlexboxLayout布局

关键时刻,第一时间送达!

在这之前,我曾认真的研究过鸿洋大神的Android 自定义ViewGroup 实战篇 -> 实现FlowLayout,按照大神的思路写出了一个流式布局,所有的东西都是难者不会会者不难,当自己能自定义流式布局的时候就会觉得这东西原来很简单了。如果各位小伙伴也看过那篇文章的话,应该知道自定义流式布局还是非常麻烦的,不过Google今年开源了新的容器,就是这个FlexboxLayout,如果你玩过前端开发或者玩过RN,就会觉得这个FlexboxLayout真是简单,OK,那我们今天就来看看这个FlexboxLayout的使用吧!先来看看显示效果:

OK,我们来看看这个东东要怎么实现吧!

引入项目

使用之前当然是先引入了,Google在GitHub上开源了这个控件,地址如下:

https://github.com/google/flexbox-layout

在项目中引入方式如下:

在module的gradle文件中添加如下一行:

版本号为本文发布时的最新版本号。引入之后就可以使用了。

基本用法

根据GitHub上给我们的Demo,可以看到FlexboxLayout在使用的过程中只需要用容器将我们的子控件包裹起来就行了,主布局文件如下:

显示效果就是我们上文贴出来的图。

父容器属性简介

flexWrap属性表示换行与否,默认为noWrap,表示不换行,wrap表示自动换行,还有一个wrap_reverse 表示副轴反转,副轴的含义我们一会来说。

flexDirection表示子元素的排列方向,元素的排列方向为主轴的方向,该属性有四种取值,不同取值对应不同的主副轴,看下面一张图:

默认为row,所以如果我给flexWrap取wrap_reverse属性,则效果如下:

副轴取反,由于flexDirection默认为row,即副轴为竖直方向,副轴取反,即竖直方向倒着显示。同理,如果我给flexDirection属性设置为column,对应主轴方向为竖直向下,这个时候控件就会按如下方式来显示:

其它值我就不一一测试了。

justifyContent表示控件沿主轴对齐方向,有五种取值,默认情况下大家看到控件是左对齐(flex_start),另外还有主轴居中对齐(center):

主轴居右对齐(flex_end):

两端对齐,子元素之间的间隔相等,但是两端的子元素分别和左右两边的间距为0(space_between):

子元素两端的距离相等,所有子元素两端的距离都相相等(space_around):

alignContent表示控件在副轴上的对齐方向(针对多行元素),默认值为stretch,表示占满整个副轴,因为上文中我把FlexboxLayout的高度设置为包裹内容,所以这个属性大家可能没看到效果,这里我把FlexboxLayout的高度改为match_parent,我们再来看看效果:

代码:

效果:

大家看到系统会自动放大子元素的高度以使之填满父容器。

与副轴起点对齐(flex_start):

代码:

与副轴终点对齐(flex_end):

还有两个值,分别是space_around和space_between,意思和上文说的一样,这里不再赘述。

alignItems也是描述元素在副轴上的对齐方向(针对单行),属性含义和上文基本一致,只是多了一个baseline,表示基线对齐,其余属性不赘述。

这里说的都是父容器的属性,那么子元素都有哪些属性呢?

子元素属性简介

这个表示子元素的优先级,默认值为1,数值越大越靠后显示。

这个类似于权重属性,来个示例代码:

显示效果:

表示空间不足时子控件的缩放比例,0表示不缩放,比如下面一行代码:

父容器总宽度为300dp,结果两个子元素加起来就400,超过了100dp,总共需要缩小100dp,根据flexShrink属性,第一个TextView缩小100的三分之二,第二个TextView缩小100的三分之一。

Ok,以上就是FlexboxLayout的一个基本使用,更多资料请参考https://github.com/google/flexbox-layout

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20171229B0SU0H00?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

扫码

添加站长 进交流群

领取专属 10元无门槛券

私享最新 技术干货

扫码加入开发者社群
领券