Android 8.0系统的应用图标适配

从Android 8.0系统开始，应用程序的图标被分为了两层：前景层和背景层。也就是说，我们在设计应用图标的时候，需要将前景和背景部分分离，前景用来展示应用图标的Logo，背景用来衬托应用图标的Logo。需要注意的是，背景层在设计的时候只允许定义颜色和纹理，但是不能定义形状。

那么应用图标的形状由谁来定义呢？Google将这个权利就交给手机厂商了。不是有些手机厂商喜欢学习苹果的圆角图标吗？没问题，由于应用图标的设计分为了两层，手机厂商只需要在这两层之上再盖上一层mask，这个mask可以是圆角矩形、圆形或者是方形等等，视具体手机厂商而定，就可以瞬间让手机上的所有应用图标都变成相同的规范。原理示意图如下：

可以看到，这里背景层是一张蓝色的网格图，前景层是一张Android机器人Logo图，然后盖上一层圆形的mask，最终就裁剪出了一张圆形的应用图标。

有些朋友可能会觉得这种分成两层的应用图标设计太过于麻烦，不适配可以吗？也有些朋友可能会说，自己的APP并没有做过应用图标适配，在Android 8.0手机上也照样跑得好好的。

事实上，这个新功能Google是准备让它慢慢过渡的，而不是一次性就强推给所有的开发者。如果你的APP中的targetSdkVersion是低于26的，那么就可以不用进行应用图标适配，Android 8.0系统仍然是向下兼容的。但是如果你将targetSdkVersion指定到了26或者更高，那么Android系统就会认为你的APP已经做好了8.0系统的适配工作，当然包括了应用图标的适配。

如果你将targetSdkVersion指定到了26，但是却没有进行Android 8.0系统的应用图标适配，那么会出现什么样的效果呢？这里我举几个反面示例：

这是Google Pixel手机上的截图，操作系统是Android 8.0。可以看到，这两个应用的图标都非常奇怪，本来设计的都是一个圆角矩形的图标，但是却又在外面套上了一个白色的圆圈。为什么会出现这种情况呢？就是因为这两个应用都将targetSdkVersion指定到了26以上，但是却又没有做8.0系统的应用图标适配，而Pixel手机设定的mask是圆形的，所以就自动在应用图标的外层套了一个白色的圆圈。

由此可以看出，爱奇艺和饿了么这两款应用都是没有在Pixel上进行兼容性测试的。不过考虑到它们都是只在国内市场提供服务，因此也情有可原。

当然了，国内的Android 8.0手机很快也要开始普及了，我相信没有任何人会希望自己的APP也出现上述的效果，因此下面我们就来开始具体学习，如何进行8.0系统的应用图标适配。

如果有人问我8.0系统应用图标适配到底难不难？这里我会回答，一点都不难。相信所有看完这篇文章的人立马就能学会，但前提是你需要有一个好的工具——Android Studio 3.0或更高版本。

很高兴告诉大家，Android Studio 3.0中已经内置了8.0系统应用图标适配的功能，如果你已经安装了Android Studio 3.0的话，那么恭喜你，你已经成功了百分之九十了。如果你还在用老版的Android Studio，那么赶快去升级一下，然后再接着看这篇文章。

好的，那么现在我们就用Android Studio 3.0来新建一个项目，就叫它IconTest吧。

创建好项目之后，打开app/build.gradle文件检查一下，确保targetSdkVersion已经指定到了26或者更高，如下所示：

1apply plugin: 'com.android.application'
2android {
3    compileSdkVersion 26
4    defaultConfig {
5        applicationId "com.example.icontest"
6        minSdkVersion 15
7        targetSdkVersion 26
8        versionCode 1
9        versionName "1.0"
10        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
11    }
12}

可以看到，这里我在创建新项目的时候默认targetSdkVersion就是26，如果你是低于26的话，说明你的Android SDK有些老了，最好还是更新一下。当然如果你懒得更新也没关系，手动把它改成26就可以了。

接下来打开AndroidManifest.xml文件，代码如下所示：

1<manifest xmlns:android="http://schemas.android.com/apk/res/android"
2    package="com.example.icontest">
3    <application
4        android:allowBackup="true"
5        android:icon="@mipmap/ic_launcher"
6        android:label="@string/app_name"
7        android:roundIcon="@mipmap/ic_launcher_round"
8        android:supportsRtl="true"
9        android:theme="@style/AppTheme">
10        <activity android:name=".MainActivity">
11            <intent-filter>
12                <action android:name="android.intent.action.MAIN" />
13                <category android:name="android.intent.category.LAUNCHER" />
14            </intent-filter>
15        </activity>
16    </application>
17</manifest>

这里我们需要关注的点是android:icon这个属性，通过这个属性，我们将应用的图标指定为了mipmap目录下的ic_launcher文件。另外大家可能注意到还有一个android:roundIcon属性，这是一个只适用在Android 7.1系统上的过渡版本，很快就被8.0系统的应用图标适配所替代了，我们不用去管它。

刚才说了，应用图标被指定为了mipmap目录下的ic_launcher文件，那么我们快去看下这个文件吧：

这里虽然目录很多，但是相信任何只要是入了门的Android开发者都能看得懂。唯一需要我们留意的就是mipmap-anydpi-v26这个目录，这个目录表示什么意思呢？就是Android 8.0或以上系统的手机，都会使用这个目录下的ic_launcher来作为图标。

你会发现，mipmap-anydpi-v26目录下的ic_launcher并不是一张图片，而是一个XML文件，我们打开这个文件看一下，代码如下所示：

1<?xml version="1.0" encoding="utf-8"?>
2<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
3    <background android:drawable="@drawable/ic_launcher_background" />
4    <foreground android:drawable="@drawable/ic_launcher_foreground" />
5</adaptive-icon>

这是一个8.0系统应用图标适配的标准写法，在<adaptive-icon>标签中定义一个<background>标签用于指定图标的背景层，定义一个<foreground>标签用于指定图标的前景层。

那么我们分别来看一下背景层和前景层分别都是些什么内容吧，首先打开ic_launcher_background文件，内容如下图所示：

这是一个使用SVG格式绘制出来的带纹理的底图。当然如果你看不懂这里面的代码也没有关系，因为我也看不懂。SVG格式的图片都是使用AI、PS等图像编辑软件制作之后导出的，基本没有人可以手工编写SVG图片。

当然，背景层并不是一定要用SVG格式的图片，你也可以使用普通的PNG、JPG等格式的图片，甚至是直接指定一个背景色都可以。

看完了背景层接着我们来看前景层，打开ic_launcher_foreground文件，内容如下所示：

类似地，这里也是使用SVG格式绘制出了一个Android机器人的Logo，并且这个机器人还是带投影效果的。当然了，前景层我们也是可以使用PNG、JPG等格式的图片的，待会儿会进行演示。

好的，现在已经把应用图标相关部分的代码都解释完了，那么这样一个刚刚创建完成的空项目运行起来到底会是什么样的效果呢？我们跑一下看看就知道了，如下图所示：

可以看到，这就是一个前景层盖在背景层上，然后再被圆形mask进行裁剪之后的效果。

好的，那么现在剩下的问题就是，我们如何才能对自己的应用图标在Android 8.0系统上进行适配？

看到爱奇艺的8.0系统应用图标适配工作做得这么差，我就准备拿爱奇艺来做为例子了，我们一起来帮爱奇艺的Android版做个漂亮的应用图标适配吧。

那么很显然，根据8.0系统的应用图标设计，我们需要准备一个前景层和一个背景层才行。

前景层也就是爱奇艺的Logo了，这里我通过Photoshop把爱奇艺的Logo图取了出来。

由于这是一张背景透明的图片，如果直接贴到文章里面就一片白色，啥也看不见了，于是我只好在文章里贴了一张带灰色背景的图片。

解决了前景层，接下来我们来看背景层。其实背景层比前景层就简单多了，一般如果没有什么特殊需求的话，背景层直接使用某种纯色就可以了。

这里我用Photoshop吸取了一下爱奇艺原始应用图标的背景色，值是#04ca00。当然，爱奇艺的背景色并不是完全的纯色，而是有细微的颜色渐变的。不过这里我们只是举例讲解而已，就不追究这些细节了。

那么现在前景层和背景层都准备好了，接下来我们正式开始进行8.0系统的应用图标适配。重新回到IconTest项目当中，然后按下Windows：Ctrl+Shift+A / Mac：command+shft+A 快捷键，并输入Image Asset，如下所示：

点击回车键打开Asset Studio编辑器，在这里就可以进行应用图标适配了。

这个Asset Studio编辑器非常简单好用，一学就会。左边是操作区域，右边是预览区域。

先来看操作区域，第一行的Icon Type保持默认就可以了，表示同时创建兼容8.0系统以及老版本系统的应用图标。第二行的Name用于指定应用图标的名称，这里也保持默认即可。接下来的三个页签，Foreground Layer用于编辑前景层，Background Layer用于编辑背景层，Legacy用于编辑老版本系统的图标。

再来看预览区域，这个就十分简单了，用于预览应用图标的最终效果。在预览区域中给出了可能生成的图标形状，包括圆形、圆角矩形、方形等等。注意每个预览图标中都有一个圆圈，这个圆圈叫作安全区域，必须要保证图标的前景层完全处于安全区域当中才行，否则可能会出现图标被手机厂商的mask裁剪掉的情况。

为了大家能够更加直观地看到操作，这里我使用一张GIF图来演示操作的过程：

最终，Android Studio会自动帮我们生成适配8.0系统的应用图标，以及适配老版本系统的应用图标，我们甚至一行代码都不用写，一切工作就已经完成了。感兴趣的朋友可以自己到mipmap目录下面去观察一下Android Studio帮我们生成了哪些东西，这里就不带着大家一一去看了。

最后，让我们来运行一下程序，并且和正版爱奇艺的应用图标放在一起对比一下吧：

可以看到，做过8.0系统应用图标适配之后，效果明显要好看太多了，也希望爱奇艺的官方APP也能早日完成适配吧。

原文链接：https://mp.weixin.qq.com/s/WxgHJ1stBjokPi6lTUd1Mg

文章来源: blog.csdn.net，作者：yechaoa，版权归原作者所有，如需转载，请联系作者。

原文链接：blog.csdn.net/yechaoa/article/details/79771806