文档章节

【39】FlexboxLayout使用介绍

fengsehng
 fengsehng
发布于 2016/11/09 09:15
字数 1291
阅读 30
收藏 0

FlexboxLayout介绍:

Flexbox 也称为弹性盒子模型 或伸缩盒子模型,广泛用于前端开发,做过前端 web 的都知道Bootstrap 中有一套强大的 CSS Grid网格样式。Bootstrap 的出现 大大提高了前端开发的效率,并且引领了响应式布局、跨平台开发的潮流。

FlexboxLayout 就是类似于 bootstrap 中的Grid栅格系统但又不相同的强大控件,其实更接近于前端开发中弹性布局

图片展示:

这里写图片描述
这里写图片描述

使用介绍:

Flexbox 是CSS领域的比较强大的一个布局,我们在 Android 开发中使用 Linearlayout + RelativeLayout 基本可以实现大部分复杂的布局,但是Google就想了,有没有类似 Flexbox 的一个布局呢?这使用起来一个布局就可以搞定各种复杂的情况了,于是 FlexboxLayout 就应运而生了。

所以 FlexboxLayout 是针对 Android 平台的,实现类似 Flexbox 布局方案的一个开源项目,开源地址:

使用方式

使用方式很简单,只需要添加以下依赖:

compile ‘com.google.android:flexbox:0.1.2’

xml中这样使用:

这里写图片描述

属性介绍:

flexDirection

flexDirection 属性决定主轴的方向(即项目的排列方向)。类似 LinearLayout 的 vertical 和 horizontal。

有四个值可以选择:

row(默认值):主轴为水平方向,起点在左端。
row-reverse:主轴为水平方向,起点在右端。
column:主轴为垂直方向,起点在上沿。
column-reverse:主轴为垂直方向,起点在下沿。

flexWrap

默认情况下 Flex 跟 LinearLayout 一样,都是不带换行排列的,但是flexWrap属性可以支持换行排列。这个也比 LinearLayout 吊啊有三个值:

nowrap :不换行
wrap:按正常方向换行
wrap-reverse:按反方向换行

justifyContent

justifyContent属性定义了项目在主轴上的对齐方式。

flex-start(默认值):左对齐
flex-end:右对齐
center: 居中
space-between:两端对齐,项目之间的间隔都相等。
space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。

alignItems

alignItems属性定义项目在副轴轴上如何对齐。

flex-start:交叉轴的起点对齐。
flex-end:交叉轴的终点对齐。
center:交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。

alignContent

alignContent属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。

flex-start:与交叉轴的起点对齐。
flex-end:与交叉轴的终点对齐。
center:与交叉轴的中点对齐。
space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。
space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。
stretch(默认值):轴线占满整个交叉轴。

子元素属性

layout_order

默认情况下子元素的排列方式按照文档流的顺序依次排序,而order属性可以控制排列的顺序,负值在前,正值灾后,按照从小到大的顺序依次排列。我们说之所以 FlexboxLayout 相对LinearLayout强就是因为一些属性比较给力,order就是其中之一。
这里写图片描述

layout_flexGrow

layout_flexGrow 属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。一张图看懂。跟 LinearLayout 中的weight属性一样。
这里写图片描述
如果所有项目的 layout_flexGrow 属性都为1,则它们将等分剩余空间(如果有的话)。如果一个项目的 layout_flexGrow 属性为2,其他项目都为1,则前者占据的剩余空间将比其他项多一倍。

layout_flexShrink

layout_flexShrink 属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。

如果所有项目的 layout_flexShrink 属性都为1,当空间不足时,都将等比例缩小。如果一个项目的flex-shrink属性为0,其他项目都为1,则空间不足时,前者不缩小。
负值对该属性无效。

layout_alignSelf

layout_alignSelf 属性允许单个子元素有与其他子元素不一样的对齐方式,可覆盖 alignItems 属性。默认值为auto,表示继承父元素的 alignItems 属性,如果没有父元素,则等同于stretch。

auto (default)
flex_start
flex_end
center
baseline
stretch

该属性可能取6个值,除了auto,其他都与align-items属性完全一致。

layout_flexBasisPercent

layout_flexBasisPercent 属性定义了在分配多余空间之前,子元素占据的main size主轴空间,浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即子元素的本来大小。、

我的微信二维码如下,欢迎交流讨论

这里写图片描述

欢迎关注《IT面试题汇总》微信订阅号。每天推送经典面试题和面试心得技巧,都是干货!

微信订阅号二维码如下:

这里写图片描述

参考博客:

http://blog.csdn.net/github_14899071/article/details/51340863
(来自androidDevloper)
https://mp.weixin.qq.com/s?__biz=MzA4NTQwNDcyMA==&mid=2650661681&idx=1&sn=b151aba0c5fb702492f6bbd82211988d&scene=1&srcid=0516bbqRTNRTj1nwWVbN69o1&pass_ticket=oVKeYzYZa4UP5gbygMH1NXRuKWharDXsH6vNjdqmdI9TTfZWq4UrcXfrp4trra3j#rd
http://www.jcodecraeer.com/a/opensource/2016/0509/4233.html

© 著作权归作者所有

共有 人打赏支持
fengsehng
粉丝 4
博文 284
码字总数 214494
作品 0
朝阳
程序员
私信 提问
Google 开源的 Android 排版库:FlexboxLayout

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

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

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

王练
2016/11/18
1K
4
面向开发者的最佳 Android 库列表

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

达尔文
2016/11/09
8.8K
16
安卓组件控件

ExpandableListView一点点 学习ExpandableListView简单用法 FloatingDragButton:炫酷的拖拽浮动按钮 IOS的Assistive Touch效果很炫酷,可以任意拖拽,同时点击后会展开菜单栏。然而,这不只...

掘金官方
2017/12/15
0
0
Android列表,嵌套滑动

仿淘宝、京东拖拽商品详情(可嵌套ViewPager、ListView、WebView、FragmentTabhost) 对于电商App,商品详情无疑是很重要的一个模块,观察主流购物App的详情界面,发现大部分都是做成了上下两部...

掘金官方
2017/12/15
0
0

没有更多内容

加载失败,请刷新页面

加载更多

mybaties中通用mapper的基本使用

使用Mybatis的开发者,大多数都会遇到一个问题,就是要写大量的SQL在xml文件中,除了特殊的业务逻辑SQL之外,还有大量结构类似的增删改查SQL。而且,当数据库表结构改动时,对应的所有SQL以及...

嘴角轻扬30
3分钟前
0
0
都996了,研发效能还是提不起来,关键在这里

上一篇我们介绍了研发效能提升目标及其度量方法。(本文是阿里“研发效能提升系列”的第2篇,第1篇“研发效能的定义和度量”敬请期待【下周三】的钉钉群直播:钉钉搜索群号 23192180) 研发效...

zhaowei121
3分钟前
0
0
阿里重磅开源首款自研科学计算引擎Mars,揭秘超大规模科学计算

日前,阿里巴巴正式对外发布了分布式科学计算引擎 Mars 的开源代码地址,开发者们可以在pypi上自主下载安装,或在Github上获取源代码并参与开发。 此前,早在2018年9月的杭州云栖大会上,阿里...

阿里云云栖社区
6分钟前
0
0
大牛是怎么思考设计SQL优化方案的?

在进行MySQL的优化之前,必须要了解的就是MySQL的查询过程,很多查询优化工作实际上就是遵循一些原则,让MySQL的优化器能够按照预想的合理方式运行而已。 图-MySQL查询过程 一、优化的哲学 ...

Java填坑路
15分钟前
0
0
docker1.7 Error: Path not specified 错误

在centos6.1上,用yum命令安装的docker版本是1.7 。在拷贝文件的时候报 Error: Path not specified错误。 错误消息“错误:路径未指定” 在docker1.8.0中已修复。 修复方法: 直接下载1.9.1...

applepaihs
15分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部