文档章节

【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发布flexbox-layout 能替代FlowLayout吗?

1 概述 Google最近开源了一个和CSS3中FlexBox布局功能类似的flexbox-layout,项目地址: https://github.com/google/flexbox-layout 那么flexbox有什么用呢? 我们看一下CSS3中一篇文章的介绍...

3kqing
2016/06/05
76
0
Google 开源的 Android 排版库:FlexboxLayout

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

oschina
2016/05/16
16K
18
安卓组件控件

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

掘金官方
2017/12/15
0
0
NativeScript 2.4.0 发布,Native 跨平台应用

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

王练
2016/11/18
963
4
Android最佳的开源库(三)

位置 ReactiveLocation:是一个轻量小型但非常实用的Google Play API封装,可以获取位置。 Smart Location Library:简化定位程序使用。 布局 Android Swipe Layout:为对象提供滑动功能,例...

博为峰教研组
2016/11/14
32
0

没有更多内容

加载失败,请刷新页面

加载更多

AS连接网易Mumu模拟器

1、安装模拟器 打开这个网址现在模拟器然后安装 http://mumu.163.com/ 2、安装完成后启动模拟器 3、进入模拟器安装目录 例如本机的安装目录:C:\Program Files (x86)\MuMu\emulator\nemu\vmo...

HGMrWang
24分钟前
7
0
设计要做到扩展性强还挺难的

概述 在日常开发中,有时候你的上司会跟你说,这个模块的设计扩展性要高。把这句话说出来很简单,但是要做到则非常难。导致难的其中一个因素是: 你不熟悉这个行业的业务的玩法 我举个例子来...

Sam哥哥聊技术
25分钟前
2
0
聊聊 scala 的模式匹配

一. scala 模式匹配(pattern matching) pattern matching 可以说是 scala 中十分强大的一个语言特性,当然这不是 scala 独有的,但这不妨碍它成为 scala 的语言的一大利器。 scala 的 patt...

终日而思一
27分钟前
1
0
Spring事物手动回滚

手动回滚: 方法1:在service层方法的catch语句中增加:TransactionAspectSupport.currentTransactionStatus().setRollbackOnly();语句,手动回滚,这样上层就无需去处理异常(现在项目的做法)...

寒风中的独狼
31分钟前
1
0
直角三角形的三角函数

sinA = a/c;A = asin(a/c); 特殊角度的三角函数值

一个小妞
39分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部