自動調整圖示 (或 AdaptiveIconDrawable
) 可能會根據個別裝置的功能和使用者主題顯示不同的內容。主要用於主畫面的啟動器,但也可能用於捷徑、「設定」應用程式、分享對話方塊及總覽畫面。
自動調整圖示可配合不同用途調整:
不同形狀:自動調整圖示可以在不同裝置型號上顯示各種形狀。舉例來說,它可以在一部 OEM 裝置上顯示圓形,並在另一個裝置上顯示方形 (正方形與圓形之間的形狀)。裝置原始設備製造商 (OEM) 都必須提供遮罩,系統會使用該遮罩算繪所有具有相同形狀的自動調整圖示。
圖 1.自動調整圖示支援多種因裝置而異的遮罩。 視覺效果:自動調整圖示支援各種引人入勝的視覺效果,當使用者在主畫面上放置或移動圖示,就會看到這些效果。
圖 2.自動調整圖示顯示的視覺效果範例。 使用者主題設定:從 Android 13 (API 級別 33) 開始,使用者可以針對自動調整圖示套用主題。如果使用者啟用主題化應用程式圖示,只要在系統設定中開啟「主題化圖示」切換鈕,啟動器支援這項功能,系統就會根據使用者所選桌布和主題的色彩決定色調。
圖 3.自動調整圖示會沿用使用者的桌布和主題。
在以下情況中,主畫面不會顯示主題化應用程式圖示,而是顯示自動調整或標準應用程式圖示:
- 如果使用者未啟用主題化應用程式圖示,
- 如果您的應用程式未提供單色應用程式圖示,
- 如果啟動器不支援主題化應用程式圖示。
設計自動調整圖示
為確保自動調整圖示支援不同的形狀、視覺效果和使用者主題設定,設計必須符合下列規定:
您必須為圖示的色彩版本提供兩個圖層:一個用於前景,另一個用於背景。
圖 4.使用前景和背景圖層定義的自動調整圖示。此處顯示的 72x72 安全區域是指絕不會由原始設備製造商 (OEM) 定義的形狀遮罩裁剪的區域。 圖 5.前景和背景圖層在套用圓形遮罩後看起來如何相輔相成的範例。 如要支援使用者對應用程式圖示的主題設定,請提供一個單色圖示版本的圖層。
圖 6.單色圖示圖層 (左側),右側有色彩預覽範例。 將所有圖層的大小調整為 108x108 dp。
使用邊緣簡潔的圖示。圖層在圖示輪廓周圍不得有遮罩或背景陰影。
請使用大小至少為 48x48 dp 的標誌。圖示不得超過 72x72 dp,因為圖示的內部 72x72 dp 會顯示在套用遮罩的可視區域中。
圖層四邊的外側 18 dp 則保留給遮罩,用來建立視差或閃爍等視覺效果。
如要瞭解如何使用 Android Studio 建立自動調整圖示,請參閱「Android 應用程式圖示 Figma 範本」或「用於建立啟動器圖示的 Android Studio 說明文件」。另請參閱設計自動調整圖示這篇網誌文章。
在應用程式中新增自動調整圖示
如要為應用程式新增自動調整圖示,請更新應用程式資訊清單中的 android:icon
屬性,指定可繪製資源。您也可以使用 android:roundIcon
屬性定義圖示可繪製資源,但前提是您需要針對圓形遮罩使用不同的圖示素材資源 (例如品牌宣傳必須使用圓形)。
下列程式碼片段說明這兩種屬性,但大多數應用程式只會指定 android:icon
:
<application ... android:icon="@mipmap/ic_launcher" android:roundIcon="@mipmap/ic_launcher_round" ...> </application>
接下來,在 res/mipmap-anydpi-v26/ic_launcher.xml
中,在應用程式中建立額外可繪製資源,以提供與 Android 8.0 (API 級別 26) 的回溯相容性。使用 <adaptive-icon>
元素,定義圖示的前景、背景和單色圖層可繪項目。<foreground>
、<background>
和 <monochrome>
內部元素支援 android:drawable
屬性。
以下範例說明如何在 <adaptive-icon>
中定義 <foreground>
、<background>
和 <monochrome>
元素:
<?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" /> // Starting with Android 13 (API level 33), you can opt-in to providing a // <monochrome> drawable. <monochrome android:drawable="@drawable/ic_launcher_monochrome" /> </adaptive-icon> ...
您也可以將可繪項目定義為元素,只要在 <foreground>
、<background>
和 <monochrome>
元素中加入可繪項目即可。以下程式碼片段示範如何透過前景可繪項目執行此操作。
<?xml version="1.0" encoding="utf-8"?> ... <foreground> <inset android:insetBottom="18dp" android:insetLeft="18dp" android:insetRight="18dp" android:insetTop="18dp"> <shape android:shape="oval"> <solid android:color="#0000FF" /> </shape> </inset> </foreground> ...
如果您想為捷徑套用與一般自動調整圖示相同的遮罩和視覺效果,請使用下列其中一種技巧:
- 如果是靜態捷徑,請使用
<adaptive-icon>
元素。 - 如果是動態捷徑,請在建立捷徑時呼叫
createWithAdaptiveBitmap()
方法。
如要進一步瞭解如何實作自動調整圖示,請參閱「實作自動調整圖示」。如要進一步瞭解捷徑,請參閱「應用程式捷徑總覽」一文。
其他資源
如要進一步瞭解如何設計及實作自動調整圖示,請參閱下列資源。