模块2:创建iWeather项目工程 - 导入全局设计(2)
2019-03-05 本文已影响0人
jingz课程
颜色方案
应用程序总体的颜色方案在设计阶段由设计师提供。iWeather的设计效果图图如下:
![](https://img.haomeiwen.com/i10901316/9deb84f9dd75041f.jpg)
设计图的左上角给出了配色方案:
![](https://img.haomeiwen.com/i10901316/455ac171c22fd6e2.png)
为了方面使用,同时使用户界面主题自动与设计方案中规定的颜色相匹配,我们需要修改“res/values/colors.xml”资源文件。找到这个文件并打开。
在Android Studio中找到一个文件,最基本的方法是在屏幕左上角的工程结构视图中按照目录结构一层层展开来寻找。更加快捷的方式是连按两次“shift”键,在弹出的搜索框中输入文件名进行查找:
![](https://img.haomeiwen.com/i10901316/5a5ac96cf583aaed.png)
随着输入,下方会列出相关联的文件。注意列出的每一个文件名后面括号中的路径——如果查找到若干个同名文件,需要根据后面这个路径来确定到底是哪一个文件。
点击查找到的这个文件即可在主视图中打开。内容目前如下:
![](https://img.haomeiwen.com/i10901316/647933d9d4e078a2.png)
里面有三个颜色,分别是自动产生的主色、主色深色变体以及次要色或强调色。可以看到每个颜色条目左端会显示对应颜色的小方块以便预览。分别用颜色方案中对应的颜色值替换之:
![](https://img.haomeiwen.com/i10901316/d9655b0af641bb96.png)
此时左边的预览色块随着颜色值的修改已经发生变化。
接下来,在colors.xml
中添加尚未定义的颜色值。注意颜色的命名要有意义:
![](https://img.haomeiwen.com/i10901316/a2cccf55036eeecb.png)
在虚拟设备上运行程序查看效果:
![](https://img.haomeiwen.com/i10901316/5ffd6f77c83896c1.png)
原来绿色系的状态栏和ActionBar现在已经被替换成了我们产品设计方案指定的灰黑色系。
接下来,我们来修改一下应用程序序UI风格,以使之符合设计方案。