Splash 占位图适配 全面屏笔记

1,962 阅读4分钟

在简书搜索 全面屏适配,可以找出一大堆结果,这篇笔记不再多说已经有的理论知识,大家参考最多的资料也贴在文章的最后了,主要内容记录最近在开发中遇到的冷启动占位图splash适配全面屏的问题。

左边是一加5T,右边是一加5(这里刘老板请给我广告费)

机器屏幕参数

通过资料,7.0以上是默认适配全面屏了, 适配6.0的全面屏机器,将ratio_float设置为2.1以上即可

<meta-data android:name="android.max_aspect"
android:value="ratio_float"/>

这些大家都已经知道了。

同样的,SplashActivity放一张bg_splash占位图,然后当有广告的时候再贴一张广告图覆盖在上边。这个业务也是业内统一的做法。

当时drawable-xxhdpi里放的bg_splash是16:9的图,不出所料的出现了图片被上下拉伸的结果。 而给来的广告图url(比例也是16:9),进行了scaleType=centerCrop的缩放, 平时可以做到的 底部logo看起来没有变化的效果,现在明显有了差异

本地splash底部logo被拉伸,而广告图拉伸后是正常的

原因: 不论16:9还是18:9,占位图都是去本地drawale文件找,18:9的基本上都是xxhdpi了,16:9不一定,因为这个比例与dpi无关。 暂且我们都以xxhdpi为例,18:9的机器找本地bg_splash,找到了drawable-xxhdpi的资源,而这个文件夹里只放着原先比例为16:9的图,系统加载图片时会自动上下拉伸。

解决方案 第一次尝试的时候,是增加了drawable-long资源文件夹,但是出现了RuntimeException

所以最后采用增加drawable-xxhdpi-2016x1080资源文件夹 drawable-xxhdpi-2016x1080是怎么来的呢? 来自官方文档的翻译 其中有一段对限定符的描述

资源限定符

我当时马上就新建了一个 drawable-xxhdpi-1080x2160的文件夹,把18:9的bg_splash.jpg丢进去。 结果一加5T还是去找xxhdpi的资源,然后发现应该height x width 重新建 drawable-xxhdpi-2160x1080文件夹,还是不行.... 我发现了 可用分辨率这个参数,文件夹改成 drawable-xxhdpi-2034x1080,完美找到18:9的图,全面屏的启动图无需上下拉伸16:9的图了。

为了适配更多的全面屏机型,将比例降到1.86,也就是2016x1080.

解决了本地图片被强行上下拉伸的问题后,18:9的机器也能乖乖的显示splash占位图了,可是给来的广告图仍然是16:9,像素是2160x1215,不是说进行了scaleType=centerCrop的缩放么,还会出问题么?

会....因为16:9的图放在16:9的机器上,不需要缩放,直接填充满就行了,只有放在全面屏上才需要去裁剪。

本以为去掉ImageView的scaleType就好了,然而并没有什么用,看了下源码,

image.png
坑爹啊,默认是fit_center的方式居中缩放。

那我就加个判断嘛

if (1.00d * ScreenUtil.screenHeight / ScreenUtil.screenWidth > 1.84d) {
            adsImage.setScaleType(ImageView.ScaleType.CENTER_CROP);
        } else {
            adsImage.setScaleType(ImageView.ScaleType.FIT_XY);
        }

只有在屏幕比例符合全面屏的时候才去裁剪,否则都用fill的方式填充。

附上无需context即可拿到屏幕参数的代码

 DisplayMetrics dm = Resources.getSystem().getDisplayMetrics();
        screenWidth = dm.widthPixels;
        screenHeight = dm.heightPixels;

至此,全面屏的启动页/广告图适配已经完成。

###总结 1.ratio_float设置为2.1,兼容6.0机器; 2.新增drawable-xxhdpi-2034x1080资源文件夹放18:9的占位图; 3.判断屏幕比例再选择缩放方式; 4.最佳解决方案就不使用一整张占位图,而是参考网易严选的方案 bg_spalsh是layer-list,底色全白,加上一个slogen的png图,这个slogen图marginBottom=43dp

参考资料: 1.关于Android的像素相关知识

2.小米全面屏及虚拟键适配说明

3.金立18:9全面屏适配说明

4.全面屏时代 | APP如何快速适配? 这4个关键点你要知道!

5.你已经知道怎么适配iPhone X了,那么Android全面屏呢?

6.scaleType的缩放方式