Splash 占位图适配 全面屏笔记
在簡書搜索 全面屏適配,可以找出一大堆結果,這篇筆記不再多說已經有的理論知識,大家參考最多的資料也貼在文章的最后了,主要內容記錄最近在開發中遇到的冷啟動占位圖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看起來沒有變化的效果,現在明顯有了差異
原因: 不論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就好了,然而并沒有什么用,看了下源碼,
坑爹啊,默認是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的縮放方式
總結
以上是生活随笔為你收集整理的Splash 占位图适配 全面屏笔记的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: ELK收集日志到mysql数据库
- 下一篇: 代码管理 ,git 命令整理