Android 项目流程之基础篇（二）

上一篇文章讲了项目管理工具和需求分析，本篇文章则简单讲解 Android 项目中如何快速进行界面设计。

一般来说，要在这个阶段细化原型设计中的产品界面细节，对 UI 元素和逻辑有比较清晰的定义。具体到这个演示项目中，因为涉及的视觉元素很少，可以只确定界面中用到的颜色表，各个元素的位置、边距和对齐，还有进度条指示器的形状和位置等。 虽然工作不多，其实如果每一项都要从头分析，细致设计的话还是会花费很多功夫。而且，可能因为没有设计经验和相关背景，费尽力气鼓捣出的东西仍然惨不忍睹（比如我）。这时就不如多花些时间学习以下 Google Material Design 的相关内容，尤其关注颜色、尺寸、距离和形状的部分。 这样界面骨架和逻辑就初步完备，剩下的就是“填空题”——当然，填入的内容也有官方的建议。

最重要的：Android 中的 design 库让多种 Material Design 控件和主题能在低版本系统中运行，一定不要忘了添加：

1

implementation 'com.android.support:design:x.y.z'

颜色

特别注意的是选择颜色时并非随意而为，可以借助在线的调色盘工具 Material Palette 实现自动颜色筛选。比如，本项目中我们要使用绿色和粉红色做应用的基本色，蓝色为主色调，粉红色为辅色调，它会自动生成如下的颜色表：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

<?xml version="1.0" encoding="utf-8"?>
<resources>
  <color name="primary">#2196F3</color>
  <color name="primary_dark">#1976D2</color>
  <color name="primary_light">#BBDEFB</color>
  <color name="accent">#FF4081</color>
  <color name="primary_text">#212121</color>
  <color name="secondary_text">#757575</color>
  <color name="icons">#FFFFFF</color>
  <color name="divider">#BDBDBD</color>
</resources>

这就是应用的调色盘，然后再在不同的用途或位置引用不同的颜色名称即可。

可以参考结果网址观察实际效果。 最好不要再向调色盘中多加颜色，这样可以保证即使界面风格“简陋”也不会影响观感。

个人的 demo 这么定义颜色表就足够了，如果是正式的开发商用产品，最好使用 Google 官方提供的 Color Tool 来确定更复杂的颜色表，而且还能确定不同颜色配置下字体显示情况。

距离与尺寸

实际上，可以简单地认为 Material Design 在模仿传统印刷制品的观感和使用方式（当然不完全相同）——比如统一的 1dp 厚度，不能相交的性质等等——实际上界面中大块元素的静态位置排列，也可以认为类似传统印刷品的排版。 好在 Google 在 Material Design Guidelines 中对于各种元素的距离和建议尺寸有很完备的规定，照做就好。如果一定要自己定义元素间距，也最好遵照指示保证它是 8dp 的整数倍。另外，注意在 res/values/dimens.xml 中只是使用数值描述不同尺寸级别，而不要对各个位置的元素和字体描述具体尺寸。

界面元素尺寸在页面 Layout - Metrics & keylines 中有详细的规定

字体的尺寸规定在 Typography 页面中有明确的规定。简略总结如下：

因为字符图像的像素密度不同，中英文字体大小是不同的，中文一般要稍大一些才更容易辨认。

控件

要注意的是，想要完全遵守 Material Design Guidelines 的要求没有相像中那么困难，至少没必要自己定制每个界面元素的显示模式，只要按照官方的文档指示调整每个想要应用 Material Design 风格的元素即可。具体的官方文档可以参考 Material Components for Android，要令列表中的控件实现 Material Design 风格就点选之后按照相应指令操作即可。 另外，注意每个控件可以设置主题，在选择主题的时候也不要忘了使用 Material Design 风格的主题，这样就不用手动处理文字、图标透明度等繁琐问题。

其他

实际上，Android Studio 中的很多模板文件都很好的采用了 Material Design 设计风格，可以减少大量的重复劳动。比如，我在这个 demo 中初始化项目的时候就没有选择 Empty Activity，而是选择了 Navigation Drawer Activity。 这样就能轻松实现 Material Design 风格的沉浸式状态栏、标题栏、侧滑菜单等。其他的模板 Activity 就不再一一介绍了，即使只看模板选择界面的缩略图都能明白内部包含了什么元素。

另外，没有采用 MVP、MVVM 等模式的时候，模板文件中的 Java 代码也能节省很多编码工作。