<轉(zhuǎn)> 你已經(jīng)知道怎么適配iPhone X了,那么Android全面屏呢?

原文地址:https://mp.weixin.qq.com/s/HhLaWrub-QIvY-9cElo7XQ


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

蘋果今年發(fā)布的 iPhone X 比全面屏多了一個“劉?!保贿^蘋果有特別針對“劉海屏”給出了適配方案,詳情請?zhí)D(zhuǎn)閱讀 iPhone X 交互設(shè)計官方指南。但是與蘋果統(tǒng)一生態(tài)不同的是,國內(nèi)的安卓市場碎片化十分嚴(yán)重,這讓 Android 軟件開發(fā)工程師叫苦不迭。蘋果今年發(fā)布的 iPhone X 比全面屏多了一個“劉?!?,不過蘋果有特別針對“劉海屏”給出了適配方案,詳情請?zhí)D(zhuǎn)閱讀 iPhone X 交互設(shè)計官方指南。但是與蘋果統(tǒng)一生態(tài)不同的是,國內(nèi)的安卓市場碎片化十分嚴(yán)重,這讓 Android 軟件開發(fā)工程師叫苦不迭。

什么是全面屏手機?

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

根據(jù)目前的技術(shù)水平和業(yè)內(nèi)大部分人的說法,認(rèn)為目前的全面屏手機要同時符合兩個條件才能稱為真正的全面屏:

分辨率大于 16:9

屏占比大于 80%

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

從人體工程學(xué)角度分析,18:9 的比例更適合用戶單手持握,更重要的是,全面屏的高屏占比可以給用戶在游戲和視頻觀看上帶來極致的視覺體驗。然而,市面上很多廠商卻因此偷換概念,認(rèn)為手機配備 18:9 的比例屏幕就是全面屏,故在手機設(shè)計上只保留了 18:9 的比例,而邊框依然寬大,這顯然忽視了全面屏最本質(zhì)的特征。
目前,業(yè)內(nèi)較為認(rèn)可的全面屏手機主要有以下幾種:

目前,業(yè)內(nèi)較為認(rèn)可的全面屏手機主要有以下幾種:


圖片.png

移動應(yīng)用適配全面屏情況

640.jpg

全面屏適配方案

由于全面屏手機在追求更小的邊框設(shè)計、更高的屏占比,這些變化導(dǎo)致了手機發(fā)生兩種變化,即更大的屏幕縱橫比和導(dǎo)航鍵變成了虛擬鍵,所以應(yīng)從這兩個方面進行適配。

一.聲明 Maximum Aspect Ratio

隨著大量的手機廠商將目光投向全面屏,為了順應(yīng)市場需求,谷歌向開發(fā)者提供了官方的 Android 全面屏適配指南。


640.jpg

左:18.5:9 設(shè)備上的最大縱橫比設(shè)為16:9 的APP
右:18.5:9 設(shè)備上最大縱橫比設(shè)為18.5:9 以上的APP

  1. 在 AndroidManifest.xml 中可做如下配置:
    <meta-data
            android:name="android.max_aspect"
            android:value="ratio_float" />

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

  1. 若沒有聲明該屬性,而且android:resizeableActivity也為 false的話,則應(yīng)用支持的應(yīng)用的最大縱橫比的默認(rèn)值為 1.86,小于 2.0556,即無法支持全面屏,屏幕的上下就會留有黑框,如上圖左。

二. 怎樣防止圖片變形

當(dāng)使用 layout 布局實現(xiàn)界面類 APP 時,容易出現(xiàn)圖片被拉伸的情況,如打開淘寶的頁面就會變成如下所示:


640.jpg

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

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

三.虛擬導(dǎo)航鍵設(shè)置

為了保證虛擬鍵和 App 的界面風(fēng)格一致,應(yīng)注意設(shè)置虛擬鍵顏色與主題協(xié)調(diào),所以在進行虛擬鍵的設(shè)置時,要注意以下幾點:

  • 使用沉浸式虛擬鍵時,用原生標(biāo)準(zhǔn)方法設(shè)置虛擬按鍵的背景顏色;
  • 在夜間模式和主題切換的時候,重新設(shè)置一下虛擬按鍵背景顏色;
  • 看圖界面使用全屏布局,并設(shè)置半透明虛擬按鍵背景。

具體操作如下:
根據(jù)金立18:9 全面屏虛擬鍵的適配說明,具體的設(shè)置虛擬鍵背景色的方法有:

  • 方法 1:在主題中添加以下設(shè)置項:
<item name="android:navigationBarColor">要設(shè)置的顏色值</item>
  • 方法 2:通過使用 Window 類的 setNavigationBarColor API 進行控制。
    注意,要想設(shè)置虛擬按鍵背景色生效,必須要設(shè)置 FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS 并且不能設(shè)置 FLAG_TRANSLUCENT_NAVIGATION,即要先執(zhí)行:
getWindow().clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);
getWindow().addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_ BACKGROUNDS);

例如:

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

四. 修改虛擬鍵的樣式

640.jpg

調(diào)用以下接口即可window.setNavigationBarColor (int color)在調(diào)用該接口時,還需要設(shè)置一些 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);

相關(guān)文獻:
谷歌官方全面屏適配指南
小米全面屏及虛擬鍵適配說明
金立全面屏底部虛擬按鍵適配

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

友情鏈接更多精彩內(nèi)容