Android 8.0 自適應圖標

項目中遇到一個問題,Android 8.0 系統上 APP 的 icon 顯示的是默認的機器人的 icon,這是什麼回事?原來 Android 8.0(API 級別 26)引入了自適應啓動器圖標,能夠在不一樣設備模型中顯示各類形狀。下面看下官方酷炫動態圖:android

適用於自適應圖標線框的各類遮罩
適用於自適應圖標的各類蒙版

圖1. 自適應圖標支持各類設備之間不一樣的掩碼。markdown

能夠經過定義 2 層來控制自適應啓動器圖標的外觀,包括背景和前景。您必須提供圖標圖層做爲可繪圖,圖標輪廓周圍不能有蒙版或背景陰影。app

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

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

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

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

我驗證了,不是這些尺寸也是能夠的,但咱們仍是嚴格按照這個準則來吧。code

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

圖3. 自適應圖標支持各類視覺效果。orm

注意: 若是您沒有使用必要的圖層更新啓動器圖標,則該圖標與系統 UI 顯示的其餘圖標看起來不一致,而且不支持視覺效果。xml

用 XML 建立自適應圖標

咱們首先建立一個 Sample 項目,如圖: ip

比以往多一個 res/mipmap-anydpi-v26 文件,打開,有背景和前景。utf-8

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 代碼。

公衆號

個人公衆號:吳小龍同窗,歡迎交流~

相關文章
相關標籤/搜索