注意:这里不讨论标准的 Icon 分层做法,推荐按照官方方案适配
最近我们团队也学京东、淘宝给 icon 加文字,icon 自带圆角,替换后启动页在一些机型上有白底不好看,在另外一些机型(比如 Pixel)上出现圆形遮罩导致内容显示不全的问题。
例如
当然,有设计追求的团队不会遇到这种问题。
适配效果
Logo 圆角值固定,可以完整展示。
问题分析
官方的原理图是这样的,不管是矢量图还是 png、jpg、webp,其实都是会添加一个 1/3 大小的遮罩:
极限情况下这个遮罩会是圆形,那么只要保证 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 就是上面那张图片:
备注
如果是 VectorDrawable(也许 icon 比较复杂不好做分层),可以使用 group 标签将 path 包裹起来,然后使用android:scaleX="0.47" android:scaleY="0.47"快速适配。
最后,我发现同样的京东、淘宝 APK,在 OPPO 上的表现和 Pixel 模拟器上的不一样,OPPO 上展示的是一个全屏的图片,元素很多,比较复杂,猜测是使用 windowBackground 做的,应该是点9图,讲道理 SplashScreen 是强制的,可能是系统白名单?具体实现方式没有深究,欢迎讨论。