安卓 SplashScreen 启动页 Logo 适配 - 忽略遮罩的做法

2,814 阅读2分钟

注意:这里不讨论标准的 Icon 分层做法,推荐按照官方方案适配

最近我们团队也学京东、淘宝给 icon 加文字,icon 自带圆角,替换后启动页在一些机型上有白底不好看,在另外一些机型(比如 Pixel)上出现圆形遮罩导致内容显示不全的问题。

例如

当然,有设计追求的团队不会遇到这种问题。


适配效果

Logo 圆角值固定,可以完整展示。

问题分析

官方的原理图是这样的,不管是矢量图还是 png、jpg、webp,其实都是会添加一个 1/3 大小的遮罩:

image.png

极限情况下这个遮罩会是圆形,那么只要保证 APP icon 可以在圆形区域内完整展示就可以。

遮罩原理解释图

Icon 最大尺寸百分比为 (10/sqrt(2) x 2) / 30 ≈ 0.4714

按照谷歌的推荐尺寸,192dp 来说,192 / 0.4714 ≈ 407.297 取 408 肯定可以完整展示。

适配方案

  • 图片要求:UI 需要设计一个 408x408 的框,里面放 192x192 的 logo
  • 开发适配:为了保证清晰度,可以导出多套图放到 drawable 文件夹下(偷懒也可以只导出 3x 图放到 drawable-xxhdpi 文件夹,了解更多可以参考这个链接),然后在 style 中指定一下就可以了。
<style name="MySplash" parent="Theme.SplashScreen.IconBackground">
    <item name="android:windowSplashScreenAnimatedIcon">@drawable/slice_splash_logo</item>
</style>

以下为 Pixel 上的测试效果,icon 就是上面那张图片:

Pixel 测试效果

备注

如果是 VectorDrawable(也许 icon 比较复杂不好做分层),可以使用 group 标签将 path 包裹起来,然后使用android:scaleX="0.47" android:scaleY="0.47"快速适配。

最后,我发现同样的京东、淘宝 APK,在 OPPO 上的表现和 Pixel 模拟器上的不一样,OPPO 上展示的是一个全屏的图片,元素很多,比较复杂,猜测是使用 windowBackground 做的,应该是点9图,讲道理 SplashScreen 是强制的,可能是系统白名单?具体实现方式没有深究,欢迎讨论。

淘宝 APP 在 OPPO 上的表现