FlexboxLayout帮助您完成聪明的UI布局

去年我们在 Google I/O 上发布了 ConstraintLayout，使得您在构建复杂布局的同时能够让视图层级得到精简。它在 Android Studio 的 Visual Layout Editor 中也同样可以使用。 

与此同时，我们开源了 FlexboxLayout，使得 Android 里的 CSS Flexible Layout 模块也能拥有同样强大的功能。下面我们介绍几个例子来说明一下 FlexboxLayout 的得力之处。FlexboxLayout 可以理解为高级的 LinearLayout ，因为这两个布局都将其子视图按序排列。二者之间的重要差异在于 FlexboxLayout 具有 “换行” 的特性。 

这意味着，如果您加入 flexWrap=“wrap" 属性，且当前行中剩余空间不够的话，FlexboxLayout 就会将视图放进新行中，如下图所示：

鉴于这一特性，让我们想象一个场景：您想要按序放置视图，但当可用空间改变时（由于不同的设备、屏幕方向更改或由于进入多窗口模式导致的界面重绘等因素），便不得不把它们移动到新行。

△ Nexus 5X 设备：纵向视图

△ Nexus 5X 设备：横向视图

△ Pixel C 设备：多窗口模式，分隔线在左边

△ Pixel C 设备：多窗口模式，分隔线在中间

△ Pixel C 设备：多窗口模式，分隔线在右边

如果您使用传统的 LinearLayout 或 RelativeLayout 等布局方式，需要定义多个 DP-bucket 布局（例如 layout-600dp，layout-720dp，layout-1020dp）来处理各种屏幕尺寸。但上面的对话框只使用了一个 FlexboxLayout 就实现了。 

这个示例使用了上面提到的 flexWrap=“wrap" 属性：

这样子视图会自动换到新行，而不会从父级容器中溢出，如下图所示：

另外一个需要强调的做法就是将 layout_flexGrow 属性设置到一个独立的子项上。这有助于在有可用空间剩余时优化最终布局的观感。layout_flexGrow 属性的运作原理类似于 LinearLayout 中的 layout_weight 属性。这意味着 FlexboxLayout 将根据 layout_flexGrow 设置的值，为同一行中的每个子项分配剩余空间 。 

在下面的示例中，它假设每个子项的 layout_flexGrow 属性的值设为 1，那么剩余空间将均匀分配到每个子项。 

FlexboxLayout 的另一个优点是，它可以与 RecyclerView 结合使用。随着最新 alpha 版的发布，新版 Flexbox 布局管理器对 RecyclerView 布局管理器进行了扩展，现在您可以用更高效利用内存的方式，在可滚动容器中使用 Flexbox 的功能。 

请注意，您现在仍然可以使用 ScrollView 结合 FlexboxLayout 的方式在可滚动容器中实现 flexbox 功能。但是，如果布局中包含的项目数量过大，您可能会遭遇一些故障，甚至出现内存不足的情况。因为 FlexboxLayout 在用户进行滚动操作导致视图被移出屏幕时不会考虑到视图循环。

一个真实的案例，与 RecyclerView 结合使用对于 Google Photos 、News 这些应用来说十分重要，因为它们都需要处理大量项目，并且项目的种类非常繁多。

在 FlexboxLayout  存储库里有这么一个示例，RecyclerView 中显示的每个图像的宽度都不相同，但是通过将 flexWrap 配置设置为 wrap： 

并将每个子项的 flexGrow 设为正值：（如您所见，您可以通过 Flexbox布局管理器 和  Flexbox 布局管理器的 LayoutParams 为子项配置属性，而非从 xml 配置它） 

△ 然后，您便可以看到，无论屏幕方向如何变化，每个图像都恰到好处地镶嵌在布局内。

想亲自动手试试？

您可以马上点击 “阅读原文” 查看有关其他属性的完整文档，以根据您的需要构建灵活的布局。我们非常乐意听取您的反馈，如果您发现任何问题或想要我们实现一些新功能，欢迎您随时在 GitHub 上向我们提出来。