美文网首页爱天气App实战开发
模块2:创建iWeather项目工程 - 导入全局设计(1)

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

作者: jingz课程 | 来源:发表于2019-03-01 13:49 被阅读0次

    导入全局设计

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

    • 应用图标
    • App的主要配色方案
    • App的风格设定

    应用图标

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

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

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

    • Android平台的设备具有差异较大的屏幕分辨率。
    • 一个App产品通常面向所有设备,也就是说App中的全部视觉要素(图标,图片,UI布局,文字等)必须能够同时在不同分辨率的屏幕上正常显示并各自达到最佳视觉效果。

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

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

    应用图标

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

    • ldpi:低分辨率
    • mdpi:中等分辨率(即标准分辨率)
    • hdpi:高分辨率
    • xhdpi:超高分辨率
    • xxhdpi/xxxhdpi/...:没有最高,只有更高

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

    • ic_launcher.png:这是传统的方形图标文件
    • ic_launcher_round.png:这是时髦的圆形图标文件

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

    分辨率级别 图标尺寸(像素)
    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颜色设置。

    相关文章

      网友评论

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

        本文链接:https://www.haomeiwen.com/subject/cdugyqtx.html