全面屏適配以及啟動頁適配(采用制作.9圖的方式)


版權聲明:本文為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比例值)

  在應用配置文件AndroidManifest.xml中顯式聲明支持的最大屏幕高寬比(maximum aspect ratio)。其中 ratio_float 為高寬比:
  傳統屏幕:ratio_float = 16/9 = 1.778 ;
  三星S8屏幕:ratio_float = 18.5/9 = 2.056。
  紅米6pro屏幕:ratio_float = 19/9 = 2.111。
  鑒於目前全面屏屏幕比例,將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、針對全面屏制作獨立的圖片資源

考慮到目前大部分全面屏手機只是在高度上拉長,且大多為6.0英寸左右,像素密度對比xxhdpi並沒有多大區別,那我們可以在項目中增加一組資源drawable-xxhdpi-2160x1080 、drawable-long 這樣解決圖片的拉伸問題。

方案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文件

運行效果如下:

參考資料

Android手機 全面屏(18:9屏幕)適配指南

適配18:9全面屏黑邊問題

Android APP適配全面屏手機的技術要點

Android Studio制作.9.png圖片

Android設計中的.9.png圖片


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM