Android可伸缩布局－FlexboxLayout(支持RecyclerView集成)
ShaI46
8年前
<h2>1 . 前言</h2> <p>前几天看到Google官方的博客介绍了Google开源的一个强大的布局－FlexboxLayout，看见第一眼我心里的想法是，卧槽，Android 居然有这么一个强大的布局。作为一个有好奇心的工程狮，当然第一时间就去试了试手，效果非常赞，因此这篇文章就介绍一下它的用法和最新版添加的一些特性（支持集成RecyclerView）,本文目录如下：</p> <p><img src="https://simg.open-open.com/show/958c9391b9242cfa11eddb42a850846c.png"></p> <p style="text-align:center">本文目录.png</p> <h2>2 . 什么是FlexboxLayout</h2> <p>那么FlexboxLayout 它到底是个什么东西呢？看一下Github对这个库的介绍:FlexboxLayout is a library project which brings the similar capabilities of <a href="/misc/goto?guid=4959742732118526430" rel="nofollow,noindex">CSS Flexible Box Layout Module</a> to Android. 意思是：FlexboxLayout是一个Android平台上与CSS的 Flexible box 布局模块 有相似功能的库。Flexbox 是CSS 的一种布局方案，可以简单、快捷的实现复杂布局。FlexboxLayout可以理解成一个高级版的LinearLayout，因为两个布局都把子view按顺序排列。两者之间最大的差别在于FlexboxLayout具有换行的特性。</p> <h2>3 . FlexboxLayout示例</h2> <p>既然说FlexboxLayout方便、强大，那么我们就先以一个示例来看一下它的一个简单实用场景：现在很多APP都有标签功能，本节以简书首页的热门专题（标签）为例，看一下使用FlexboxLayout来实现有多方便。</p> <p>简书首页热门专题如下图：</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/e4314ee6e7a27e7cf52d3896fddc56de.png"></p> <p style="text-align:center">简书专题标签.png</p> <p>使用Flexbox实现效果如下：</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/401f00f3776b16b2ff428a330dda3ac3.png"></p> <p style="text-align:center">FlexboxLayout.png</p> <p>添加依赖：</p> <pre> <code class="language-java">compile 'com.google.android:flexbox:0.2.5'</code></pre> <p>代码如下：</p> <pre> <code class="language-java"><?xml version="1.0" encoding="utf-8"?> <com.google.android.flexbox.FlexboxLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/flexbox_layout" app:flexWrap="wrap" app:alignItems="center" app:alignContent="flex_start" app:flexDirection="row" app:justifyContent="flex_start" app:showDivider="beginning|middle" app:dividerDrawable="@drawable/divider_shape" > <TextView android:layout_width="wrap_content" android:layout_height="40dp" android:paddingLeft="15dp" android:paddingRight="15dp" app:layout_alignSelf="flex_start" android:text="程序员" android:gravity="center" android:textColor="@color/text_color" android:background="@drawable/label_bg_shape" /> <TextView android:layout_width="wrap_content" android:layout_height="40dp" android:paddingLeft="15dp" android:paddingRight="15dp" app:layout_alignSelf="flex_start" android:text="影视天堂" app:layout_flexGrow="1" android:gravity="center" android:textColor="@color/text_color" android:background="@drawable/label_bg_shape" /> <TextView android:layout_width="wrap_content" android:layout_height="40dp" android:paddingLeft="15dp" android:paddingRight="15dp" app:layout_flexGrow="1" app:layout_alignSelf="flex_start" android:text="美食" android:gravity="center" android:textColor="@color/text_color" android:background="@drawable/label_bg_shape" /> <TextView android:layout_width="wrap_content" android:layout_height="40dp" android:paddingLeft="15dp" android:paddingRight="15dp" app:layout_flexGrow="1" app:layout_alignSelf="flex_start" android:text="漫画.手绘" android:gravity="center" android:textColor="@color/text_color" android:background="@drawable/label_bg_shape" /> <TextView android:layout_width="wrap_content" android:layout_height="40dp" android:paddingLeft="15dp" android:paddingRight="15dp" app:layout_alignSelf="flex_start" android:text="广告圈" android:gravity="center" android:textColor="@color/text_color" android:background="@drawable/label_bg_shape" /> <TextView android:layout_width="wrap_content" android:layout_height="40dp" android:paddingLeft="15dp" android:paddingRight="15dp" app:layout_alignSelf="flex_start" android:text="旅行.在路上" android:gravity="center" android:textColor="@color/text_color" android:background="@drawable/label_bg_shape" /> <TextView android:layout_width="wrap_content" android:layout_height="40dp" android:paddingLeft="15dp" android:paddingRight="15dp" app:layout_alignSelf="flex_start" android:text="娱乐八卦" android:gravity="center" android:textColor="@color/text_color" android:background="@drawable/label_bg_shape" /> <TextView android:layout_width="wrap_content" android:layout_height="40dp" android:paddingLeft="15dp" android:paddingRight="15dp" app:layout_alignSelf="flex_start" android:text="青春" android:gravity="center" android:textColor="@color/text_color" android:background="@drawable/label_bg_shape" /> <TextView android:layout_width="wrap_content" android:layout_height="40dp" android:paddingLeft="15dp" android:paddingRight="15dp" app:layout_alignSelf="flex_start" android:text="谈写作" android:gravity="center" android:textColor="@color/text_color" android:background="@drawable/label_bg_shape" /> <TextView android:layout_width="wrap_content" android:layout_height="40dp" android:paddingLeft="15dp" android:paddingRight="15dp" app:layout_alignSelf="flex_start" android:text="短篇小说" android:gravity="center" android:textColor="@color/text_color" android:background="@drawable/label_bg_shape" /> <TextView android:layout_width="wrap_content" android:layout_height="40dp" android:paddingLeft="15dp" android:paddingRight="15dp" app:layout_alignSelf="flex_start" android:text="散文" android:gravity="center" android:textColor="@color/text_color" android:background="@drawable/label_bg_shape" /> <TextView android:layout_width="wrap_content" android:layout_height="40dp" android:paddingLeft="15dp" android:paddingRight="15dp" app:layout_alignSelf="flex_start" android:text="摄影" app:layout_order="2" android:gravity="center" android:textColor="@color/text_color" android:background="@drawable/label_bg_shape" /> </com.google.android.flexbox.FlexboxLayout></code></pre> <p>很简单，就一个布局文件，以FlexboxLayout为父布局，向容器里面添加子Item 就行了。要是不用这FlexboxLayout，以前要实现这样的一个界面，需要自定义View，还是有点麻烦，网上也有很多通过自定义View来实现可伸缩变迁界面的，有兴趣的可以去搜来看一下。要知道，这只是FlexboxLayout的冰山一角，FlexboxLayout真正强大的是它定义的这些属性，通过设置不同的值可以得到不同的效果，接下来就看一下它支持哪些属性。</p> <h2>4 . FlexboxLayout支持的属性介绍</h2> <p>上面说了FlexboxLayout真正强大的是它定义的属性，那么这一节我们看一下Flexbox支持哪些属性,分为2个方面，FlexboxLayout支持的属性和FlexboxLayout 子元素支持的属性：</p> <p>FlexboxLayout 支持的属性：</p> <p>flexDirection</p> <p>flexDirection 属性决定了主轴的方向，即FlexboxLayout里子Item的排列方向，有以下四种取值：</p> <ul> <li>row (default)： 默认值，主轴为水平方向，从左到右。</li> <li>row_reverse：主轴为水平方向，起点在有端，从右到左。</li> <li>column：主轴为竖直方向，起点在上端，从上到下。</li> <li> <p>column_reverse：主轴为竖直方向，起点在下端，从下往上。</p> <p>文字有点苍白无力，看一下四种排列的对比，就明白了：</p> </li> </ul> <p style="text-align:center"><img src="https://simg.open-open.com/show/8e5924dbcad0d1deeea68d2787590c69.png"></p> <p style="text-align:center">Paste_Image.png</p> <p>flexWrap</p> <p>flexWrap 这个属性决定Flex 容器是单行还是多行，并且决定副轴（与主轴垂直的轴）的方向。可能有以下3个值：</p> <ul> <li>noWrap: 不换行，一行显示完子元素。</li> <li>wrap: 按正常方向换行。</li> <li>wrap_reverse: 按反方向换行。</li> </ul> <p>justifyContent</p> <p>justifyContent 属性控制元素主轴方向上的对齐方式，有以下5种取值：</p> <ul> <li>flex_start (default): 默认值，左对齐</li> <li>flex_end: 右对齐</li> <li>center: 居中对齐</li> <li>space_between: 两端对齐，中间间隔相同</li> <li>space_around: 每个元素到两侧的距离相等。</li> </ul> <p>alignItems</p> <p>alignItems 属性控制元素在副轴方向的对齐方式，有以下5种取值：</p> <ul> <li>stretch (default) ：默认值，如果item没有设置高度，则充满容器高度。</li> <li>flex_start：顶端对齐</li> <li>flex_end：底部对齐</li> <li>center：居中对齐</li> <li>baseline：第一行内容的的基线对齐。</li> </ul> <p>文字显示有些苍白无力，用一张图来对比看一下，更好理解(图片来自 <a href="/misc/goto?guid=4959742732219634869" rel="nofollow,noindex">Google 开源的 Android 排版库：FlexboxLayout</a> )：</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/b7f0fdb645f66eace4902b1dcc7765de.png"></p> <p style="text-align:center">AlignItems.png</p> <p>alignContent</p> <p>alignContent 属性控制多根轴线的对齐方式(也就是控制多行，如果子元素只有一行，则不起作用)，可能有一下6种取值：</p> <ul> <li>stretch (default): 默认值，充满交叉轴的高度（测试发现，需要alignItems 的值也为stretch 才有效）。</li> <li>flex_start: 与交叉轴起点对齐。</li> <li>flex_end: 与交叉轴终点对齐。</li> <li>center: 与交叉轴居中对齐。</li> <li>space_between: 交叉轴两端对齐，中间间隔相等。</li> <li>space_around: 到交叉轴两端的距离相等。</li> </ul> <p>showDividerHorizontal</p> <p>showDividerHorizontal 控制显示水平方向的分割线，值为 none | beginning | middle | end 其中的一个或者多个。</p> <p>dividerDrawableHorizontal</p> <p>dividerDrawableHorizontal 设置Flex 轴线之间水平方向的分割线。</p> <p>showDividerVertical</p> <p>showDividerVertical 控制显示垂直方向的分割线，值为 none | beginning | middle | end 其中的一个或者多个。</p> <p>dividerDrawableVertical</p> <p>dividerDrawableVertical 设置子元素垂直方向的分割线。</p> <p>showDivider</p> <p>showDivider 控制显示水平和垂直方向的分割线，值为 none | beginning | middle | end 其中的一个或者多个。</p> <p>dividerDrawable</p> <p>dividerDrawable 设置水平和垂直方向的分割线， 但是注意,如果同时和其他属性使用，比如为 Flex 轴、子元素设置了 justifyContent="space_around" 、 alignContent="space_between" 等等。可能会看到意料不到的空间，因此应该避免和这些值同时使用。</p> <h2>5 . FleboxLayout子元素支持的属性介绍</h2> <p>FlexboxLayout 子元素支持的属性：</p> <p>layout_order</p> <p>layout_order 属性可以改变子元素的排列顺序，默认情况下，FlexboxLayout子元素的排列是按照xml文件中出现的顺序。默认值为1，值越小排在越靠前。</p> <p>layout_flexGrow(float)</p> <p>layout_flexGrow 子元素的放大比例， 决定如何分配剩余空间（如果存在剩余空间的话），默认值为0,不会分配剩余空间，如果有一个item的 layout_flexGrow 是一个正值，那么会将全部剩余空间分配给这个Item,如果有多个Item这个属性都为正值，那么剩余空间的分配按照 layout_flexGrow 定义的比例（有点像 LinearLayout 的 layout_weight 属性）。</p> <p>layout_flexShrink(float)</p> <p>layout_flexShrink :子元素缩小比例，当空间不足时，子元素需要缩小（设置了换行则无效），默认值为1，如果所有子元素的 layout_flexShrink 值为1,空间不足时，都等比缩小，如果有一个为0，其他为1，空间不足时，为0的不缩小，负值无效。</p> <p>layout_alignSelf</p> <p>layout_alignSelf 属性可以给子元素设置对齐方式，上面讲的 alignItems 属性可以设置对齐，这个属性的功能和 alignItems 一样，只不过 alignItems 作用于所有子元素，而 layout_alignSelf 作用于单个子元素。默认值为auto, 表示继承 alignItems 属性，如果为auto以外的值，则会覆盖 alignItems 属性。有以下6种取值：</p> <ul> <li>auto (default)</li> <li>flex_start</li> <li>flex_end</li> <li>center</li> <li>baseline</li> <li>stretch</li> </ul> <p>除了 auto 以外，其他和 alignItems 属性一样。</p> <p>layout_flexBasisPercent (fraction)</p> <p>layout_flexBasisPercent 的值为一个百分比，表示设置子元素的长度为它父容器长度的百分比，如果设置了这个值，那么通过这个属性计算的值将会覆盖 layout_width 或者 layout_height 的值。 但是需要注意，这个值只有设置了父容器的长度时才有效（也就是MeasureSpec mode 是 MeasureSpec.EXACTLY） 。默认值时-1。</p> <p>layout_minWidth / layout_minHeight (dimension)</p> <p>强制限制 FlexboxLayout的子元素（宽或高）不会小于最小值，不管 layout_flexShrink 这个属性的值为多少，子元素不会被缩小到小于设置的这个最小值。</p> <p>layout_maxWidth / layout_maxHeight (dimension)</p> <p>这个和上面的刚好相反，强制限制FlexboxLayout子元素不会大于这个最大值, 不管 layout_flexGrow 的值为多少，子元素不会被放大到超过这个最大值。</p> <p>layout_wrapBefore</p> <p>layout_wrapBefore 属性控制强制换行，默认值为false,如果将一个子元素的这个属性设置为true，那么这个子元素将会成为一行的第一个元素。这个属性将忽略 flex_wrap 设置的 noWrap值。</p> <h2>6 . 与RecyclerView 的结合</h2> <p>在最新的alpha版本，Flexbox能够作为一个LayoutManager(FlexboxlayoutManager) 用在RecyclerView里面，这也就意味着你可以在一个有大量Item的可滚动容器里面使用Flexbox了。</p> <p>来看一下继承RecyclerView 使用的示例:</p> <p>（1）首先要依赖最新的alpha版本，如下：</p> <pre> <code class="language-java">// compile 'com.google.android:flexbox:0.2.5' // 使用最新的alpha版本 compile 'com.google.android:flexbox:0.3.0-alpha2'</code></pre> <p>（2）使用FlexboxLayoutManager代替LinearLayoutManager,如下：</p> <pre> <code class="language-java">FlexboxLayoutManager manager = new FlexboxLayoutManager(); //设置主轴排列方式 manager.setFlexDirection(FlexDirection.ROW); //设置是否换行 manager.setFlexWrap(FlexWrap.WRAP); manager.setAlignItems(AlignItems.STRETCH);</code></pre> <p>(3) 在Adapter里设置 flexGrow :</p> <pre> <code class="language-java">ImageView mImageView = rvBaseViewHolder.getImageView(R.id.image_src); mImageView .setImageResource(mData); ViewGroup.LayoutParams lp = mImageView.getLayoutParams(); if (lp instanceof FlexboxLayoutManager.LayoutParams) { FlexboxLayoutManager.LayoutParams flexboxLp = (FlexboxLayoutManager.LayoutParams) mImageView.getLayoutParams(); flexboxLp.setFlexGrow(1.0f); }</code></pre> <p>效果图如下：</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/5f5b68f4c0ce9bffacc13d885f31cde2.gif"></p> <p style="text-align:center">FlexboxLayoutManager.gif</p> <p>是不是很强大？效果类似瀑布流，但是瀑布流是指定了列数的，这个完全是自定换行，大小屏幕的适配完全解决，简直完美。但是目前与RecyclerView 的集成还是alpha版本,还没有合并到master分支，相信不久后能出稳定的版本。</p> <p>由于RecyclerView 的一些特性，Flexbox 的一些属性在FlexboxLayoutManager中没有实现，下面是FlexboxLayout和FlexboxLayoutManager支持的属性的对比：</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/a888f70ca5803aae92e467f920bd2eb5.png"></p> <p style="text-align:center">支持属性的异同.png</p> <p>注意红框中圈出来的属性，FlexboxlayoutManager是支持View回收的，而FlexboxLayout是不支持View回收的，FlexboxLayout只适用于少量Item的场景，这也是为什么会出现FlexboxLayoutManager的原因吧.</p> <h2>7 . 总结</h2> <p>FlexboxLayout是Google 去年开源的一个与CSS Flexbox有类似功能的强大布局，具有换行特性，使用起来特别方便，但是,FlexboxLayout是没有考虑View回收的，因此，它只使用于只有少量子Item的场景，如果向其中添加大量Item 是灰导致内存溢出的。所幸，最新的版本添加了与RecyclerView的集成，这就可以在有大量子Item的场景下使用了，只是最新的版本还是alpha版，还没有出稳定的版本，相信不久后就能使用稳定的版本了。 另外，FlexboxLayout的这写属性的意义可能不好理解 ，建议大家去写个demo试一下每个属性的每个值看看是什么效果，这样就能很好的理解每个属性了。</p> <p>参考：</p> <p><a href="/misc/goto?guid=4959672737205884462" rel="nofollow,noindex">https://github.com/google/flexbox-layout</a></p> <p><a href="/misc/goto?guid=4959739134472668679" rel="nofollow,noindex">Build flexible layouts with FlexboxLayout</a></p> <p><a href="/misc/goto?guid=4959742732219634869" rel="nofollow,noindex">Google 开源的 Android 排版库：FlexboxLayout</a></p> <p> </p> <p>来自：http://www.jianshu.com/p/3c471953e36d</p> <p> </p>