Android 设备种类繁多，外形和屏幕尺寸各不相同，因此针对特定像素完美的完整标识进行设计不仅无效，还可能会对用户体验产生负面影响。相反，您应以自适应的方式进行设计、构建和思考。我们最近推出了新的 API，引入了一些熟悉的设计概念，可帮助您构建自适应布局。
Pawparazzi 是一款展示这些概念的示例应用。它旨在突出显示使用自适应 API（例如 Grid 和 Flexbox）的自适应设计。
自适应思维不仅涉及使用断点进行设计，还涉及在灵活的容器中考虑内容。
一切皆为网格！
拥有用于构建内容的基础有助于采用良好的设计实践，并帮助您确定内容应如何调整。Android 具有一个基本的 8 dp 基准网格，我们可以将所有内容在微观层面上对齐到该网格。
Pawparazzi 使用的是分层布局网格，而不是均匀的模块化网格或单向列网格，这意味着构成它的列和行是根据内容层次结构确定的。
网格类型的选择应取决于内容。首先，从应用内容入手，思考如何将内容分组。这有助于确定整体布局结构。如需详细了解如何以窗格为单位进行思考，请参阅网格和单元、内容结构和桌面设备入门。
对于 Pawparazzi，主要目标是以各种方式查看团队的宠物，首先是宠物概览、宠物详细信息，然后是宠物排名。这意味着宠物图库将占据主要内容窗格和网格的更多空间，然后是导航和过滤元素。当有更多空间时，此功能可让图库扩展到更多行，显示更多宠物，并同时显示宠物详细信息。这种自适应原则是显示，即在较大的布局上显示更多内容。
通过了解应用的主要目标和内容，我们确定了布局网格需要以何种方式在何时进行调整：哪些窗口类大小、铰链放置位置和设备屏幕方向。
从布局网格来看，子网格有助于构建更灵活的内容结构。 图库本身就是一个网格。对于紧凑型尺寸，则使用 2 列网格。
网格是一种双向布局概念，因此内容可以沿水平方向和垂直方向流动。
这可用于创建更具吸引力的布局或更清晰的视觉层次结构，例如“每周宠物”，其中网格用于传达排名最高的宠物。网格可以是 2x4，但顶部位置跨越 2 列和 2 行。
所有这些都是通过 Grid API 完成的。
灵活使用这些组件
虽然网格涵盖了宏观和微观内容结构，但 Flexbox 有助于处理需要响应其内容的组件。此值用于单向内容，其中仅规定了水平或垂直方向。例如，过滤芯片可以响应其标签，并且过滤区域可以根据过滤条件的数量进行扩展。在大屏幕上使用 Reveal 可一次性显示更多滤镜。
细致的查询
通过设计布局网格并使用网格和 Flexbox，我们可以实现适用于多种屏幕的自适应布局，甚至可以适应可折叠设备等独特的外形。但如果用户使用环境不同，又该怎么办呢？Android 用户可以连接到显示屏或插入鼠标！借助 MediaQuery，我们可以做出细致的设计决策，以适应各种情境下的用户。
在 Pawparazzi 中，这意味着利用精确的指针输入，实现更小的目标区域和更密集的内容。
