Android 8.0 自適應圖示

吳小龍同學發表於2018-05-21

專案中遇到一個問題,Android 8.0 系統上 APP 的 icon 顯示的是預設的機器人的 icon,這是什麼回事?原來 Android 8.0(API 級別 26)引入了自適應啟動器圖示,可以在不同裝置模型中顯示各種形狀。下面看下官方酷炫動態圖:

適用於自適應圖示線框的各種遮罩
適用於自適應圖示的各種蒙版

圖1. 自適應圖示支援各種裝置之間不同的掩碼。

可以通過定義 2 層來控制自適應啟動器圖示的外觀,包括背景和前景。您必須提供圖示圖層作為可繪圖,圖示輪廓周圍不能有蒙版或背景陰影。

建立自適應圖示的等距插圖

圖2. 自適應圖示使用 2 個圖層和 1 個蒙版進行定義。

在 Android 7.1(API級別25)及更早版本中,啟動器圖示大小為 48 x 48 dp。必須使用以下準則來調整圖示圖層的大小:

  • 兩層的尺寸必須為 108 x 108 dp。
  • 圖示的內部 72 x 72 dp 出現在蒙版視口內。
  • 系統會在四面各留出 18 dp,以產生有趣的視覺效果,如視差或脈衝。

我驗證了,不是這些尺寸也是可以的,但我們還是嚴格按照這個準則來吧。

適用於自適應圖示的視差演示
拾取動畫演示應用於自適應圖示

圖3. 自適應圖示支援各種視覺效果。

注意: 如果您沒有使用必要的圖層更新啟動器圖示,則該圖示與系統 UI 顯示的其他圖示看起來不一致,並且不支援視覺效果。

用 XML 建立自適應圖示

我們首先建立一個 Sample 專案,如圖:

Android 8.0 自適應圖示

比以往多一個 res/mipmap-anydpi-v26 檔案,開啟,有背景和前景。

ic_launcher_background.xml

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="108dp"
    android:height="108dp"
    android:viewportHeight="108"
    android:viewportWidth="108">
    <path
        android:fillColor="#26A69A"
        android:pathData="M0,0h108v108h-108z" />
    <path
        android:fillColor="#00000000"
        android:pathData="M9,0L9,108"
        android:strokeColor="#33FFFFFF"
        android:strokeWidth="0.8" />
    <!--省略部分程式碼-->
</vector>

複製程式碼

ic_launcher_foreground.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:aapt="http://schemas.android.com/aapt"
    android:width="108dp"
    android:height="108dp"
    android:viewportHeight="108"
    android:viewportWidth="108">
    <path
        android:fillType="evenOdd"
        android:pathData="M32,64C32,64 38.39,52.99 44.13,50.95C51.37,48.37 70.14,49.57 70.14,49.57L108.26,87.69L108,109.01L75.97,107.97L32,64Z"
        android:strokeColor="#00000000"
        android:strokeWidth="1">
        <aapt:attr name="android:fillColor">
            <gradient
                android:endX="78.5885"
                android:endY="90.9159"
                android:startX="48.7653"
                android:startY="61.0927"
                android:type="linear">
                <item
                    android:color="#44000000"
                    android:offset="0.0" />
                <item
                    android:color="#00000000"
                    android:offset="1.0" />
            </gradient>
        </aapt:attr>
    </path>
    <!--省略部分程式碼-->
</vector>

複製程式碼

它們都是 vector,<foreground><background> 是支援android:drawable屬性,我直接換成 ic_launcher_background.png 和 ic_launcher_foreground.png,<foreground><background>也支援@color/資源名

<?xml version="1.0" encoding="utf-8"?>
<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
    <!--<background android:drawable="@color/colorAccent" />-->
    <background android:drawable="@drawable/ic_launcher_background" />
    <foreground android:drawable="@drawable/ic_launcher_foreground" />
</adaptive-icon>
複製程式碼

然後清單使用android:icon 屬性以指定可繪製資源,還可以使用該android:roundIcon 屬性定義圖示可繪製資源。

<applicationandroid:icon="@mipmap/ic_launcher"
    android:roundIcon="@mipmap/ic_launcher_round"
    …>
</application>
複製程式碼

如果要將常規自適應啟動器圖示應用於快捷方式的相同蒙版和視覺效果,使用以下:

  • 對於靜態快捷方式,請使用該<adaptive-icon>元素。
  • 對於動態快捷方式,請在createWithAdaptiveBitmap() 建立方法時呼叫該 方法。

大功告成,Android 8.0 上能自適應,以下是預設的圖示。

注意:Android Studio 3.0 以下的編譯器無法找到 adaptive-icon 標籤,這點未驗證。

原始碼

公眾號「吳小龍同學」回覆:AdaptiveIconsSample,獲得完整 Sample 程式碼。

公眾號

我的公眾號:吳小龍同學,歡迎交流~

Android 8.0 自適應圖示

相關文章