更改应用图标  

您所在的位置:网站首页 谷歌商店启动器在哪 更改应用图标  

更改应用图标  

2024-07-10 10:22:02| 来源: 网络整理| 查看: 265

1. 准备工作

应用图标是一种区分应用的重要方式,您可以为图标添加独特的样式和外观。应用图标会出现在多个位置,包括主屏幕、“所有应用”界面和“设置”应用。

应用图标也可能会被称为启动器图标。启动器是指当您点按 Android 设备上的主屏幕按钮时所看到的界面,在该界面中可以查看和整理应用、添加 widget 和快捷方式,以及执行其他多种操作。

ec0237fb600dd2a9.png e7a9b86b35f7d6c3.png

如果您使用过不同的 Android 设备,就可能会注意到,启动器界面可能因设备制造商而异。有时,设备制造商会量身打造能够体现其品牌特色的启动器界面。例如,不同制造商可能会以不同的形状显示应用图标,而不一定是上方所示的圆形图标。

例如,他们可能会以方形、圆角方形或方圆形(介于方形和圆形之间)显示所有应用图标。

一张图片,其中展示了各种形状的应用图标

无论设备制造商选择哪种形状,其目的都是为了使单个设备上的所有应用图标具有统一的形状,以便提供一致的用户体验。

一张图片,其中展示了统一形状的图标。

正因如此,Android 平台引入了对自适应图标的支持(自 API 级别 26 起)。为应用实现自适应图标后,您的应用将能够为设备的显示屏量身定制启动器图标,从而适应各种设备。

此 Codelab 为您提供了 Affirmations 应用启动器图标的图片源文件。您将使用 Android Studio 中名为 Image Asset Studio 的工具生成各种版本的启动器图标。之后,您可以将自己所学的知识运用到其他应用的应用图标中!

Affirmations 应用的启动器图标的图片。

前提条件 能够浏览基本 Android 项目的文件,包括资源文件。 能够通过 Android Studio 在模拟器或实体设备上安装 Android 应用。 学习内容 如何更改应用的启动器图标。 如何使用 Android Studio 中的 Image Asset Studio 生成启动器图标资源。 什么是自适应图标,以及为什么它包含两个图层。 将制作的内容 Affirmations 应用的自定义启动器图标。 所需条件 一台安装了最新稳定版 Android Studio 的计算机。 能连接互联网,以便下载图片资源文件。 能够访问 GitHub 下载起始代码

在 Android Studio 中,打开 basic-android-kotlin-compose-training-affirmations 文件夹。

起始代码网址:

https://github.com/google-developer-training/basic-android-kotlin-compose-training-affirmations

包含起始代码的分支名称:intermediate

进入为此项目提供的 GitHub 代码库页面。 验证分支名称是否与此 Codelab 中指定的分支名称一致。例如,在以下屏幕截图中,分支名称为 main。

1e4c0d2c081a8fd2.png

在项目的 GitHub 页面上,点击 Code 按钮,以打开一个弹出式窗口。

1debcf330fd04c7b.png

在弹出式窗口中,点击 Download ZIP 按钮,将项目保存到计算机上。等待下载完成。 在计算机上找到该文件(很可能在 Downloads 文件夹中)。 双击 ZIP 文件进行解压缩。系统将创建一个包含项目文件的新文件夹。 在 Android Studio 中打开项目 启动 Android Studio。 在 Welcome to Android Studio 窗口中,点击 Open。

d8e9dbdeafe9038a.png

注意:如果 Android Studio 已经打开,则改为依次选择 File > Open 菜单选项。

8d1fda7396afe8e5.png

在文件浏览器中,前往解压缩的项目文件夹所在的位置(很可能在 Downloads 文件夹中)。 双击该项目文件夹。 等待 Android Studio 打开项目。 点击 Run 按钮 8de56cba7583251f.png 以构建并运行应用。请确保该应用按预期构建。 2. 启动器图标

设置启动图标的目标是,无论设备型号或屏幕密度如何,您的启动器图标都会呈现清晰简洁的效果。屏幕密度是指屏幕上每英寸的像素数或每英寸的点数 (dpi)。对于中密度设备 (mdpi),屏幕上每英寸有 160 个点,而超超超高密度设备 (xxxhdpi) 的屏幕上每英寸有 640 个点。

为适应不同屏幕密度的设备,您需要提供不同版本的应用图标。

浏览启动器图标文件 如需查看启动器图标在项目内的呈现效果,请在 Android Studio 中打开项目。 在“Project”窗口中,切换到 Project 视图。此视图将显示您项目的文件结构。

eef1b274888f2a1c.png

前往资源目录 (app > src > main > res),然后展开一些 mipmap 文件夹。您应将 Android 应用的启动器图标资源放到这些 mipmap 文件夹中。

b725c14ee21fce54.png

drawable 文件夹中以 XML 文件的形式包含了启动器图标所对应的矢量。就可绘制图标而言,矢量是指一系列在编译时绘制图像的指令。mdpi、hdpi、xhdpi 等是密度限定符,您可以将其附加到资源目录的名称(例如 mipmap,)上,以表明其中的资源适用于特定屏幕密度的设备。以下是 Android 上的密度限定符列表:

mdpi - 适用于中密度屏幕(约 160dpi)的资源 hdpi - 适用于高密度屏幕(约 240dpi)的资源 xhdpi - 适用于超高密度屏幕(约 320dpi)的资源 xxhdpi - 适用于超超高密度屏幕(约 480dpi)的资源 xxxhdpi - 适用于超超超高密度屏幕(约 640dpi)的资源 nodpi - 不能缩放的资源(无论屏幕的像素密度是多少) anydpi - 可针对任何密度进行缩放的资源

注意:您可能会好奇,为何启动器图标资源位于 mipmap 目录中,而其他应用资源位于 drawable 目录中。这是因为,某些启动器显示的应用图标尺寸可能会比设备默认密度级别提供的应用图标尺寸要大。例如,在 hdpi 设备上,某种设备启动器可能需要改用 xhdpi 版本的应用图标。这些目录包含的图标适用于相比默认密度需要更高或更低密度的图标的设备。

如果您点击图片文件,将会看到预览。ic_launcher.webp 文件包含图标的方形版本,而 ic_launcher_round.webp 文件包含图标的圆形版本。每个 mipmap 目录中均提供了这两个版本。

例如,以下便是 res > mipmap-xxxhdpi > ic_launcher_round.webp 的预览效果。请注意,相应资源的尺寸位于右上角。此图片的尺寸为 192px x 192px。

1da42b08b39e8560.png

以下是 res > mipmap-mdpi > ic_launcher_round.webp 的预览效果。它的尺寸仅为 48px x 48px。

5a5eaf5d0c2f67de.png

如您所见,这些位图图片文件由一个固定的像素网格组成。它们是针对特定屏幕分辨率创建的。因此,如果您调整它们的尺寸,图标画质可能会降低。

注意:为了避免应用图标模糊不清,请务必针对每个密度级别(mdpi、hdpi、xhdpi 等)提供不同的图标位图图片。请注意,设备屏幕密度不会刚好是 160 dpi、240 dpi、320 dpi 等。Android 会根据设备的屏幕密度,以最接近的较大密度级别选择资源,然后将其缩小。

现在,您已对启动器图标有所了解,接下来您将学习自适应图标。

3. 自适应图标 前景图层和背景图层

自 Android 8.0 版本(API 级别 26)起,系统支持自适应图标,这种图标能够使应用图标更加灵活并呈现出有趣的视觉效果。对于开发者来说,这意味着应用图标由两个图层组成:前景图层和背景图层。

1af36983e3677abe.gif

在上面的示例中,白色的 Android 图标位于前景图层中,而蓝白网格位于背景图层中。前景图层会叠加在背景图层上。系统会在其上再叠加一个蒙版(在此例中为圆形蒙版),这样就产生了一个圆形应用图标。

浏览自适应图标文件

我们以 Affirmations 应用代码中已经提供的默认自适应图标文件为例进行说明。

在 Android Studio 的“Project”窗口中,找到 res > mipmap-anydpi-v26 资源目录并将其展开。

29758558d7509497.png

注意:添加自适应图标的是 API 级别为 26 的平台,因此自适应图标应该是在具有 -v26 资源限定符的 mipmap 资源目录中声明的。这个限定符意味着,此目录中的资源只会应用到搭载 API 26 (Android 8.0) 或更高版本的设备。在搭载版本 25 或更低版本,且支持密度级别 mipmap 目录的设备上,系统会忽略此目录中的资源文件。

打开 ic_launcher.xml 文件。您会看到: 请注意,该文件中使用了 元素为应用图标的 图层和 图层分别提供资源可绘制对象,从而完成对它们的声明。 返回 Project 视图,并定位背景和前景可绘制对象:res > drawable > ic_launcher_background.xml 和 res > drawable > ic_launcher_foreground.xml。 切换到 Design 视图,查看每个图层的预览效果。

背景:

b24d4a67be43b6d9.png

前景:

c05923559b5541f1.png

这两个都是矢量可绘制对象文件。它们没有以像素为单位的固定尺寸。如果您切换到 Code 视图,就会看到使用 元素声明矢量可绘制对象的 XML 代码。

ic_launcher_foreground.xml

尽管矢量可绘制对象和位图图片描述的都是图片,但二者之间存在一些重要的区别。

除了各个像素处的颜色信息之外,位图图片对其存储的图片并不太了解。而另一方面,矢量图形知道如何绘制用于定义图片的形状。这些指令由一组点、线条和曲线以及相关颜色信息组成。其优势在于,矢量图形可针对任意屏幕密度的任意画布尺寸进行缩放,而不会损害图片质量。

矢量可绘制对象是 Android 平台的矢量图形实现,可在移动设备上展现灵活性。您可以使用 XML 并利用这些可能的元素对其进行定义。您只需要定义一次图片,而不必针对所有密度级别提供各种版本的位图资源。这样可以减少应用的大小,并使其更易于维护。

注意:在选择使用矢量可绘制对象还是位图图片时,需要进行权衡。例如,对于图标来说,矢量可绘制对象是理想之选,因为它们由简单的形状组成;而对于照片,却很难用一系列形状来描述。在这种情况下,使用位图资源会更加有效。

现在,是时候真正地更改应用图标了!

4. 下载新资源

下载以下两个新资源,借助它们,您可为 Affirmations 应用创建自适应图标,而不必费心了解矢量可绘制对象文件的所有细节。其中的内容是利用设计工具自动生成的。

下载 ic_launcher_background.xml,即背景图层的矢量可绘制对象。如果您的浏览器显示了相应的文件而没有下载该文件,请依次选择文件 > 网页另存为…,以将其保存到计算机上。 下载 ic_launcher_foreground.xml,即前景图层的矢量可绘制对象。

请注意,系统对这些前景和背景图层资源有特定要求,例如它们的尺寸都必须为 108dp x 108dp。您可以在 AdaptiveIconDrawable 文档中查看更多详细信息,还可以在 Material Design 网站上查看 Android 图标的设计指南。

由于图标的边缘可能会根据设备制造商提供的蒙版的形状进行剪裁,请务必将图标的关键信息放置在“安全区域”内。安全区域是一个位于前景图层中心且直径为 66dpi 的圆圈。该安全区域之外的内容不应是重要信息(例如背景颜色),即使被裁剪掉也没关系。

5. 更改应用图标

返回到 Android Studio,使用刚刚下载的新资源。

首先,删除带有 Android 图标和绿色网格背景的旧版可绘制资源。在“Project”视图中,右键点击相应文件,然后选择 Delete。

请删除以下内容:

drawable/ic_launcher_background.xml drawable/ic_launcher_foreground.xml

请删除以下内容:

mipmap-anydpi-v26/ mipmap-hdpi/ mipmap-mdpi/ mipmap-xhdpi/ mipmap-xxhdpi/ mipmap-xxxhdpi/

您可以取消选中 Safe delete (with usage search) 框,然后点击 OK。Safe delete (with usage search) 功能会通过搜索代码来找出要删除的资源的使用情况。在这种情况下,您需要将这些文件夹替换为名称相同的新文件夹,这样就无需担心安全删除了。

创建一个新的 Image Asset。您可以右键点击 res 目录,然后依次选择 New > Image Asset;也可以先点击 Resource Manager 标签页,再点击 + 图标,然后从下拉菜单中选择 Image Asset。

dbe59156de9fde40.png

系统将打开 Android Studio 的 Image Asset Studio 工具。 保留默认设置: Icon Type: Launcher Icons (Adaptive and Legacy) Name: ic_launcher

4729e4abc9542d87.png

选中 Foreground Layer 标签页后,前往 Source Asset 子部分。在 Path 字段中,点击文件夹图标。 此时系统会弹出浏览计算机并选择文件的提示。找到您刚下载的新 ic_launcher_foreground.xml 文件的位置。它可能位于计算机的下载文件夹中。找到该文件后,点击 Open。 Path 现已更新为新前景矢量可绘制对象的位置。将 Layer Name 保留为 ic_launcher_foreground,Asset Type 保留为 Image。

2f59e5ac70a8a033.png

接下来,切换到界面的 Background Layer 标签页。保留默认值。 点击 Path 字段中的文件夹图标。 找到您刚下载的 ic_launcher_background.xml 文件的位置。点击 Open。

dc0aee541c8039e7.png

在您选择新资源文件时,预览应该会相应地进行更新。以下便是使用新的前景图层和背景图层后的图标预览效果。

a111303e7703fc99.png

用两个图层呈现应用图标后,设备制造商(即原始设备制造商,或简称为“OEM”)便可以根据具体的 Android 设备创建不同的形状,如上面的预览所示。OEM 会提供一个将应用到设备上所有应用图标的蒙版。

如果向应用图标的两个图层应用圆形蒙版,将生成一个带有蓝色网格背景且其中显示 Android 图片的圆形图标(如上图左侧图片所示)。或者,可以应用圆角方形蒙版,以生成如上图右侧图片所示的应用图标。

同时具有前景图层和背景图层,便可实现有趣的视觉效果,因为这两个图层可以彼此独立移动并缩放。不妨查看博文“设计自适应图标”中“设计注意事项”下的内容,了解一些有关视觉效果的有趣示例。由于您不知道用户将会使用什么设备,或者 OEM 将会为您的图标应用哪种蒙版,您需要设置自己的自适应图标,以免重要信息被裁剪掉。

如果重要的内容会被裁减掉,或者显示的太小,您可以使用每个图层的 Scaling 部分下的 Resize 滑动条,确保每个元素都显示在安全区域中。为了确保所有内容均不会被裁剪,请拖动 Foreground Layer 和 Background Layer 标签页中的 Resize 滑块,将前景图片和背景图片的大小调整至 99%。

57fec53a0411f206.png

点击 Next。 此步骤为 Confirm Icon Path。您可以点击各个文件,查看预览效果。

4b0a24f0cbd9a2a2.png

点击 Finish。 确认 mipmap 文件夹中所有生成的资源均正确显示。示例:

339af1a3b9ff550c.png 31bc221b0e4b8206.png

太棒了!现在,您将需要再进行一项更改。

测试应用 测试是否显示新的应用图标。在设备(模拟器或实体设备)上运行应用。 点击设备上的主屏幕按钮。 向上滑动以显示所有应用列表。 查找您刚刚更新的应用。您应该会看到系统显示新的应用图标。

c943f8c37c450545.png

注意:根据设备型号,您可能会看到不同形状的启动器图标。无论如何,系统都应在背景图层上显示前景图层,并应用某类蒙版。

非常棒!新的应用图标看起来非常棒。

自适应和旧版启动器图标

现在,您的自适应图标可以正常运行了,您可能会好奇,为何不能删除所有的应用图标位图图片。您仍需要这些文件,以便应用图标能够在旧版 Android 上呈现出较高的质量,这被称为向后兼容性。

在搭载 Android 8.0 或更高版本(API 26 及更高版本)的设备上,系统可以使用自适应图标(由前景矢量可绘制对象、背景矢量可绘制对象以及在其上应用的 OEM 蒙版组合而成)。以下是您项目中的相关文件:

res/drawable/ic_launcher_background.xml res/drawable/ic_launcher_foreground.xml res/mipmap-anydpi-v26/ic_launcher.xml res/mipmap-anydpi-v26/ic_launcher_round.xml

在搭载 Android 8.0 以下的任意版本(但高于您的应用所需的最低 API 级别)的设备上,系统将使用旧版启动器图标(位于不同密度级别的 mipmap 文件夹中的位图图片)。以下是您项目中的相关文件:

res/mipmap-mdpi/ic_launcher.webp res/mipmap-mdpi/ic_launcher_round.webp res/mipmap-hdpi/ic_launcher.webp res/mipmap-hdpi/ic_launcher_round.webp res/mipmap-xhdpi/ic_launcher.png res/mipmap-xhdpi/ic_launcher_round.webp res/mipmap-xxhdpi/ic_launcher.webp res/mipmap-xxhdpi/ic_launcher_round.webp res/mipmap-xxxhdpi/ic_launcher.webp res/mipmap-xxxhdpi/ic_launcher_round.webp

实际上,在不支持自适应图标的旧版设备上,Android 将回退为使用位图图片。

恭喜!您已完成更改应用图标的所有步骤!

6. 获取解决方案代码

如需下载完成后的 Codelab 代码,您可以使用以下 Git 命令:

$ git clone https://github.com/google-developer-training/basic-android-kotlin-compose-training-affirmations.git $ cd basic-android-kotlin-compose-training-affirmations $ git checkout main

或者,您也可以下载 ZIP 文件形式的代码库,将其解压缩并在 Android Studio 中打开。

注意:解决方案代码位于所下载代码库的 main 分支中。

如果您想查看解决方案代码,请前往 GitHub 查看。

进入为此项目提供的 GitHub 代码库页面。 验证分支名称是否与此 Codelab 中指定的分支名称一致。例如,在以下屏幕截图中,分支名称为 main。

1e4c0d2c081a8fd2.png

在项目的 GitHub 页面上,点击 Code 按钮,以打开一个弹出式窗口。

1debcf330fd04c7b.png

在弹出式窗口中,点击 Download ZIP 按钮,将项目保存到计算机上。等待下载完成。 在计算机上找到该文件(很可能在 Downloads 文件夹中)。 双击 ZIP 文件进行解压缩。系统将创建一个包含项目文件的新文件夹。 在 Android Studio 中打开项目 启动 Android Studio。 在 Welcome to Android Studio 窗口中,点击 Open。

d8e9dbdeafe9038a.png

注意:如果 Android Studio 已经打开,则改为依次选择 File > Open 菜单选项。

8d1fda7396afe8e5.png

在文件浏览器中,前往解压缩的项目文件夹所在的位置(很可能在 Downloads 文件夹中)。 双击该项目文件夹。 等待 Android Studio 打开项目。 点击 Run 按钮 8de56cba7583251f.png 以构建并运行应用。请确保该应用按预期构建。 7. 总结 将应用图标文件放到 mipmap 资源目录中。 针对各个密度级别(mdpi、hdpi、xhdpi、xxhdpi、xxxhdpi)提供不同版本的应用图标位图图片,以便向后兼容旧版 Android。 向资源目录添加资源限定符,以指定应在具有特定配置的设备上使用的资源(v24 或 v26)。 矢量可绘制对象是 Android 平台的矢量图形实现。它们使用 XML 以一组点、线条和曲线以及相关颜色信息的形式进行定义。矢量可绘制对象可针对任何密度进行缩放,而不会降低图片质量。 API 级别为 26 的 Android 平台中引入了自适应图标。它们由符合特定要求的前景和背景图层组成,因此您的应用图标在采用不同 OEM 蒙版的各种设备上都能呈现出较高的质量。 使用 Android Studio 中的 Image Asset Studio 为您的应用创建旧版图标和自适应图标。 8. 了解更多内容 有关 Android 图标的设计指南 自适应图标 了解 Android 自适应图标 设计自适应图标 实现自适应图标 Adaptive Icon Playground 应用 创建自适应和旧版启动器图标 支持不同的像素密度 将应用图标放在 mipmap 目录中 矢量可绘制对象概览 VectorDrawable 类


【本文地址】

公司简介

联系我们

今日新闻


点击排行

实验室常用的仪器、试剂和
说到实验室常用到的东西,主要就分为仪器、试剂和耗
不用再找了,全球10大实验
01、赛默飞世尔科技(热电)Thermo Fisher Scientif
三代水柜的量产巅峰T-72坦
作者:寞寒最近,西边闹腾挺大,本来小寞以为忙完这
通风柜跟实验室通风系统有
说到通风柜跟实验室通风,不少人都纠结二者到底是不
集消毒杀菌、烘干收纳为一
厨房是家里细菌较多的地方,潮湿的环境、没有完全密
实验室设备之全钢实验台如
全钢实验台是实验室家具中较为重要的家具之一,很多

推荐新闻


图片新闻

实验室药品柜的特性有哪些
实验室药品柜是实验室家具的重要组成部分之一,主要
小学科学实验中有哪些教学
计算机 计算器 一般 打孔器 打气筒 仪器车 显微镜
实验室各种仪器原理动图讲
1.紫外分光光谱UV分析原理:吸收紫外光能量,引起分
高中化学常见仪器及实验装
1、可加热仪器:2、计量仪器:(1)仪器A的名称:量
微生物操作主要设备和器具
今天盘点一下微生物操作主要设备和器具,别嫌我啰嗦
浅谈通风柜使用基本常识
 众所周知,通风柜功能中最主要的就是排气功能。在

专题文章

    CopyRight 2018-2019 实验室设备网 版权所有 win10的实时保护怎么永久关闭