版權聲明:本文為HaiyuKing原創文章,轉載請注明出處!
前言
關於全面屏
全面屏是手機業界對於超高屏占比手機設計的一個寬泛的定義。從字面上解釋就是,手機的正面全部都是屏幕,四個邊框位置都是采用無邊框設計,追求接近100%的屏占比。但受限於目前的技術,還不能做到手機正面屏占比100%的手機。現在業內所說的全面屏手機是指真實屏占比可以達到80%以上,擁有超窄邊框設計的手機。
全面屏手機屏幕的寬高比例比較特殊,不再是以前的16:9了。比如三星的Galaxy S8屏幕分辨率是:2960×1440,對應的屏幕比例為:18.5:9。VIVO X20手機屏幕分辨率是2160x1080,對應的屏幕比例:18:9。對於這種奇葩的屏幕比例,APP開發者該如何去優化自己的應用,才能在這些手機上顯示的更加完美呢?下面,從以下方面來探究APP完美適配全面屏手機的方法。
一、聲明最大屏幕高寬比(解決黑邊問題)
二、啟動頁適配
三、虛擬導航鍵(Navigation Bar)優化
這里簡單介紹下聲明最大屏幕高寬比、啟動頁適配。
一、聲明最大屏幕高寬比(解決黑邊問題)
由於全面屏手機的高寬比比之前大,如果不適配的話,Android默認為最大的寬高比是1.86,小於全面屏手機的寬高比,因此,在全面屏手機上打開部分App時,上下就會留有空間,顯示為黑條。這樣非常影響視覺體驗,另外全面屏提供的額外空間也沒有得以利用,因此,這樣的應用需要做相關適配。
注意:targetSdkVersion==24(Android7.0)及以上默認支持了分屏模式,即Manifest文件中配置Activity的android:resizeableActivity默認屬性為true,在這種情況下並不需要配置android.max_aspect比例值即可自動適配全面屏。如果由於某些原因(UI適配等)禁止了分屏模式,這個時候就要注意了!需要用到上面的代碼,否則將出現上下黑條的顯示效果,奇丑無比!
所以,對於下面的情況需要考慮適配!
- targetSdkVersion < 24
- targetSdkVersion >= 24,但是禁用了分屏模式
目前有兩種解決方案:
方案1、提高App所支持的最大屏幕縱橫比(設置android.max_aspect比例值)
傳統屏幕:ratio_float = 16/9 = 1.778 ;
三星S8屏幕:ratio_float = 18.5/9 = 2.056。
鑒於目前全面屏屏幕比例,將ratio_float設置為2.2即可適配一眾全面屏手機。
<?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.cn.cctvnews"> <application android:allowBackup="true" android:icon="@mipmap/ic_launcher" android:label="@string/app_name" android:theme="@style/TranslucentTheme"> <!--適配19:9全面屏黑邊問題:https://blog.csdn.net/darkeet/article/details/80049913--> <!--https://blog.csdn.net/weelyy/article/details/79284332--> <meta-data android:name="android.max_aspect" android:value="2.2"/> <!-- 首頁界面 --> <activity android:name=".activity.MainActivity" android:screenOrientation="portrait"> <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> </activity> </application> </manifest>
方案2、支持分屏模式(設置resizeableActivity屬性值)
在targetSdkVersion==24(Android 7.0)以上Google默認支持了分屏模式,即Manifest文件中配置Activity的android:resizeableActivity默認屬性為true。
<?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.why.project.androidstartingwindowdemo"> <application android:allowBackup="true" android:icon="@mipmap/ic_launcher" android:label="@string/app_name" android:roundIcon="@mipmap/ic_launcher_round" android:supportsRtl="true" android:theme="@style/AppTheme" android:resizeableActivity="true"> <!--首頁--> <activity android:name=".MainActivity"> <intent-filter> <action android:name="android.intent.action.MAIN"/> <category android:name="android.intent.category.LAUNCHER"/> </intent-filter> </activity> </application> </manifest>
二、啟動頁適配
在做啟動優化,解決冷啟動白屏的時候,我們往往會為要啟動的Activity設置主題為一張背景圖。參考《Android APP應用啟動頁白屏(StartingWindow)優化》
那么問題就來了,以往16:9的的背景圖在18:9的屏幕中會有什么表現呢?答案是會被拉伸變形。
解決方案有以下幾種方案:
方案1、針對全面屏制作獨立的圖片資源
方案2、采用相對布局
在歡迎界面的布局文件中采用相對布局的方式,可以理解為將之前完整的一個背景圖拆分成幾個小圖,然后組合在一起。這樣一定程度上避免拉伸。
方案3、制作.9圖
保留背景圖完整,在此基礎上通過Android Studio制作.9圖。
這里簡單介紹下實現步驟,首先,以《Android APP應用啟動頁白屏(StartingWindow)優化》為例,在適配前看下運行在全面屏上的效果:

步驟1、將背景圖的png文件復制到項目中,比如demo中的startingwindow_bg.png文件
注意:擴展名一定要.png,並且圖片不能做壓縮處理。否則有可能創建不成功。

步驟2、鼠標選中這個文件——右鍵——Create 9-Patch file...

步驟3、保存新建的.9圖,如果不更改目錄的話,直接點擊OK


步驟4、打開.9圖,設置4條邊的屬性
.9.png圖片的用處可以概括為以下兩點:
- .9.png圖片在圖片拉伸的時候特定的區域不會發生圖片失真;
- .9.png圖片作為背景圖的時候可以指定內容顯示區域;
.9.png圖片和普通圖片相比較,周圍會有一條黑色的線條,這些黑色線條有什么作用呢?就是用於指定我們背景的拉伸區域或者前景內容的顯示區域。

- 左邊黑線:縱向拉伸區域,必須要畫的,控制縱向拉伸,如上圖右側第一個小圖。
- 上邊黑線:橫向拉伸區域,必須要畫的,控制橫向拉伸,如上圖右側第二個小圖。
- 右邊黑線:可選,縱向內容顯示區域
- 下邊黑線:可選,橫向內容顯示區域


----摘自《Android設計中的.9.png圖片》
那么,對於startingwindow_bg.png這張圖片來講,我們只需要設置左邊和上邊的拉伸區域即可。比如,我們想要做成下面的效果(左側的圖應該是合適的,有時候右邊圖也是可以的,根據實際情況處理):

首先,由於圖片很大,所以需要放大比例才可以准確定位到邊界,隨便畫出一條黑線出來

然后,縮小到原圖,選中show patches,鼠標定位到區域的邊界進行拖動調整

以此類推,分別畫出左邊和上邊的黑線。

步驟5、刪除startingwindow_bg.png文件,只保留startingwindow_bg.9.png文件

運行效果如下:

