Android全面屏如何做適配

小編最近入手了一臺小米MIX 2,單看手機外表,覺得很驚豔,因爲一眼望去,手機都是屏,但是使用過程卻有一個小問題,讓我很不舒服,就是由於有些應用沒有和全面屏適配,導致在使用過程中屏幕上下方都有黑框,所以小編特地去搜集了一些資料以解決這個問題。

蘋果今年發佈的iPhone X比全面屏多了一個“劉海”,不過蘋果有特別針對“劉海屏”給出了適配方案,詳情請跳轉閱讀iPhone X交互設計官方指南。但是與蘋果統一生態不同的是,國內的安卓市場碎片化十分嚴重,這讓Android軟件開發工程師叫苦不迭。

什麼是全面屏手機?

該怎麼定義全面屏手機呢?小米最初也只是對其有一個抽象的定義「正面幾乎全是屏幕,彷彿握着一塊透明玻璃」,全面屏顧名思義就是一整面都是屏幕,理想中的全面屏就是達到100%的屏佔比,同時能夠滿足當前的日常需求,如攝像頭,聽筒、指紋解鎖等。但隨着iPhone X的出現,有越來越多的人都在爭論“全面屏”,認爲有劉海就談不上無邊框,甚至大家開始疑問全面屏的真正含義。

根據目前的技術水平和業內大部分人的說法,認爲目前的全面屏手機要同時符合兩個條件才能稱爲真正的全面屏:

  • 屏幕縱橫比大於16:9
  • 屏佔比大於80%

例如在業內率先提出全面屏概念並完全去掉機身正面半頂部邊框設計的的小米MIX,它的屏幕縱橫比爲17:9,今年小米推出的MIX 2屏幕縱橫比爲18:9。

從人體工程學角度分析,18:9的比例更適合用戶單手持握,更重要的是,全面屏的高屏佔比可以給用戶在遊戲和視頻觀看上帶來極致的視覺體驗。然而,市面上很多廠商卻因此偷換概念,認爲手機配備18:9的比例屏幕就是全面屏,故在手機設計上只保留了18:9的比例,而邊框依然寬大,這顯然忽視了全面屏最本質的特徵。

目前,業內較爲認可的全面屏手機主要有以下幾種:

機型 屏幕縱橫比 屏佔比 上市時間
LG G6 18:9 80% 2017年2月
三星S8 18.5:9 84.26% 2017年3月
Essential Phone 19:10 84.85% 2017年8月
小米MIX 2 18:9 84.02% 2017年9月
iPhone X 13:6 81.49% 2017年9月

移動應用適配全面屏情況

手機全面屏帶來的極致體驗必須在應用和屏幕完全適配的情況下纔可以充分發揮出來。而根據華爲終端開放實驗室對國內千款安卓主流應用進行的測試數據顯示,目前僅約17%的應用適配了全面屏,這意味着83%的應用在全面屏手機運行時會出現黑邊現象,這樣用戶就無法享受全面屏手機的帶來的極致體驗,其中在國內TOP150的應用中,有44%已經適配全面屏,如下圖所示。

全面屏適配方案

由於全面屏手機在追求更小的邊框設計、更高的屏佔比,這些變化導致了手機發生兩種變化,即更大的屏幕縱橫比和導航鍵變成了虛擬鍵,所以應從這兩個方面進行適配。

聲明Maximum Aspect Ratio

隨着大量的手機廠商將目光投向全面屏,爲了順應市場需求,谷歌向開發者提供了官方的Android全面屏適配指南。

(左)18.5:9設備上的最大縱橫比設置爲16:9的應用程序
(右)18.5:9設備上最大縱橫比設置爲18.5:9以上的應用程序

1.在AndroidManifest.xml中可做如下配置:

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

其中ratio_float爲縱橫比,官方建議設爲2.1或更大,因爲目前市場上出現的全面屏手機屏幕縱橫比最大的爲三星的18.5:9=2.0556,但是如果以後要是出現縱橫比更大的手機,設置值就要更大。

2.若沒有聲明該屬性,而且

android:resizeableActivity

也爲false的話,則應用支持的應用的最大縱橫比的默認值爲1.86,小於2.0556,即無法支持全面屏,屏幕的上下就會留有黑框,如上圖左。

怎樣防止圖片變形

當使用layout佈局實現界面類APP時,容易出現圖片被拉伸的情況,如打開淘寶的頁面就會變成如下所示:

對於這種情況,解決的辦法是:

  • 使用相對佈局設計界面
  • 爲對應的分辨率提供相應佈局、圖片等資源(drawable-xxhdpi-2016x1080、drawable-long 等)
  • 使用顏色填充佈局、.9圖片填充背景

虛擬導航鍵設置

爲了保證虛擬鍵和App的界面風格一致,應注意設置虛擬鍵顏色與主題協調,所以在進行虛擬鍵的設置時,要注意以下幾點:

  1. 使用沉浸式虛擬鍵時,用原生標準方法設置虛擬按鍵的背景顏色;
  2. 在夜間模式和主題切換的時候,重新設置一下虛擬按鍵背景顏色;
  3. 看圖界面使用全屏佈局,並設置半透明虛擬按鍵背景。

具體操作如下:

根據金立18:9全面屏虛擬鍵的適配說明,具體的設置虛擬鍵背景色的方法有:

方法1:在主題中添加以下設置項:

<item name="android:navigationBarColor">要設置的顏色值</item>

方法2:通過使用 Window 類的 setNavigationBarColor API 進行控制。

注意,要想設置虛擬按鍵背景色生效,必須要設置FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS 並且不能設置 FLAG_TRANSLUCENT_NAVIGATION,即要先執行:

例如:

getWindow().setNavigationBarColor(Color.TRANSPARENT); //設爲透明
getWindow().setNavigationBarColor(Color.BLACK); //設爲不透明
getWindow().setNavigationBarColor(0x80000000); //設爲半透明(Color 類中沒有半透明的常量定義,同時暫不考慮修改框架代碼,所以使用的具體數值)

修改虛擬鍵的樣式

根據小米開發者中心給出的方案:

調用以下接口即可 window.setNavigationBarColor (int color)。在調用該接口時,還需要設置一些flag,詳見該接口的註釋說明(即下文):

/**
* Sets the color of the navigation bar to {@param color}.
*
* For this to take effect,
* the window must be drawing the system bar backgrounds with
* {@link android.view.WindowManager.LayoutParams#FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS} and
* {@link android.view.WindowManager.LayoutParams#FLAG_TRANSLUCENT_NAVIGATION} must not be set.
*
* If {@param color} is not opaque, consider setting
* {@link android.view.View#SYSTEM_UI_FLAG_LAYOUT_STABLE} and
* {@link android.view.View#SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION}.
* <p>
* The transitionName for the view background will be "android:navigation:background".
* </p>
*/
public abstract void setNavigationBarColor(@ColorInt int color);​

結語

根據今年蘋果、華爲、小米等手機廠商的一系列動作來看,全面屏手機將會成爲未來幾年的主流,所以,開發者應該以積極地態度應對這個趨勢,爲自己的應用做好全面屏適配,才能與時俱進,爲用戶提供更好地服務。

參考鏈接

谷歌官方全面屏適配指南

小米全面屏及虛擬鍵適配說明

金立全面屏底部虛擬按鍵適配

感謝徐川對本文的審校。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章