用FlexboxLayout构建灵活的布局

在去年的Google I/O大会上，Google发布了 ConstraintLayout他使我们能够使用一个平面的视图层次来构建复杂的界面布局。android studio的视图编辑器也对其实现了完整支持。

与此同时，Google开源了FlexboxLayout 他与CSS Flexible 布局模块具有相同的功能。接下来的例子我们将使用FlexboxLayout实现一些特殊的功能。

你可以把FlexboxLayout理解成一个高级的LinearLayout,他和LinearLayout一样都是在水平和垂直方向上按顺序放置子view,他与LinearLayout最大的不同在于FlexboxLayout 有一个wrapping功能。当你增加flexWrap="wrap"属性后，假如在当前方向上没有足够的空间可以放置新的子view，他会在新的一行上放置子view。

同一布局适配多种屏幕尺寸

我们想要在水平方向依次放置一些view，假如有效的空间发生变化后（不同的手机设备、手机方向发生改变、多窗口模式导致的界面重绘等）我们想要在新的一行继续放置上一行没有空闲空间显示的view。

Nexus5X坚屏 Nexus5X横屏 Pixel C 多窗口模式分隔线在左边 Pixel C 多窗口模式分隔线在中间 Pixel C 多窗口模式分隔线在右边

如果你使用传统的布局方式来实现这个功能,如LinearLayout、RelativeLayout你需要定义多个 DP-bucket 布局（例如layout-600dp, layout-720dp, layout-1020dp）来处理多屏幕尺寸的问题。但是上边的对话框只使用了一个FlexboxLayout就实现了这个功能。

这个例子中使用了上边提到的flexWrap="wrap"属性

     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     app:flexwrap="wrap">
     ......```
使用flexwrap＝"wrap"你将得到下边的布局效果，而不会是像LinearLayout那样从父布局中溢出
![](https://img.haomeiwen.com/i2758471/39b536593cd5f28e.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

另一个比较有用的属性是layout_flexGrow，他被设置到FlexboxLayout的孩子view上，这个属性有点类似于LinearLayout的layout_weight，不同的地方在于LinearLayout是根据layout_weight的值来将多余的空间分配给每个子view的高或宽，而FlexboxLayout是按照layout_flexGrow属性的值将多余的空间转换为在同一行的子view之间的间隔距离。下边的例子，将layout_flexGrow的值设为1：

<android.support.design.widget.TextInputLayout
android:layout_width="100dp"
android:layout_height="wrap_content"
app:layout_flexgrow="1">

![](https://img.haomeiwen.com/i2758471/a8d81eaca66aedc7.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

你可以从Github上得到完整的[布局文件](https://github.com/google/flexbox-layout/blob/master/app/src/main/res/layout/fragment_flex_item_edit.xml) 

######与RecyclerView结合使用

FlexboxLayout的另外一个好处是他能与RecyclerView结合使用，在最新发布的alpha版本提供了新的RecyclerView布局管理器FlexboxLayoutManager他继承自RecyclerView.LayoutManager，你现在可以用这种更加高效利用内存的方式在滚动容器里实现Flexbox功能。当然你也可以用ScrollView结合FlexboxLayout来达到在可滚动的容器中实现Flexbox功能，但是当容器中的子view数量很多的时候将会导致OutOfMemoryError的发生。事实上有许多可以用FlexboxLayout与RecyclerView结合使用的场景，比如Google 的Photos app 或新闻app。这两个应用都需要显示大量宽度不同的图片。

下边是一个例子，每一个显示在RecyclerView中的图片都有不同的宽度，我们设置flexWrap的值到wrap

FlexboxLayoutManager layoutManager = new FlexboxLayoutManager();
layoutManager.setFlexWrap(FlexWrap.WRAP);

然后设置flexGrow的值（这样就不用依次给每个item设置flexGrow值 ）

void bindTo(Drawable drawable) {
mImageView.setImageDrawable(drawable);
ViewGroup.LayoutParams lp = mImageView.getLayoutParams();
if (lp instanceof FlexboxLayoutManager.LayoutParams) {
FlexboxLayoutManager.LayoutParams flexboxLp =
(FlexboxLayoutManager.LayoutParams) mImageView.getLayoutParams();
flexboxLp.setFlexGrow(1.0f);
}
}

效果如下：

![竖屏](https://img.haomeiwen.com/i2758471/5ffb80a77f3878de.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)



![横屏](https://img.haomeiwen.com/i2758471/d96e539cf7148f10.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

可以看到无论是横屏还是竖屏都能很好的适配。

本篇文章就结束了，如果您有任何问题，欢迎与我联系。如果文中有错误的地方也欢迎您指证，我将不胜感激。

如果您想要查看完整的例子代码请查看：

[Playground 例子app](https://github.com/google/flexbox-layout/tree/dev_recyclerview/demo-playground) - 使用了FlexboxLayout和FlexboxLayoutManager实现
[Cat gallery例子app](https://github.com/google/flexbox-layout/tree/dev_recyclerview/demo-cat-gallery) - 使用FlexboxLayoutManager实现

本文参考自google官方文档 https://android-developers.googleblog.com/2017/02/build-flexible-layouts-with.html