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