爱天气App实战开发

模块2:创建iWeather项目工程 - 导入全局设计(1)

2019-03-01  本文已影响0人  jingz课程

导入全局设计

项目工程创建完毕后,我们向其中导入一些App的全局设计,其中包括:


应用图标

图标时应用程序的名片,是其最主要的识别途径。图标通常由设计师根据产品创意进行设计并输出图像资源。iWeather应用图标设计如下:

可以根据自己的审美和创意采用自己的图标设计。

将设计图导入项目工程需要一个过程。考虑以下几个因素:

从应用图标的角度来说,解决方案是为不同分辨率级别的屏幕分别生成不同尺寸的图标文件并打包到APK安装包中。当应用程序安装到特定的设备上时,根据当前设备的屏幕分辨率实时确定使用哪一个图标文件。

在Android Studio中展开res文件夹,会看到一组以“mipmap-”为前缀的文件夹:

应用图标

这些目录名称的后缀即对应某一个分辨率级别:

展开这些文件夹,发现其中的文件名字都相同,分为两种:

分别双击打开各个图标文件,发现对应于不同分辨率级别,图标文件大小也逐级增大:

分辨率级别 图标尺寸(像素)
MDPI 48 * 48
HDPI 72 * 72
XHDPI 96 * 96
XXHDPI 144 * 144
XXXHDPI 192 * 192

在比较早的时期,这些不同尺寸的图标由设计师或者开发人员手工制作。无疑这个过程是枯燥繁琐的。更麻烦的是设计方案一旦修改,整个过程又要重新来过并一一替换。

随着Android Studio的发展成熟,现在可以通过Image Asset工具在一张图标设计稿的基础上自动生成匹配各种分辨率级别的全部图标文件。

右键单击app目录,在弹出菜单中选择“New” -> "Image Asset":

Image Asset

接下来弹出Configure Image Asset对话框:

Image Asset配置

此对话框的功能几乎一目了然。保持全部的设置不变,特别是保证Asset Type一项选中的是Image项。然后重新设置“Path”为我们的图标大图:

替换图标

调整“Resize”项目的滑块使图标达到最好的视觉效果,然后点击“Next”按钮进入“Configure Icon Path”对话框:

生成哪些图片资源

这里会提示你新生成的图标文件将覆盖原始的同名文件,并以红色标出。点击“Finish”按钮完成操作。去各个“mipmap”打头的文件夹下查看生成的图标。运行程序并按虚拟手机的Home键,打开应用程序列表看看效果,我们的新图标应该在里面了:

桌面图标生效

然后我们根据设计方案来修改App的UI颜色设置。

上一篇下一篇

猜你喜欢

热点阅读