自動調整圖示 (或 AdaptiveIconDrawable
) 會依個別裝置的性能和使用者設定的主題來改變顯示效果,主要應用的地方是主畫面的啟動器,但也可能用於捷徑、「設定」應用程式、分享對話方塊及總覽畫面。自動調整圖示適用於所有 Android 板型規格。
與點陣圖圖片不同,自動調整式圖示可因應不同用途:
不同形狀:自動調整圖示可在不同裝置型號上顯示各種形狀。舉例來說,自動調整啟動器圖示可在某台原始設備製造商 (OEM) 裝置上顯示圓形,並在另一台裝置上顯示方圓形 (介於正方形和圓形之間的形狀)。每個裝置原始設備製造商 (OEM) 都必須提供遮罩,讓系統用來將所有自動調整圖示變成相同形狀。
圖 1. 自動調整圖示支援多種遮罩,這些遮罩會因裝置而異。 視覺效果:自動調整圖示支援各種富有吸引力的視覺效果,當使用者在主畫面上放置或移動圖示,就會看到這些效果。
圖 2. 自動調整圖示顯示的視覺效果範例。 使用者主題:從 Android 13 (API 級別 33) 開始,使用者可以針對自動調整圖示套用主題。如果使用者啟用主題化應用程式圖示 (在系統設定中開啟「主題化圖示」切換鈕),且啟動器支援這項功能,系統就會根據使用者所選桌布和主題的配色,調整圖示的色調。
圖 3. 自動調整圖示會沿用使用者的桌布和主題。 在下列情況下,主畫面不會顯示主題式應用程式圖示,而是顯示自適應或標準應用程式圖示:
- 使用者未啟用主題化應用程式圖示。
- 如果應用程式未提供單色應用程式圖示。
- 如果啟動器不支援主題化應用程式圖示。
設計自動調整圖示
為確保自動調整圖示支援各種形狀、視覺效果和使用者主題設定,設計必須符合下列規定:
彩色圖示需要兩個圖層,分別用於前景和背景。圖層可以是向量或點陣圖,但建議使用向量。
圖 4. 自動調整圖示是使用前景和背景圖層定義。圖中顯示的 66x66 安全區域,絕不會遭到 OEM 定義的形狀遮罩裁剪。 圖 5. 以下範例顯示前景和背景圖層套用圓形遮罩後的外觀。 如果想讓應用程式圖示根據使用者的主題設定進行調整,請提供一個單色圖示版本的圖層。
圖 6. 單色圖示圖層 (左),以及顏色預覽範例 (右)。 將所有圖層的大小調整為 108x108 dp。
使用邊緣乾淨的圖示。圖層不得包含遮罩,也不得在圖示輪廓周圍加上背景陰影。
使用至少 48x48 dp 的標誌。大小不得超過 66 x 66 dp,因為圖示中間的 66 x 66 dp 部分會顯示在套用遮罩後的檢視點中。
圖層四邊外側 18 dp 的部分會保留用於遮罩,並產生視差或跳動等視覺效果。
如要瞭解如何使用 Android Studio 建立自動調整圖示,請參閱 Android 應用程式圖示 Figma 範本,或建立啟動器圖示的 Android Studio 說明文件。此外,也請參閱「設計自動調整圖示」網誌文章。
在應用程式中新增自動調整圖示
與非自動調整圖示一樣,自動調整圖示也是使用應用程式資訊清單中的 android:icon
屬性指定。
啟動器會使用選填屬性 android:roundIcon
代表具有圓形圖示的應用程式。如果應用程式圖示包含圓形背景,且是設計的核心部分,這項屬性就非常實用。這類啟動器必須透過對 android:roundIcon
套用圓形遮罩來產生應用程式圖示,而這項保證可讓您最佳化應用程式圖示的外觀,例如稍微放大標誌,並確保裁剪後圓形背景會滿版。
以下程式碼片段會說明這兩種屬性,但大多數應用程式只會指定 android:icon
:
<application ... android:icon="@mipmap/ic_launcher" android:roundIcon="@mipmap/ic_launcher_round" ...> </application>
接著,將自動調整圖示儲存至 res/mipmap-anydpi-v26/ic_launcher.xml
。使用 <adaptive-icon>
元素定義圖示的前景、背景和單色圖層資源。<foreground>
、<background>
和 <monochrome>
內部元素同時支援向量和點陣圖。
以下範例說明如何在 <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" /> <monochrome android:drawable="@drawable/ic_launcher_foreground" /> </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()
方法。
如要進一步瞭解如何導入自動調整圖示,請參閱「導入自動調整圖示」。如要進一步瞭解捷徑,請參閱「應用程式捷徑總覽」。
其他資源
如要進一步瞭解如何設計及導入自動調整圖示,請參閱下列資源。