Android表单屏幕设计实战指南

### Android表单屏幕设计实战指南 #### 1. 构建描述、金额和日期输入框 在设计表单屏幕时，首先要创建一个能够视觉上对描述、金额和日期字段进行分组的组件，这里使用了CardView。同时，还创建了一个可在整个应用中重复使用的维度资源，用于表示单个网格间距单位，方便调整整个应用的网格大小，确保应用具有一致的外观和感觉。 ##### 1.1 创建字符串资源 - 填写资源名称为`label_description`，此命名遵循前缀规则，有助于在源代码中处理大量字符串资源。 - 填写资源值为`Description`，其余字段保持不变，点击“OK”创建新的字符串资源并返回布局编辑器。 ##### 1.2 添加金额和日期输入字段 完成描述框的构建需要添加金额和日期字段，这涉及到对添加的小部件使用更复杂的约束，使它们能够相对定位。具体步骤如下： 1. 拖动另一个`TextInputLayout`到设计界面，放置在描述字段下方，此时该新框暂无约束。 2. 在属性面板中，将其ID更改为`amount_layout`。 3. 如同之前创建`grid_spacer1`资源一样，在属性面板中打开`layout_width`的资源编辑器。 4. 创建一个名为`input_size_amount`的新资源，并将其值设置为`100sp`。`sp`（与缩放无关的像素）是一种相对像素大小，与`dp`不同，它会根据用户的字体偏好进行缩放，常用于指定字体大小，也可用于指定文本输入小部件的固定大小。 5. 拖动右侧约束手柄到布局右侧，再拖动顶部约束手柄到布局顶部。 6. 使用属性面板中的约束编辑器将边距归零。 7. 通过组件树选择`description_layout`的`TextInputLayout`小部件。因为在设计视图中直接选择小部件时，编辑器会选择组件树中最底层的子项，为确保选择正确的小部件，在处理`ConstraintLayout`时，通常最好在组件树中进行选择。 8. 在布局视图中，拖动描述`TextInputLayout`的右侧约束手柄，使其与新的`amount_layout`和`TextInputLayout`的左侧约束手柄对齐。 9. 点击组件树面板中的新`TextInputEditText`小部件。 10. 在属性面板中，将其ID更改为`amount`。 11. 使用属性编辑器将`inputType`更改为`number`。 12. 对于`hint`属性，打开资源编辑器创建一个新的字符串资源。 13. 将资源命名为`label_amount`，并赋予其值`Amount`。 14. 在调色板面板中，打开文本部分，拖动一个新的`TextView`到布局编辑器，为日期输入字段添加标签。 15. 使用属性面板中的约束编辑器添加左右约束，并将边距归零。 16. 将`layout_width`更改为`match_constraint`，使标签占据所有可用宽度。`match_constraint`是`ConstraintLayout`子项的特殊标记属性，会使小部件填充其约束提供的空间，类似于`match_parent`使小部件占据其父项提供的所有空间。 17. 从新`TextView`的顶部拖动一个新约束到描述`TextInputLayout`的底部。 18. 使用资源编辑器为`text`属性创建一个新的字符串资源。 19. 将新资源命名为`label_date`，并将其值设置为`Date`。 20. 仍在属性面板中，将`textAppearance`属性更改为`AppCompat.Caption`，这与`TextInputLayout`在光标聚焦于其`EditText`时用于悬浮标签的文本外观样式相同。 21. 使用`textColor`属性上的资源选择器选择`colorAccent`颜色资源，这是Android Studio为你生成的高亮颜色，也被`TextInputLayout`使用。此时，`TextView`应看起来像`TextInputLayout`的聚焦标签。 22. 从调色板面板拖动另一个`TextView`到设计布局。 23. 使用属性面板将其ID更改为`date`。 24. 创建左右约束并将其设置为零。 25. 将`layout_width`更改为`match_constraint`，使日期`TextView`占据所有水平空间。 26. 从日期`TextView`的顶部拖动约束手柄到其`TextView`标签的底部。 27. 在属性面板顶部，使用“查看所有属性”切换按钮查看所有可用属性。 28. 使用属性搜索框查找`style`属性。 29. 打开`style`属性的资源选择器。 30. 使用搜索框查找`AppCompat.EditText`样式。 31. 清空搜索框，切换回“查看较少属性”面板。 32. 通过删除内容清除`text`属性，使该`TextView`在布局文件中为空。 33. 在组件树中选择`CardView`。 34. 在属性面板中，将其`layout_height`更改为`wrap_content`，此时`CardView`会向上滚动，占据刚好能容纳描述、金额和日期输入小部件的空间。 与描述和金额输入框不同，日期实际上由两个标签组成，它们经过样式设置后，整体看起来像一个聚焦的`TextInputLayout`小部件。这是因为用户将使用日历对话框来填充日期，而不是使用键盘输入，日历对话框更用户友好且不易出错，同时这种样式能让用户熟悉其使用方式。 以下是一个简单的mermaid流程图，展示添加金额和日期输入字段的主要步骤： ```mermaid graph LR A[拖动TextInputLayout到描述字段下方] --> B[更改ID为amount_layout] B --> C[打开layout_width资源编辑器] C --> D[创建input_size_amount资源并设置值为100sp] D --> E[拖动约束手柄] E --> F[将边距归零] F --> G[通过组件树选择description_layout] G --> H[对齐约束手柄] H --> I[点击新TextInputEditText并更改ID为amount] I --> J[更改inputType为number] J --> K[创建label_amount字符串资源] K --> L[添加日期标签TextView] L --> M[添加约束并归零边距] M --> N[更改layout_width为match_constraint] N --> O[拖动日期约束] O --> P[创建label_date字符串资源] P --> Q[更改textAppearance和textColor属性] Q --> R[拖动另一个TextView并更改ID为date] R --> S[创建约束并更改layout_width] S --> T[拖动日期约束手柄] T --> U[查找并设置style属性] U --> V[清除text属性] V --> W[选择CardView并更改layout_height为wrap_content] ``` #### 2. 选择图标文件格式 在设计类别选择器时，需要考虑使用位图图像还是SVG（矢量图形）。以下是它们的对比： | 对比项 | 位图 | 矢量图形 | | ---- | ---- | ---- | | 平台支持 | 所有平台原生支持 | 可能需要支持库才能工作 | | 渲染方式 | 可由GPU处理并完全加速渲染 | 必须先渲染成位图才能显示在屏幕上，耗时较长 | | 占用空间 | 在应用的APK中占用更多空间，尤其是需要为不同屏幕尺寸和密度提供不同副本时 | 以二进制XML文件形式存储，在APK中占用空间极少 | | 缩放质量 | 放大时质量严重下降，缩小时细节丢失 | 可在几乎任何尺寸下渲染，无明显质量或细节损失 | 对于类别选择器小部件，这里选择导入矢量图形图标并将其用作单选按钮。 #### 3. 导入矢量图形图标 以下是导入矢量图形图标的具体步骤： 1. 在Android Studio最左侧的文件视图中，右键单击`res`目录，选择“New” -> “Vector Asset”打开矢量导入工具。 2. 在“Icon”处，点击带有Android机器人的按钮。 3. 使用对话框左上角的搜索框查找“hotel”图标并选择它。 4. 点击“OK”返回导入工具。 5. 导入工具会将建议名称更改为`ic_hotel_black_24dp`，将其更改为`ic_accommodation_black`。 6. 在尺寸框中，选择“Override”复选框并将尺寸更改为`32 dp X 32 dp`。 7. 点击“Next”然后“Finish”完成导入。 8. 重复上述过程，查找房间服务图标，命名为`ic_food_black`，并将尺寸更改为`32 dp X 32 dp`。 9. 对机场班车图标重复操作，命名为`ic_transport_black`，尺寸同样改为`32 dp X 32 dp`。 10. 查找本地电影图标，命名为`ic_entertainment_black`，并更改尺寸。 11. 找到“商务中心”图标，命名为`ic_business_black`，更改尺寸。 12. 最后，找到全包图标，命名为`ic_other_black`，并覆盖其尺寸为`32 dp X 32 dp`。 完成这些步骤后，就拥有了一组黑色图标，可作为类别选择器的基础。 #### 4. 使图标随状态变化 在Android中，图像具有状态，会根据使用它们的小部件改变外观。为了向用户显示他们实际选择的类别，需要在图标上提供视觉指示，这涉及一些编辑操作： 1. 复制生成的`ic_accommodation_black.xml`文件，将其命名为`ic_accommodation_white.xml`，使用复制粘贴操作，在粘贴时要注意确保目标目录为`drawable`，因为默认情况下，Android Studio可能会选择`drawable-xhdpi`目录。 2. 打开新复制的图标文件，其代码如下： ```xml <vector android:height="32dp" android:viewportHeight="24.0" android:viewportWidth="24.0" ```