关于Google新的适配方式---FlexboxLayout


前言

工欲善其事必先利其器,学习FlexboxLayout之前,先看看它是用来干嘛的,都有哪些特性,了解之后,再来利用它。先放上项目地址--flexbox-layout的GitHub地址


正文

  • 概念
    Flexbox,简单理解为弹性盒子,就是一个可伸缩的区域或者空间
    在GitHub上,给出的介绍是一个将CSS Flexible Box Layout Module的类似功能带入Android的库,关于CSS的Flexible Box,这里有一篇介绍比较详细的文章 ,尽管具体语法不同,但是思想是想通的,可以参考。
    FlexboxLayout可以理解成一个高级版的LinearLayout,因为两个布局都把子view按顺序排列。两者之间最大的差别在于FlexboxLayout具有换行的特性。

  • 引入
    稳定版本

dependencies {
    compile 'com.google.android:flexbox:0.2.6'
}

开发测试版本 --包含了Recyclerview的集成

dependencies {
    compile 'com.google.android:flexbox:0.3.0-alpha3'
}

根据个人需求,选择合适版本

  • 用法
  
    <com.google.android.flexbox.FlexboxLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:alignItems="flex_start">

        <TextView
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:background="@color/colorAccent" />

        <TextView
            android:layout_width="100dp"
            android:layout_height="150dp"
            android:background="@color/blue" />

        <TextView
            android:layout_width="100dp"
            android:layout_height="180dp"
            android:background="@color/little_pink_primary" />

        <TextView
            android:layout_width="100dp"
            android:layout_height="50dp"
            android:background="@color/black" />

        <TextView
            android:layout_width="120dp"
            android:layout_height="100dp"
            android:background="@color/orange" />

        <TextView
            android:layout_width="100dp"
            android:layout_height="80dp"
            android:background="@color/side" />

        <TextView
            android:layout_width="80dp"
            android:layout_height="200dp"
            android:background="@color/reset_check" />
    </com.google.android.flexbox.FlexboxLayout>
布局.png

可以看到类似LinearLayout,子元素是依次排列,唯一设置了属性就是app:alignItems="flex_start",那么FlexboxLayout都有哪些属性,每个属性的作用,需要我们一点点梳理,具体分为两个方面,一方面是FlexboxLayout的属性,另一方面是FlexboxLayout子元素的属性

FlexboxLayout属性

  • flexDirecition 子元素在主轴的排列方向
  • app:flexDirection="row" 默认值,水平方向,起点在左,从左到右。
  • app:flexDirection="row_reverse" 和row属性相反,水平方向,从右到左,起点在右端。
  • app:flexDirection="column" 主轴是竖直方向,起点在上端,从上到下。
  • app:flexDirection="column_reverse" 和column相反,竖直方向,起点在下方从下到上

通过四张图的对比,是明显看出来各个属性的作用的

row
row_reverse
column
column_reverse
  • alignItems 子元素在副轴的排列方向,例如:主轴水平方向--副轴竖直方向
  • stretch 默认值,如果子元素未设置高度或设为auto,将占满整个父容器的高度
  • flex_start:顶端对齐
  • flex_end:底部对齐
  • center:居中对齐
  • baseline:子元素的第一行内容的基线对齐
    stretch
flex_start
flex_end
Paste_Image.png

根据图能很明显看出baseline的作用

baseline

  • flexWrap 默认 Flex不换行,更改flexWrap可以支持换行
  • nowrap不换行
  • wrap 换行
  • wrap_reverse 反向换行


    nowrap
wrap
wrap_reverse
  • justifyContent 元素在主轴的对齐方式
  • flex_start 默认,左对齐
  • flex_end 右对齐
    -center 居中对齐
  • space_around 相邻元素两侧间隔相等,两侧元素和边框的间隔是两个元素间隔的一半
  • space-between 两端对齐,相邻两元素间隔相等


    flex_start
flex_end
center
space_around
space-between
  • alignContent 存在多条副轴时,副轴轴线时的对齐方式,子元素只有一行时不起作用

  • stretch 默认值,充满副轴的高度,只有副轴排列app:alignItems="stretch"时,app:alignContent="stretch"才会生效,即app:alignItems="stretch"且app:alignContent="stretch"


    alignContent="stretch"且app:alignItems="stretch"
  • flex_start 与交叉轴的起点对齐


    flex_start
  • flex_end 与交叉轴的终点对齐

flex_end
  • center:与交叉轴的中点对齐。
center
  • space_around 每根轴线两侧间隔相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍


    space_around
  • space_between 两端对齐,轴线之间的间隔相等


    space_between
  • **showDividerHorizontal **
    控制显示水平方向的分割线,值为none | beginning | middle | end其中的一个或者多个
  • **dividerDrawableHorizontal **
    设置Flex 轴线之间水平方向的分割线。
  • showDividerVertical
    控制显示垂直方向的分割线,值为none | beginning | middle | end其中的一个或者多个。
  • dividerDrawableVertical
    设置子元素垂直方向的分割线。
  • showDivider
    控制显示水平和垂直方向的分割线,值为none | beginning | middle | end其中的一个或者多个。
  • dividerDrawable
    设置水平和垂直方向的分割线,但是注意,如果同时和其他属性使用,比如为 Flex 轴、子元素设置了justifyContent="space_around" 、alignContent="space_between" 等等。可能会看到意料不到的空间,因此应该避免和这些值同时使用。

FlexboxLayout子元素属性

  • layout_order
    子元素默认是按照元素的位置先后排列的,但是layout_order的值可以控制元素的排列顺序,按照数字的大小排列,例如将第三个元素layout_order 设置-1
第三个元素出现在第一个的位置
  • layout_flexGrow 元素放大比例,默认为0,类似于 LinearLayout 中的layout_weight属性,根据比例等分,如果有一个子元素的 layout_flexGrow 是一个正值,那么会将全部剩余空间分配给这个Item,如果有多个Item这个属性都为正值,那么剩余空间的分配按照layout_flexGrow定义的比例等分。

  • layout_flexShrink 子元素缩小比例,默认为1,当子元素多行时无效
    如果所有子元素的layout_flexShrink 值为1,空间不足时,都等比缩小,如果有一个为0,其他为1,空间不足时,为0的不缩小,负值无效。

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

  • auto (default) 继承父元素alignItems 属性,父元素alignItems 属性不存在则默认stretch

  • flex_start 同alignItems 的flex_start属性

  • flex_end 同alignItems 的flex_end属性

  • center 同alignItems 的cente属性

  • baseline 同alignItems 的baseline属性

  • stretch 同alignItems 的stretch属性

  • layout_flexBasisPercent 子元素占父容器长度的百分比,覆盖了子元素自身的layout_width或layout_height,前提是父容器的长度或者宽度设置了值,否则无效

layout_flexBasisPercent
  • **layout_minWidth / layout_minHeight ** 强制限定子元素的最小宽度或者最小高度,即使layout_flexShrink缩小比例,也会保证不小于子元素宽度或者高度的最小值

  • **layout_maxWidth / layout_maxHeight ** 强制限定子元素的最大宽度或者最大高度,即使layout_flexGrow放大比例,也会保证不大于子元素宽度或者高度的最大值

  • layout_wrapBefore 强制换行,即使父容器设置了flex_wrap=nowrap,依然将当前元素换到下一行的第一个元素显示。

上面讲到FlexboxLayout有两个版本,内部测试版,添加了与Recyclerview的结合。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 151,829评论 1 331
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 64,603评论 1 273
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 101,846评论 0 226
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,600评论 0 191
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,780评论 3 272
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,695评论 1 192
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,136评论 2 293
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,862评论 0 182
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,453评论 0 229
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,942评论 2 233
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,347评论 1 242
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,790评论 2 236
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,293评论 3 221
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,839评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,448评论 0 181
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,564评论 2 249
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,623评论 2 249

推荐阅读更多精彩内容