Android应用图标微技巧，8.0系统中应用图标的适配
转载请注明出处：http://blog.csdn.net/guolin_blog/article/details/79417483android
本文同步发表于个人微信公众号，扫一扫文章底部的二维码或在微信搜索 郭霖 便可关注，每一个工做日都有文章更新。web
你们好，2018年的第一篇文章到的稍微有点迟，也是由于在上一个Glide系列结束以后一直还没想到什么好的新题材。算法
如今已经进入了2018年，Android 8.0系统也逐渐开始普及起来了。三星今年推出的最新旗舰机Galaxy S9已经搭载了Android 8.0系统，紧接着小米、华为、OV等国产手机厂商即将推出的新年旗舰机也会搭载Android 8.0系统。所以，如今已是时候须要让咱们的应用程序对Android 8.0系统进行适配了。安全
其实在去年Android 8.0系统刚推出的时候，我就仔细翻阅过Google官方的功能变动文档。变动项着实很多，可是真正须要咱们去进行功能适配的地方却并很少。总结了一下，最主要须要进行适配的地方有两处：应用图标和通知栏。那么咱们就分为上下两篇来分别对这两处功能适配进行讲解，先从应用图标开始。
bash
为何要进行应用图标适配？
可能有些朋友以为困惑，应用图标这种东西从Android远古时代就已经有了，并且功能格外的简单，就是放张图片而已，这有什么好适配的呢？但实际上，在当前Android环境下，应用图标功能是极其混乱的。微信
若是说要讲一讲手机应用图标的历史，其实要从苹果开始讲起。在上世纪80年代，苹果还在设计Lisa和Macintosh电脑的时候，乔布斯就是个圆角矩形的狂热支持者。当时苹果的工程师写出了一套绝妙的算法，能够在电脑上绘制出圆和椭圆，全部观看者都被震惊了，除了乔布斯，由于乔布斯以为圆和椭圆虽然也不错，可是若是能绘制出带圆角的矩形就更好了。当时那位工程师以为这是不可能实现的，并且也彻底用不着圆角矩形，能知足基本的绘图需求就能够了。乔布斯愤怒地拉着他走了3条街，指出大街上各类应用圆角矩形的例子，最后那位工程师次日就作出了绘制圆角矩形的功能。app
所以，在2007年一代iPhone诞生的时候，全部应用程序的图标都绝不出乎意料地使用了圆角矩形图标，即便是第三方应用也被强制要求使用圆角矩形图标，而且这一规则一直延续到了今天的iOS 11当中，以下图所示：编辑器
相反，Android系统在设计的时候就不喜欢苹果这样的封闭与强制，而是选择了自由与开放，对应用图标的形状不作任何强制要求，开发者们能够自由进行选择：ide
能够看到，在Android上，应用图标能够是方形、圆形、圆角矩形、或者是其余任意不规则图形。svg
原本就是两家公司不一样的设计理念，也说不上孰高孰低。但因为Android操做系统是开源的，国内一些手机厂商在定制操做系统的时候就把这一特性给改了。好比小米手机，就选择了向苹果靠拢，强制要求应用图标圆角化。若是某些应用的图标不是圆角矩形的呢？小米系统会自动给它加上一个圆角的效果，以下图所示：
小米的这种作法看上去是向苹果学习，但其实是至关恶心的。由于谁均可以看出来，这种自动添加的圆角矩形很是丑，所以不少公司就索性直接将应用的图标都设计成圆角矩形的，正好Android和iOS都用同一套图标还省事了。
可是这就让Google不开心了，这不是变向强制要求开发者必须将图标设计成圆角矩形吗？因而在去年的Google I/O大会上，Google点名批评了小米的这种作法，说其违反了Android自由和开放的理念。
除了变向强制要求应用图标圆角化，小米的这种处理方式还有一个弊端，就是若是应用图标的圆角弧度和小米系统要求的不一样，那么会出现异常丑陋的效果：
看到这样的应用图标，真的是一脸尴尬症都要犯了。就由于这两款应用图标的圆角弧度设计得大于了小米系统要求的圆角弧度，就被自动添加上了这样丑陋的白边。
问题是已经存在了，那么应该怎么解决呢？说实话，这确实是一个长期以来都让人头疼的问题，Google多年来对此也是睁一只眼闭一只眼。终于在Android 8.0系统中，Google下定决心要好好整治一下Android应用图标的规范性了，今天咱们就来学习一下。
8.0系统的应用图标适配
这个问题对于Google来讲仍是挺难解决的。由于Google一直在强调自由与开放，那么小米强制要求全部应用图标都必须圆角化也是人家的自由呀，你不许人家这么干是否是自己就违背了自由和开放的理念呢？固然咱们在这里讨论这个，有点像讨论先有鸡仍是先有蛋的感受，不过Google仍是想出了一套完美的解决方案。
从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或者更高，以下所示：
apply plugin: 'com.android.application'
android {
compileSdkVersion 26
defaultConfig {
applicationId "com.example.icontest"
minSdkVersion 15
targetSdkVersion 26
versionCode 1
versionName "1.0"
testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
}
}
能够看到，这里我在建立新项目的时候默认targetSdkVersion就是26，若是你是低于26的话，说明你的Android SDK有些老了，最好仍是更新一下。固然若是你懒得更新也不要紧，手动把它改为26就能够了。
接下来打开AndroidManifest.xml文件，代码以下所示：
<manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.example.icontest">
<application android:allowBackup="true" android:icon="@mipmap/ic_launcher" android:label="@string/app_name" android:roundIcon="@mipmap/ic_launcher_round" android:supportsRtl="true" android:theme="@style/AppTheme">
<activity android:name=".MainActivity">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</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文件，咱们打开这个文件看一下，代码以下所示：
<?xml version="1.0" encoding="utf-8"?>
<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
<background android:drawable="@drawable/ic_launcher_background" />
<foreground android:drawable="@drawable/ic_launcher_foreground" />
</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也能早日完成适配吧。
好了，今天这篇文章就到这里，相信你们都已经轻松掌握了Android 8.0系统的应用图标适配，下篇文章会讲解Android 8.0系统的通知栏适配，感兴趣的朋友请继续阅读 Android通知栏微技巧，8.0系统中通知栏的适配 。
关注个人技术公众号，天天都有优质技术文章推送。关注个人娱乐公众号，工做、学习累了的时候放松一下本身。
微信扫一扫下方二维码便可关注：