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