![]()
自動調整圖示 (AdaptiveIconDrawable) 會依個別裝置的性能和使用者設定的主題來改變顯示效果,自動調整圖示主要應用的地方是主畫面的啟動器,但也可能用於捷徑、「設定」應用程式、分享對話方塊及總覽畫面。自動調整圖示適用於所有 Android 板型規格。
與點陣圖圖片不同,自動調整圖示可配合不同用途:
不同形狀:自動調整圖示可在不同裝置型號上顯示各種形狀。舉例來說,它可以在某個原始設備製造商 (OEM) 裝置上顯示圓形,並在另一個裝置上顯示方圓形 (介於正方形和圓形之間的形狀)。每個裝置原始設備製造商 (OEM) 都必須提供遮罩,系統會使用遮罩算繪所有形狀相同的自動調整圖示。
圖 1. 自動調整圖示支援多種遮罩,具體取決於裝置。 視覺效果:自動調整圖示支援各種富有吸引力的視覺效果,當使用者在主畫面上放置或移動圖示,就會看到這些效果。
圖 2. 自動調整圖示顯示的視覺效果範例。 使用者主題:從 Android 13 (API 級別 33) 開始,使用者可以針對自動調整圖示套用主題。如果使用者在系統設定中啟用主題化應用程式圖示,且啟動器支援這項功能,系統就會根據使用者所選桌布和主題的配色,調整應用程式圖示的色調,前提是應用程式的自動調整圖示有
monochrome圖層。從 Android 16 QPR 2 開始,如果應用程式未提供圖示,Android 會自動為應用程式圖示套用主題。
圖 3. 自動調整圖示會沿用使用者的桌布和主題。 在下列情況下,主畫面不會顯示主題色應用程式圖示,而是顯示自動調整或標準應用程式圖示:
- 使用者未啟用主題色應用程式圖示。
- 如果應用程式未提供單色應用程式圖示,且使用者裝置搭載的 Android 版本低於 Android 16 QPR 2。
- 如果啟動器不支援主題色應用程式圖示。
設計自動調整圖示
為確保自動調整圖示支援各種形狀、視覺效果和使用者主題設定,設計必須符合下列規定:
您必須為彩色版圖示提供兩個圖層:一個用於前景,另一個用於背景。圖層可以是向量或點陣圖,但建議使用向量。
圖 4. 使用前景和背景圖層定義的自動調整圖示。圖中 66x66 的安全區,是 OEM 定義的形狀遮罩絕不會裁剪的區域。
圖 5. 前景和背景圖層與圓形遮罩一起套用的範例。 如要讓應用程式圖示支援使用者主題設定,請提供單色圖示版本的單一圖層。
圖 6. 單色圖示層 (左) 和顏色預覽範例 (右)。 將所有圖層的大小調整為 108x108 dp。
使用邊緣清晰的圖示。圖層不得在圖示外框周圍加上遮罩或背景陰影。
請使用至少 48x48 dp 的標誌。大小不得超過 66x66 dp,因為圖示內部 66x66 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()方法。
如要進一步瞭解如何導入自動調整圖示,請參閱「導入自動調整圖示」。如要進一步瞭解捷徑,請參閱「應用程式捷徑總覽」。
其他資源
如要進一步瞭解如何設計及實作自動調整圖示,請參閱下列資源。