上一篇分享的是在Flutter项目开发中iOS端的App Icon、Notification Icon和Launch照片的尺寸。链接如下：
《Flutter中IOS平台App icon和Launcher Splash图片尺寸》
这篇我们分享一下Android端的图片尺寸，包括App Icon尺寸、Notification尺寸和Splash的组装模式和图片尺寸。
一、APP Icon图标尺寸
1.1 这是正常的方形图标尺寸：
| dpi | 尺寸 | 单位 |
|---|---|---|
| mdpi | 48*48 | px |
| hdpi | 72*72 | px |
| xhdpi | 96*96 | px |
| xxhdpi | 144*144 | px |
| xxxhdpi | 192*192 | px |
App Icon加入后，就需要相应在AndoridManifest.xml中加入，如下所示：
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="...">
<application
android:name=".TestApplication"
...
android:icon="@mipmap/ic_launcher"
...>
...
</manifest>
因为在Android中其实对应不同手机有得是正方形，有得是圆角，有得圆角还大些，这都没啥关系，设置一个方形图标就可以了，但是有另外一种圆形图标就需要重新要UI小姐姐设计一个了。
因为如果没有设置圆形图标的话，那么系统就会自动给你切成圆形的，你想想本来你的图标设计是按正方形设计，结果给你切成圆形形式，可能你图标里一些标志会被切掉，圆角那些还好，切的内容不是很多，但是圆形切掉的就多了，需要重新设计一下独立出来。
1.2 独立的圆形APP Icon尺寸
在Android中设置圆形图标，有两种方式：一种是用xml层叠的方式设置，一种是直接使用设计好的圆形图标。
第一种类似于下面所示：
分别设置图标的background和foreground，这里降低难道吧就直接走第二种。
<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
<background android:drawable="@drawable/ic_launcher_background"/>
<foreground android:drawable="@mipmap/ic_launcher_app"/>
</adaptive-icon>
第二中圆形图标尺寸
其实尺寸和方形一样，就是设计上内部应用标志图的尺寸不一样而已
| dpi | 尺寸 | 单位 |
|---|---|---|
| mdpi | 48*48 | px |
| hdpi | 72*72 | px |
| xhdpi | 96*96 | px |
| xxhdpi | 144*144 | px |
| xxxhdpi | 192*192 | px |
设置方式如下，在AndroidMainfest.xml中android:roundIcon属性设置相应的图标
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="...">
<application
android:name=".TestApplication"
...
android:icon="@mipmap/ic_launcher"
android:roundIcon="@mipmap/ic_launcher_circle"
>
</manifest>
二、Notification Icon图标尺寸
在Android端设置通知图标的话，可能与iOS不同。像iOS可以设置和应用图标一样的通知图标。色彩丰富都可以。但是在Android端，其实官方推荐是使用纯色图标，纯色的意思就是一个通知图标不能有多种色彩，只能有一种颜色，有图形的地方一般是镂空出来。类似于下图2.0：
notification_icon.png
大家可以找找官方文档看看，我之前找的官方文档准备放上来，发下已经被删除了，404了。
然后，大家如果加入了Notification图标之后，发下，额，显示不了。 大家就可查一下是不是因为图片不是纯色的问题了。
Notification Icon图标尺寸表
| dpi | 尺寸 | 单位 |
|---|---|---|
| mdpi | 24*24 | px |
| hdpi | 36*36 | px |
| xhdpi | 48*48 | px |
| xxhdpi | 72*72 | px |
| xxxhdpi | 96*96 | px |
在项目中设置的话，如果是firebase cloud messaging的户话，类似于下面的代码：
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="....">
<application
android:name=".TestApplication"
android:icon="@mipmap/ic_launcher"
android:roundIcon="@mipmap/ic_launcher_round"
...>
<meta-data
android:name="com.google.firebase.messaging.default_notification_icon"
android:resource="@drawable/ic_notification_icon" />
</application>
</manifest>
三、Splash图片的设置和尺寸
相对来说上面两个部分的图标知道尺寸，UI提供完图标设置进去就问题不大了。这里才是问题重灾区~
在iOS中设置launch启动图的话，一般提供三张1x/2x/3x的图片就可以了，因为iOS手机机型和尺寸没有Android这么泛滥。容易适配。
对于Flutter项目来说，我们其实有两种方式来处理Splash启动页，置于像Android项目通过activity做启动图的方式，这里就不说了，那还是需要会Android开发的。至于我们这里说的方式，都是通过静态图展示的方式来显示的。
第一种方式：
也是想iOS那样提供不同尺寸的整张图来展示启动页，那这样有点问题就是Android机型现在太泛滥，对于启动图的显示，肯定不能适配各种尺寸，所以会有拉伸的问题。还比较明显。所以这种方式就放弃吧~
第二种方式：
其实也是图片，只不过是把一整张图把它裁剪为区块图，Android中提供一种通过xml层叠的方式来组合图，组合成为一张Splash启动图。比如说下面是一整张图的样式：
如果UI提供了不同尺寸的整张图，那么在有得机型上面就会有拉伸或者压缩。
那我们就可以将上图的文字部分和下面的房子部分分别按不同尺寸拆分为两张图，然后在xml->layer-list属性中组装
这两个图片的尺寸不一定对，也提供一下，用的2倍图，之前也试了很久，不是1倍图小了，3倍图大了。可能不同项目有所不一样先提供一下吧，如果按照这种尺寸显示不对的话，再找UI调整调整吧
文字部分尺寸(宽*高)：
| dpi | 尺寸 | 单位 |
|---|---|---|
| hdpi | 720*150 | px |
| xhdpi | 960*204 | px |
| xxhdpi | 1280*260 | px |
| xxxhdpi | 1440*300 | px |
底部图部分尺寸(宽*高)：
| dpi | 尺寸 | 单位 |
|---|---|---|
| hdpi | 720*341 | px |
| xhdpi | 960*448 | px |
| xxhdpi | 1280*585 | px |
| xxxhdpi | 1440*682 | px |
上面的尺寸是个大概哈，不一定适用别的项目，宽是一样的，高度得需要根据你的展示来
组装的话，就新建或者已经有了launch_background.xml文件，名字任意。在layer-list中只能设置颜色值和图片，不能设置文字之类的。
<?xml version="1.0" encoding="utf-8"?>
<!-- Modify this file to customize your launch splash screen -->
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!--这是定义背景色-->
<item>
<shape>
<solid android:color="#f5f5f5"/>
</shape>
</item>
<!-- You can insert your own image assets here -->
<item android:bottom="200dp">
<bitmap
android:gravity="center"
android:src= "@mipmap/ic_splash_title"/>
</item>
<!-- You can insert your own image assets here -->
<item >
<bitmap
android:gravity="bottom|fill_horizontal"
android:src= "@mipmap/ic_splash_bottom"/>
</item>
</layer-list>
再将xml设置到AndroidMainfest.xml中的Theme里，有两个地方需要设置；
第一个地方：
在launchTheme这个style里设置前面我们定义的launch_background.xml
<style name="LaunchTheme" parent="@android:style/Theme.Black.NoTitleBar">
<item name="android:windowBackground">@drawable/launch_background</item>
</style>
第二个地方：
在AndroidManifest.xml中设置：
<meta-data
android:name="io.flutter.embedding.android.SplashScreenDrawable"
android:resource="@drawable/launch_background"
/>
并且这两个地方都需要修改，不然你可以试试，有一个不设置都会有一段白屏。
四、结语
Flutter项目中图片尺寸相关就差不多这些了吧，如有不准确的地方，请及时提出来，我改改~
网友评论