文档章节

FlexboxLayout——Android弹性布局

切切歆语
 切切歆语
发布于 2017/08/14 10:30
字数 1389
阅读 62
收藏 0

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

FlexboxLayout项目开源地址:https://github.com/google/flexbox-layout

效果如图下:

       

项目中添加依赖


compile 'com.google.android:flexbox:0.2.2'

FlexboxLayout 常用属性

flexDirection

flexDirection属性决定了主轴的方向,即FlexboxLayout里子Item的排列方向,有以下四种取值:

  1. row (default): 默认值,主轴为水平方向,从左到右。
  2. row_reverse:主轴为水平方向,起点在有端,从右到左。
  3. column:主轴为竖直方向,起点在上端,从上到下。
  4. column_reverse:主轴为竖直方向,起点在下端,从下往上。
<com.google.android.flexbox.FlexboxLayout
        android:id="@+id/flexbox_layout4"
        android:layout_width="match_parent"
        android:layout_height="119dp"
        android:layout_marginTop="9dp"
        app:flexDirection="column">
.................

flexWrap

flexWrap 这个属性决定Flex 容器是单行还是多行,并且决定副轴(与主轴垂直的轴)的方向。可能有以下3个值:

  1. noWrap: 不换行,一行显示完子元素。
  2. wrap: 按正常方向换行。
  3. wrap_reverse: 按反方向换行。
 <com.google.android.flexbox.FlexboxLayout
        android:id="@+id/flexbox_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:flexWrap="wrap"
        >
     ...............

justifyContent

justifyContent 属性控制元素主轴方向上的对齐方式,有以下5种取值:

  1. flex_start (default): 默认值,左对齐
  2. flex_end: 右对齐
  3. center: 居中对齐
  4. space_between: 两端对齐,中间间隔相同
  5. space_around: 每个元素到两侧的距离相等。
<com.google.android.flexbox.FlexboxLayout
        android:id="@+id/flexbox_layout2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:justifyContent="space_between"
        >
............

alignItems

alignItems 属性控制元素在副轴方向的对齐方式,有以下5种取值:

  1. stretch (default) :默认值,如果item没有设置高度,则充满容器高度。
  2. flex_start:顶端对齐
  3. flex_end:底部对齐
  4. center:居中对齐
  5. baseline:第一行内容的的基线对齐
 <com.google.android.flexbox.FlexboxLayout
        android:id="@+id/flexbox_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="9dp"
        app:alignItems="flex_start">
..........................

alignContent

alignContent 属性控制多根轴线的对齐方式(也就是控制多行,如果子元素只有一行,则不起作用(针对多行元素),表示控件在副轴上的对齐方向,默认值为stretch,表示占满整个副轴,因为上文中我把FlexboxLayout的高度设置为包裹内容,所以这个属性大家可能没看到效果,这里我把FlexboxLayout的高度改为match_parent,可能有以下6种取值:

  1. stretch (default): 默认值,充满交叉轴的高度(测试发现,需要alignItems 的值也为stretch 才有效)。
  2. flex_start: 与交叉轴起点对齐。
  3. flex_end: 与交叉轴终点对齐。
  4. center: 与交叉轴居中对齐。
  5. space_between: 交叉轴两端对齐,中间间隔相等。
  6. space_around: 到交叉轴两端的距离相等。
 <com.google.android.flexbox.FlexboxLayout
        android:id="@+id/flexbox_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:alignContent="flex_start"
        app:flexWrap="wrap"
        app:alignItems="center"
        >
..............

子元素的属性

layout_order

layout_order 属性可以改变子元素的排列顺序,默认情况下,FlexboxLayout子元素的排列是按照xml文件中出现的顺序。默认值为1,值越小排在越靠前。

layout_flexGrow(float)

layout_flexGrow 子元素的放大比例, 决定如何分配剩余空间(如果存在剩余空间的话),默认值为0,不会分配剩余空间,如果有一个item的 layout_flexGrow 是一个正值,那么会将全部剩余空间分配给这个Item,如果有多个Item这个属性都为正值,那么剩余空间的分配按照layout_flexGrow定义的比例(有点像LinearLayoutlayout_weight属性)。

layout_flexShrink(float)

layout_flexShrink:子元素缩小比例,当空间不足时,子元素需要缩小(设置了换行则无效),默认值为1,如果所有子元素的layout_flexShrink 值为1,空间不足时,都等比缩小,如果有一个为0,其他为1,空间不足时,为0的不缩小,负值无效。

layout_alignSelf

layout_alignSelf 属性可以给子元素设置对齐方式,上面讲的alignItems属性可以设置对齐,这个属性的功能和alignItems一样,只不过alignItems作用于所有子元素,而 layout_alignSelf 作用于单个子元素。默认值为auto, 表示继承alignItems属性,如果为auto以外的值,则会覆盖alignItems属性。有以下6种取值:

  • auto (default)
  • flex_start
  • flex_end
  • center
  • baseline
  • stretch

除了auto以外,其他和alignItems属性一样。

layout_flexBasisPercent (fraction)

layout_flexBasisPercent的值为一个百分比,表示设置子元素的长度为它父容器长度的百分比,如果设置了这个值,那么通过这个属性计算的值将会覆盖layout_width或者layout_height的值。但是需要注意,这个值只有设置了父容器的长度时才有效(也就是MeasureSpec mode 是 MeasureSpec.EXACTLY)。默认值时-1。

layout_minWidth / layout_minHeight (dimension)

强制限制 FlexboxLayout的子元素(宽或高)不会小于最小值,不管layout_flexShrink这个属性的值为多少,子元素不会被缩小到小于设置的这个最小值。

layout_maxWidth / layout_maxHeight (dimension)

这个和上面的刚好相反,强制限制FlexboxLayout子元素不会大于这个最大值, 不管layout_flexGrow的值为多少,子元素不会被放大到超过这个最大值。

layout_wrapBefore

layout_wrapBefore 属性控制强制换行,默认值为false,如果将一个子元素的这个属性设置为true,那么这个子元素将会成为一行的第一个元素。这个属性将忽略flex_wrap 设置的 noWrap值。

 

更多属性或功能去官网查看,本案例希望对各位有那么帮助。

 

 

不足之处请留言指正!有问题的可以给我留言!谢谢!

 

由于代码太多,就不一一贴出来了,直接下载即可, 源码点击下载

© 著作权归作者所有

切切歆语
粉丝 21
博文 341
码字总数 232987
作品 0
杭州
程序员
私信 提问
Google 开源的 Android 排版库:FlexboxLayout

最近Google开源了一个项目叫「FlexboxLayout」。 1.什么是 Flexbox 简单来说 Flexbox 是属于web前端领域CSS的一种布局方案,是2009年W3C提出了一种新的布局方案,可以简便、完整、响应式地实...

oschina
2016/05/16
18.5K
18
NativeScript 2.4.0 发布,Native 跨平台应用

NativeScript 2.4.0 发布了,NativeScript 可以使用 Javascript,CSS, XML 创建真正的 Native 跨平台应用,支持 iOS Android,NativeScript 将跨平台代码翻译成目标平台的代码。 更新内容: ...

王练
2016/11/18
1K
4
"Flutter基础(十)布局Widget快速入门

本文首发于公众号「刘望舒」 ReactNative入门系列 React Native组件 Flutter基础系列 前言 Flutter的布局在此前的文章多多少少用过,但是没有具体讲过,Flutter的布局实际上也由Widget来控制...

刘望舒
07/18
0
0
每日一问:LayoutParams 你知道多少?

前面的文章中着重讲解了 View 的测量流程。其中我提到了一句非常重要的话:View 的测量匡高是由父控件的 和 View 自身的 `LayoutParams 共同决定的。我们在前面的 每日一问:谈谈对 MeasureS...

nanchen2251
06/12
0
0
面向开发者的最佳 Android 库列表

软件库的存在使得Android编码更方便快捷。在如此多 Android库中,我们该如何寻找最合适的一款呢?下面我们做了一个列表供你参考。 动画(Animation) Android View Animations:强大的动画库...

达尔文
2016/11/09
9.2K
16

没有更多内容

加载失败,请刷新页面

加载更多

JS基础-该如何理解原型、原型链?

JS的原型、原型链一直是比较难理解的内容,不少初学者甚至有一定经验的老鸟都不一定能完全说清楚,更多的"很可能"是一知半解,而这部分内容又是JS的核心内容,想要技术进阶的话肯定不能对这个...

OBKoro1
今天
8
0
高防CDN的出现是为了解决网站的哪些问题?

高防CDN是为了更好的服务网络而出现的,是通过高防DNS来实现的。高防CDN是通过智能化的系统判断来路,再反馈给用户,可以减轻用户使用过程的复杂程度。通过智能DNS解析,能让网站访问者连接到...

云漫网络Ruan
今天
14
0
OSChina 周一乱弹 —— 熟悉的味道,难道这就是恋爱的感觉

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @xiaoshiyue :好久没分享歌了分享张碧晨的单曲《今后我与自己流浪》 《今后我与自己流浪》- 张碧晨 手机党少年们想听歌,请使劲儿戳(这里)...

小小编辑
今天
3.1K
24
SpringBoot中 集成 redisTemplate 对 Redis 的操作(二)

SpringBoot中 集成 redisTemplate 对 Redis 的操作(二) List 类型的操作 1、 向列表左侧添加数据 Long leftPush = redisTemplate.opsForList().leftPush("name", name); 2、 向列表右......

TcWong
今天
46
0
排序––快速排序(二)

根据排序––快速排序(一)的描述,现准备写一个快速排序的主体框架: 1、首先需要设置一个枢轴元素即setPivot(int i); 2、然后需要与枢轴元素进行比较即int comparePivot(int j); 3、最后...

FAT_mt
昨天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部