Android Studio中有一个叫 Image Asset Studio 的工具,它可以帮我们把自定义图像、系统图标素材、文本字符串自动生成适配系统的应用图标。相应分辨率都会生成一组对应的图标,存放在 res 文件夹下的相关子文件夹中(例如 mipmap-hdpi/ 或 drawable/)。在运行时,系统会根据运行应用所在设备的屏幕密度来使用相应的资源。

ed2714f7c7c5?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

一. Image Asset Studio介绍

Image Asset Studio 可以帮助我们以不同密度创建各种类型的图标,并且可以显示这些图标在项目中存放的位置。它包含用于调整图标和添加背景的工具,还可以在预览窗口中显示效果,以便可以按我们预想的方式显示。这些工具可以显著简化图标设计和导入过程。

Image Asset Studio可以制作以下几种图标类型:

Launcher Icons(Adaptive and Legacy):AS 3.0后新增,用于自适应启动图标,兼容新旧版系统;

Launcher Icons(Legacy only):用于非自适应的启动图标,仅限旧版系统(Android 8.0之前);

Action Bar and Tab Icons:用于操作栏或标签图标;

Notification Icons:用于通知图标。

二. Image Asset Studio运行

1)选择项目 res 文件夹,然后选择 File > New > Image Asset。或者,右键点击 res 文件夹,然后选择 New > Image Asset;

ed2714f7c7c5?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

2)打开 Image Asset Studio 配置面板;

ed2714f7c7c5?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

三. 创建启动图标

启动图标是一个把你的应用呈现给用户的图形。

1. 自适应新版图标

1)在 Icon Type 类型中,选择 Launcher Icons(Adaptive and Legacy);

ed2714f7c7c5?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

2)选择 Foreground Layer 选项下 Asset Type 类型:

Image:可点击 Path 选择指定图像的路径和文件名;

ed2714f7c7c5?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

Clip Art: 可点击 Clip Art 选择器,在系统图标对话框中选择一个 Material 图标,然后点击 OK;

ed2714f7c7c5?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

Text: 可在 Text 编辑中键入文本字符串,然后选择字体;

ed2714f7c7c5?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

3)选择 Background Layer 选项下 Asset Type 类型:

Color:可点击 Color 颜色选择器,选择指定颜色;

ed2714f7c7c5?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

Image:可点击 Path 选择指定图像的路径和文件名;

ed2714f7c7c5?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

4)选择 Legacy 选项,设置适配兼容新旧系统图标;

ed2714f7c7c5?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

5)设置相关配置:

Layer Name:对应各层的命名;

Shape:可以为源资产添加背景,请选择形状,选项包括圆、正方形、竖直矩形或水平矩形。要想使用透明的背景,请选择 None。默认值为:Square;

Trim:要调整源资产中图标图形与边框之间的边距,请选择 Yes。此操作将移除透明空间,同时保留纵横比。要保持源资产不变,请选择 No。默认值为:No;

Resize:设置资源文件的大小。设置资源文件大小的时候要注意观察预览区域,预览区域里有各种形状类型,每种类型有一个圆实线,圆实线区域以内表示安全区域,我们的图标大小要在安全区域内。

6)选择更改资源目录,点击 Finish 完成。

Res Directory:选择想要在其中添加图像资源源集:src/main/res、src/debug/res、src/release/res 或用户定义的源集。主源集适用于包括调试和发行源集在内的所有构建变体。调试和发布源集将替换主源集,并应用于某个构建版本。调试源集仅适用于调试。要定义新源集,请选择 File > Project Structure > app > Build Types。

Output Directories: 区域显示的图像和文件夹将出现在 Project 窗口的项目文件视图中。

ed2714f7c7c5?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

Image Asset Studio 会针对不同的密度向 mipmap 文件夹添加图像。

2. 非自适应旧版图标

1)在 Icon Type 类型中,选择 Launcher Icons(Legacy only);

ed2714f7c7c5?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

2)选择 Asset Type 类型:

Image:可点击 Path 选择指定图像的路径和文件名;

ed2714f7c7c5?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

Clip Art: 可点击 Clip Art 选择器,在系统图标对话框中选择一个 Material 图标,然后点击 OK;

ed2714f7c7c5?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

Text: 可在 Text 编辑中键入文本字符串,然后选择字体;

ed2714f7c7c5?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

3)设置相关配置:

Trim:要调整源资产中图标图形与边框之间的边距,请选择 Yes。此操作将移除透明空间,同时保留纵横比。要保持源资产不变,请选择 No。默认值为:No;

Padding:如果想要调整全部四侧的源资产内边距,请移动滑块。选择 -10% 和 50% 之间的值。如果您也选择了 Trim,则首先会进行剪裁。默认值为:0%;

Foreground:要更改 Clip Art 或 Text 图标的前景色,请点击字段。在 Select Color 对话框中,指定颜色,然后点击 Choose。字段中会显示新值。默认值为:000000;

Background:要更改背景色,请点击字段。在 Select Color 对话框中,指定颜色,然后点击 Choose。字段中会显示新值。默认值为:FFFFFF;

Scaling:要适合图标大小,请选择 Crop 或 Shrink to Fit。选择裁剪,图像边缘会被剪切;选择缩减,图像边缘不会被剪切。源资产仍然不合适时,如果需要,您可以调整内边距。默认值为:Shrink to Fit;

Shape:要为源资产添加背景,请选择形状,选项包括圆、正方形、竖直矩形或水平矩形。要想使用透明的背景,请选择 None。默认值为:Square;

Effect:如果想要为正方形或矩形的右上角添加折角效果,请选择 DogEar。如果不需要,请选择 None。默认值为:None;

Image Asset Studio 会将图标放置在透明的正方形内,所以边缘上有一些内边距。内边距为标准的下拉阴影图标效果提供了充足的空间。

4)选择更改资源目录,点击 Finish 完成。

Res Directory:选择您想要在其中添加图像资源源集:src/main/res、src/debug/res、src/release/res 或用户定义的源集。主源集适用于包括调试和发行源集在内的所有构建变体。调试和发布源集将替换主源集,并应用于某个构建版本。调试源集仅适用于调试。要定义新源集,请选择 File > Project Structure > app > Build Types。

Output Directories: 区域显示的图像和文件夹将出现在 Project 窗口的项目文件视图中。

ed2714f7c7c5?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

Image Asset Studio 会针对不同的密度向 mipmap 文件夹添加图像。

四. 创建操作栏或标签图标

操作栏图标是置于操作栏中的图形元素,表示各个操作项。

1)在 Icon Type 类型中,选择 Action Bar and Tab Icons;

ed2714f7c7c5?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

2)选择 Asset Type 类型:

Image:可点击 Path 选择指定图像的路径和文件名;

ed2714f7c7c5?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

Clip Art:可点击 Clip Art 选择器,在系统图标对话框中选择一个 Material 图标,然后点击 OK;

ed2714f7c7c5?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

Text:可在 Text 编辑中键入文本字符串,然后选择字体;

ed2714f7c7c5?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

3)设置相关配置:

Trim:要调整源资产中图标图形与边框之间的边距,请选择 Yes。此操作将移除透明空间,同时保留纵横比。要保持源资产不变,请选择 No。默认值为:No;

Padding: 如果想要调整全部四侧的源资产内边距,请移动滑块。选择 -10% 和 50% 之间的值。如果您也选择了 Trim,则首先会进行剪裁。默认值为:0%;

Theme: 选择 HOLO_LIGHT 或 HOLO_DARK。或者,在 Select Color 对话框中指定颜色,选择 CUSTOM,然后点击 Custom color 字段。默认值为:None。

Image Asset Studio 会在透明的正方形内创建图标,所以边缘上有一些内边距。内边距为标准的下拉阴影图标效果提供了充足的空间。

4)选择更改资源目录,点击 Finish 完成。

Res Directory:选择您想要在其中添加图像资源源集:src/main/res、src/debug/res、src/release/res 或用户定义的源集。主源集适用于包括调试和发布源集在内的所有构建变体。调试和发行源集将替换主源集,并应用于某个构建版本。调试源集仅适用于调试。要定义新源集,请选择 File > Project Structure > app > Build Types。

Output Directories: 区域显示的图像和文件夹将出现在 Project 窗口的项目文件视图中。

ed2714f7c7c5?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

Image Asset Studio 会针对不同的密度向 drawable 文件夹添加图像。

五. 创建通知图标

通知是可以在应用的常规 UI 外部向用户显示的消息。当你指示系统发出通知时,它将先以图标的形式显示在通知区域中。要查看通知的详细信息,用户可以打开通知抽屉式导航栏。通知区域和通知抽屉式导航栏均是由系统控制的区域,用户可以随时查看。

1)在 Icon Type 类型中,选择 Notification Icons;

ed2714f7c7c5?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

2)选择 Asset Type 类型:

Image:可点击 Path 选择指定图像的路径和文件名;

ed2714f7c7c5?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

Clip Art:可点击 Clip Art 选择器,在系统图标对话框中选择一个 Material 图标,然后点击 OK;

ed2714f7c7c5?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

Text:可在 Text 编辑中键入文本字符串,然后选择字体;

ed2714f7c7c5?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

3)设置相关配置:

Trim:要调整源资产中图标图形与边框之间的边距,请选择 Yes。此操作将移除透明空间,同时保留纵横比。要保持源资产不变,请选择 No。默认值为:No;

Padding:如果想要调整全部四侧的源资产内边距,请移动滑块。选择 -10% 和 50% 之间的值。如果您也选择了 Trim,则首先会进行剪裁。默认值为:0%;

4)选择更改资源目录,点击 Finish 完成。

Res Directory:选择您想要在其中添加图像资源源集:src/main/res、src/debug/res、src/release/res 或用户定义的源集。主源集适用于包括调试和发行源集在内的所有构建变体。调试和发布源集将替换主源集,并应用于某个构建版本。调试源集仅适用于调试。要定义新源集,请选择 File > Project Structure > app > Build Types。

Output Directories: 区域显示的图像和文件夹将出现在 Project 窗口的项目文件视图中。

ed2714f7c7c5?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

Image Asset Studio 会针对不同的密度向 drawable 文件夹添加图像。

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐