Android中的flexboxlayout布局
提到FlexboxLayout大家估计有点模糊,它是谷歌最近开源的一个android排版库,它的前身Flexbox是2009年W3C提出了一种新的布局,可以简便、完整、响应式的实现页面布局,Flexbox 是属于web前端领域CSS的一种布局方案。
首先:我们看一下它的属性。
flexDirection:
flexDirection属性是决定主轴的方向。好比LinearLayout的vertical(垂直) 和 horizontal(水平)方向。
flexDirection有四个可选值:
- row:一般为默认值,主轴为水平方向,起点在左端。
- row-reverse: 主轴为水平方向,起点在右端。
- column:主轴为垂直方向,起点在上沿。
- column-reverse:主轴为垂直方向,起点在下沿。
如图:
row:
row-reverse:
column:
column-reverse:
flexWrap:
默认情况下是不支持换行排列。
- nowrap:不换行。
- wrap: 正常方向换行。
- wrap-reverse: 反方向换行。
如图:
wrap:
wrap-reverse:
justifyContent:
指定了项目在主轴上的对齐方式。
- flex-start: 默认值为左对齐。
- flex-end: 右对齐。
- center: 居中。
- space-between: 两端对齐,其间间距相等。
- space-around: 两侧间距相等。
如图:
space-around:
alignltems:
指定项目在副轴轴上的对齐方式。
- flex-start: 交叉轴的起点对齐。(上)
- flex-end: 交叉轴的终点对齐。(下)
- center: 交叉轴的中点对齐。(中间线)
- baseline: 第一行文字的基线对齐。()
- stretch: 默认值是占满整个容器的高度,在未设置高度或者为auto。
如图:
flex-start:
flex-end:
center:
baseline:基线跟图一类似
stretch:默认
alignContent:
指定多根轴线的对齐方式,如果只有一条轴,该属性不起任何作用。
- flex-start: 与交叉轴的起点对齐。
- flex-end: 与交叉轴的终点对齐。
- center: 与交叉轴的中点对齐。
- space-between: 与交叉轴的两端对齐,轴线之间的间隔分布均匀。
- space-around: 每根轴线两侧的间隔相等。
- stretch: 默认值为轴线占满整个交叉轴。
子元素的属性:
layout_order:默认情况下子元素的排列方式按照文档流的顺序依次排序,而order可以控制排列的顺序,负值在前,正直灾后,按照从小到大的顺序一次排列。
layout_flexGrow:指定项目的放大比例,默认为0,如果存在剩余空间,也不放大。如果为1,等分剩余空间。
layout_flexShrink:缩小比例,默认为1,空间不足,项目缩小。如果属性都为1,空间不足时,将等比缩小。负值无效。
layout_alignSelf:允许单个子元素与其它子元素有不一样的对齐方式,可覆盖alignltems属性,默认值为auto,表示继承父元素的alignltems属性,如没有父元素,则等同于stretch。
该属性有6个值,除了auto,其它都与align-items属性一样。
layout_flexBasisPercent:指定了在分配多余空间之前,子元素占据的main size主轴空间,浏览器根据这个属性,计算主轴是否有多余空间。默认值为auto,即子元素的本来大小。图片后续附上。
activity_main.xml
<com.google.android.flexbox.FlexboxLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/flexbox_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:alignContent="flex_start"
app:alignItems="flex_start"
app:flexWrap="wrap"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
tools:showIn="@layout/activity_main"> <TextView
android:id="@+id/textview1"
style="@style/FlexItem"
android:layout_width="@dimen/flex_item_length2"
android:layout_height="@dimen/flex_item_length"
android:text="@string/one" /> <TextView
android:id="@+id/textview2"
style="@style/FlexItem"
android:layout_width="@dimen/flex_item_length3"
android:layout_height="@dimen/flex_item_length"
android:text="@string/two" /> <TextView
android:id="@+id/textview3"
style="@style/FlexItem"
android:layout_width="@dimen/flex_item_length"
android:layout_height="@dimen/flex_item_length"
android:text="@string/three" /> </com.google.android.flexbox.FlexboxLayout>
添加依赖:
compile 'com.google.android:flexbox:0.1.2'
源码git上有,大家可以去git上下载。
Android中的flexboxlayout布局的更多相关文章
- Android中的LinearLayout布局
LinearLayout : 线性布局 在一般情况下,当有很多控件需要在一个界面列出来时,我们就可以使用线性布局(LinearLayout)了, 线性布局是按照垂直方向(vertical)或水平方向 ...
- Android中的五大布局
Android中的五大布局 1.了解布局 一个丰富的界面总是要由很多个控件组成的,那我们如何才能让各个控件都有条不紊地 摆放在界面上,而不是乱糟糟的呢?这就需要借助布局来实现了.布局是一种可用于放置很 ...
- android中的常用布局管理器(三)
接上篇博客 (5)TableLayout 表格布局管理器 在android中,线性布局和表格布局用的是最多的. 在很多的输出操作中,往往会使用表格的形式对显示的数据进行排版,tablelayo ...
- Android中常用的布局
一般分为5大类. Android中所有的空间第一字母都是大写 1.线性布局 LinearLayout 2.相对布局 RelativeLayout 3.帧布局--分层显示 FrameLayout 4. ...
- Android中的五大布局和logcat打印日志
在android中的布局有五大类,有的时候你可能用到一种,但有的时候你也可能需要两种或者三种布局同时一起使用.这五种布局为别为:LinearLayout(线性布局),FrameLayout(框架布局) ...
- Android中的六大布局
继承关系图: 布局XML文件中常用属性: android:layout_width 宽度 android:layout_height 高度 可能的取值为match_parent,wrap_conte ...
- android中的五大布局(控件的容器,可以放button等控件)
一.android中五大布局相当于是容器,这些容器里可以放控件也可以放另一个容器,子控件和布局都需要制定属性. 1.相对布局:RelativeLayout @1控件默认堆叠排列,需要制定控件的相对位置 ...
- android中常用的布局管理器
Android中的几种常用的布局,主要介绍内容有: View视图 RelativeLayout 相对布局管理器 LinearLayout 线性布局管理器 FrameLayout ...
- Android 中常用的布局
一.线性布局----LinearLayout horizontal 水平 <?xml version="1.0" encoding="utf-8"?& ...
随机推荐
- Apache执行Python脚本
由于经常需要到服务器上执行些命令,有些命令懒得敲,就准备写点脚本直接浏览器调用就好了,比如这样: 因为线上有现成的Apache,就直接放它里面了,当然访问安全要设置,我似乎别的随笔里写了安全问题,这里 ...
- 札记:Fragment基础
Fragment概述 在Fragment出现之前,Activity是app中界面的基本组成单位,值得一提的是,作为四大组件之一,它是需要"注册"的.组件的特性使得一个Activit ...
- [.NET] C# 知识回顾 - Event 事件
C# 知识回顾 - Event 事件 [博主]反骨仔 [原文]http://www.cnblogs.com/liqingwen/p/6060297.html 序 昨天,通过<C# 知识回顾 - ...
- UWP开发之Mvvmlight实践九:基于MVVM的项目架构分享
在前几章介绍了不少MVVM以及Mvvmlight实例,那实际企业开发中将以那种架构开发比较好?怎样分层开发才能节省成本? 本文特别分享实际企业项目开发中使用过的项目架构,欢迎参照使用!有不好的地方欢迎 ...
- JavaScript将字符串中的每一个单词的第一个字母变为大写其余均为小写
要求: 确保字符串的每个单词首字母都大写,其余部分小写. 这里我自己写了两种方法,或者说是一种方法,另一个是该方法的变种. 第一种: function titleCase(str) { var new ...
- BPM体系文件管理解决方案分享
一.方案概述 企业管理在很大程度上是通过文件化的形式表现出来,体系文件管理是管理体系存在的基础和证据,是规范企业管理活动和全体人员行为,达到管理目标的管理依据.对与公司质量.环境.职业健康安全等体系有 ...
- Android中ListView实现图文并列并且自定义分割线(完善仿微信APP)
昨天的(今天凌晨)的博文<Android中Fragment和ViewPager那点事儿>中,我们通过使用Fragment和ViewPager模仿实现了微信的布局框架.今天我们来通过使用Li ...
- Ubuntu 16.04 安装 arm-linux-gcc 嵌入式交叉编译环境 问题汇总
闲扯: 实习了将近半年一直在做硬件以及底层的驱动,最近要找工作了发现了对linux普遍要求很高,而且工作岗位也非常多,所以最近一些时间在时不时地接触linux. 正文:(我一时兴起开始写博客,准备不充 ...
- 解决 Error: getaddrinfo EADDRINFO 错误
安装npm失败,提示Error: getaddrinfo EADDRINFO,原因在于虚拟机未连接互联网,悲剧.
- 支付宝web支付
过程 1. 用户下单 2. 商户后台产生订单 3. 请求支付宝web支付页面(将订单信息返回给用户---放在form里面---隐藏起来-----并通过脚本自动提交此form到支付宝web支付页) 4. ...