文档章节

【39】FlexboxLayout使用介绍

fengsehng
 fengsehng
发布于 2016/11/09 09:15
字数 1291
阅读 29
收藏 0
点赞 0
评论 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 ⋅ 0

Google 开源的 Android 排版库:FlexboxLayout

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

oschina ⋅ 2016/05/16 ⋅ 18

安卓组件控件

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

掘金官方 ⋅ 2017/12/15 ⋅ 0

NativeScript 2.4.0 发布,Native 跨平台应用

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

王练 ⋅ 2016/11/18 ⋅ 4

Android最佳的开源库(三)

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

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

Android列表,嵌套滑动

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

掘金官方 ⋅ 2017/12/15 ⋅ 0

android各种效果库

可能是最优雅的切换布局的方法 动态切换布局控件 android 实现画板功能 本例详细分析了一个画板功能的实现过程,并讲述了图像混合和双缓冲技术的基本原理。 有关Activity样式 、状态栏透明、...

掘金官方 ⋅ 2017/12/28 ⋅ 0

安卓View

【Android 自定义 View 实战】之自定义项目通用的标题栏 CustomTitleBar 【Android 自定义 View 实战】之自定义项目通用的标题栏 CustomTitleBar 动手打造一个小巧且高效的线性图表组件——S...

掘金官方 ⋅ 01/05 ⋅ 0

烂泥:学习ssh之ssh隧道应用

本文由ilanniweb提供友情赞助,首发于烂泥行天下 想要获得更多的文章,可以关注我的微信ilanniweb。 前几篇有关ssh的文章,我们只是介绍了ssh的登录功能。其实ssh功能不只是这些,这篇文章我...

烂泥行天下 ⋅ 2015/09/18 ⋅ 0

GeoHash核心原理解析

引子 机机是个好动又好学的孩子,平日里就喜欢拿着手机地图点点按按来查询一些好玩的东西。某一天机机到北海公园游玩,肚肚饿了,于是乎打开手机地图,搜索北海公园附近的餐馆,并选了其中一...

凯文加内特 ⋅ 2015/09/07 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

个人博客的运营模式能否学习TMALL天猫质量为上?

心情随笔|个人博客的运营模式能否学习TMALL天猫质量为上? 中国的互联网已经发展了很多年了,记得在十年前,个人博客十分流行,大量的人都在写博客,而且质量还不错,很多高质量的文章都是在...

原创小博客 ⋅ 今天 ⋅ 0

JavaScript零基础入门——(十一)JavaScript的DOM操作

JavaScript零基础入门——(十一)JavaScript的DOM操作 大家好,欢迎回到我们的JavaScript零基础入门。最近有些同学问我说,我讲的的比书上的精简不少。其实呢,我主要讲的是我在开发中经常会...

JandenMa ⋅ 今天 ⋅ 0

volatile和synchronized的区别

volatile和synchronized的区别 在讲这个之前需要先了解下JMM(Java memory Model :java内存模型):并发过程中如何处理可见性、原子性、有序性的问题--建立JMM模型 详情请看:https://baike.b...

MarinJ_Shao ⋅ 今天 ⋅ 0

深入分析Kubernetes Critical Pod(一)

Author: xidianwangtao@gmail.com 摘要:大家在部署Kubernetes集群AddOn组件的时候,经常会看到Annotation scheduler.alpha.kubernetes.io/critical-pod"="",以表示这是一个关键服务,那你知...

WaltonWang ⋅ 今天 ⋅ 0

原子性 - synchronized关键词

原子性概念 原子性提供了程序的互斥操作,同一时刻只能有一个线程能对某块代码进行操作。 原子性的实现方式 在jdk中,原子性的实现方式主要分为: synchronized:关键词,它依赖于JVM,保证了同...

dotleo ⋅ 今天 ⋅ 0

【2018.06.22学习笔记】【linux高级知识 14.4-15.3】

14.4 exportfs命令 14.5 NFS客户端问题 15.1 FTP介绍 15.2/15.3 使用vsftpd搭建ftp

lgsxp ⋅ 今天 ⋅ 0

JeeSite 4.0 功能权限管理基础(Shiro)

Shiro是Apache的一个开源框架,是一个权限管理的框架,实现用户认证、用户授权等。 只要有用户参与一般都要有权限管理,权限管理实现对用户访问系统的控制,按照安全规则或者安全策略控制用户...

ThinkGem ⋅ 昨天 ⋅ 0

python f-string 字符串格式化

主要内容 从Python 3.6开始,f-string是格式化字符串的一种很好的新方法。与其他格式化方式相比,它们不仅更易读,更简洁,不易出错,而且速度更快! 在本文的最后,您将了解如何以及为什么今...

阿豪boy ⋅ 昨天 ⋅ 0

Python实现自动登录站点

如果我们想要实现自动登录,那么我们就需要能够驱动浏览器(比如谷歌浏览器)来实现操作,ChromeDriver 刚好能够帮助我们这一点(非谷歌浏览器的驱动有所不同)。 一、确认软件版本 首先我们...

blackfoxya ⋅ 昨天 ⋅ 0

线性回归原理和实现基本认识

一:介绍 定义:线性回归在假设特证满足线性关系,根据给定的训练数据训练一个模型,并用此模型进行预测。为了了解这个定义,我们先举个简单的例子;我们假设一个线性方程 Y=2x+1, x变量为商...

wangxuwei ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部