Android Dev Summit, October 23-24: two days of technical content, directly from the Android team. Sign-up for livestream updates.

自動調整圖示

Android 8.0 (API 等級 26) 導入了自動調整啟動器圖示,可在不同裝置型號上顯示多種形狀。舉例來說,自動調整啟動器圖示可在某台原始設備製造商 (OEM) 裝置上顯示圓形,並在另一台裝置上顯示方圓形。每個裝置原始設備製造商 (OEM) 都會提供遮罩,讓系統用來將所有自動調整圖示變成相同形狀。自動調整啟動器圖示還可用於捷徑、「設定」應用程式、分享對話方塊,以及總覽畫面。

套用至自動調整圖示線框的多種遮罩 套用至自動調整圖示的多種遮罩

圖 1. 自動調整圖示支援多種因裝置而異的遮罩。

您可以定義由背景和前景組成的 2 個圖層,藉此控制自動調整啟動器圖示的外觀。提供圖示圖層時必須將其當做可繪項目,且不得包含遮罩,也不得在圖示輪廓周圍加上背景陰影。

建立自動調整圖示的等角投影圖

圖 2. 自動調整圖示是以 2 個圖層和 1 個遮罩定義。

在 Android 7.1 (API 等級 25) 以下版本中,啟動器圖示的大小為 48 x 48 dp。而現在,您必須按照下列規範調整圖示圖層的大小:

  • 兩個圖層的大小都必須為 108 x 108 dp。
  • 圖示中間的 72 x 72 dp 部分會顯示在套用遮罩後的檢視點中。
  • 系統會保留圖示 4 邊外側 18 dp 的部分,藉此產生有趣的視覺效果,例如視差或跳動。

附註:動畫視覺效果是由支援的啟動器產生,不同啟動器產生的視覺效果可能有所差異。

注意:裝置原始設備製造商 (OEM) 指定的遮罩可能會包含半徑最短為 33 dp 的圓形 (沿著該形狀的特定點)。

自動調整圖示套用視差效果的範例 自動調整圖示套用選取動畫效果的範例

圖 3. 自動調整圖示支援多種視覺效果。

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

想瞭解如何使用 Android Studio 建立自動調整圖示,請參閱使用 Image Asset Studio 建立應用程式圖示一文。

使用 XML 建立自動調整圖示

如要使用 XML 在應用程式中新增自動調整圖示,請先更新應用程式資訊清單中的 android:icon 屬性來指定可繪項目資源。您也可以使用 android:roundIcon 屬性自訂圖示可繪項目資源。如果您需要針對圓形遮罩使用不同的圖示素材資源 (例如,假設您的標誌是以圓形做為品牌特色),則只能使用 android:roundIcon 屬性。以下是這兩種屬性的程式碼片段範例:

    <application
        …
        android:icon="@mipmap/ic_launcher"
        android:roundIcon="@mipmap/ic_launcher_round"
        …>
    </application>
    

接著,您必須在 res/mipmap-v26/ic_launcher.xml 中,為應用程式建立替代可繪項目資源,以搭配 Android 8.0 (API 等級 26) 使用。建立完成後,您就可以使用 <adaptive-icon> 元素,為圖示定義前景和背景圖層可繪項目。<foreground><background> 內部元素都支援 android:drawable 屬性。

    <?xml version="1.0" encoding="utf-8"?>
    <adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
        <background android:drawable="@drawable/ic_launcher_background" />
        <foreground android:drawable="@drawable/ic_launcher_foreground" />
    </adaptive-icon>
    

您也可以將背景和前景可繪項目加入 <foreground><background> 元素中,將其定義為元素。

如果您想為捷徑套用與一般自動調整啟動器圖示相同的遮罩和視覺效果,請使用下列其中一種技巧:

  • 如果是靜態捷徑,請使用 <adaptive-icon> 元素。
  • 如果是動態捷徑,請在建立捷徑時呼叫 createWithAdaptiveBitmap() 方法。

如要進一步瞭解捷徑,請參閱應用程式捷徑一文。

其他資源

如要進一步瞭解如何設計及導入自動調整圖示,請參閱下列由 Google 設計師兼開發人員 Nick Butcher 撰寫的一系列文章: