建立應用程式圖示 (Views)

實作 Jetpack Compose

本頁面提供建立及使用應用程式圖示的相關資訊，僅適用於以 View 為基礎的版面配置。如要進一步瞭解如何建立應用程式圖示，請參閱「建立應用程式圖示」，其中涵蓋我們建議使用的 UI 架構。

建立動作列或分頁圖示

使用 Image Asset Studio，為以 View 為基礎的版面配置建立動作列和分頁圖示。

動作列圖示是動作列中的圖形元素，用來代表個別動作項目。詳情請參閱「新增及處理動作」、「應用程式列 - Material Design」{:.external}和「動作列設計」。

分頁圖示是圖形元素，用來代表多分頁介面中的個別分頁。每個分頁圖示都有兩個狀態：未選取和已選取。詳情請參閱「使用分頁建立滑動檢視」和「分頁 - 質感設計」。

Image Asset Studio 會將圖示放在 res/drawable-<density>/ 目錄中的適當位置。

即使您的應用程式支援較舊的 Android 版本，我們仍建議您在動作列和分頁圖示上使用 Material Design 樣式。使用 appcompat 和其他支援程式庫，在較舊的平台版本中提供您的 Material Design UI。

除了 Image Asset Studio 以外，您也可以使用 Vector Asset Studio 建立動作列和分頁圖示。向量可繪項目適用於簡單的圖示，可縮減應用程式的大小。

開啟 Image Asset Studio 後，請按照以下步驟新增動作列或分頁圖示：

  1. 在「Icon Type」欄位中，選取「Action Bar and Tab Icons」。

  2. 選取「Asset Type」，然後在下方欄位中指定素材資源：

    • 按一下「Clip Art」欄位中的按鈕。

      在「Select Icon」對話方塊中，選取一個 Material Design 圖示，然後按一下「OK」。

    • 在「Path」欄位中，指定圖片的路徑和檔案名稱。如要使用對話方塊，請按一下「...」。

    • 在「Text」欄位中輸入文字字串，然後選取字型。

    圖示會顯示在右側的「來源素材資源」區域，以及精靈底部的預覽區域中。

  3. 視需要變更名稱和顯示選項：

    • 「Name」：如果不想使用預設名稱，可以輸入新名稱。如果專案已有該資源名稱 (如精靈底部的錯誤所示)，系統會覆寫該資源名稱。這個名稱只能包含小寫字元、底線和數字。

    • 「Trim」：如要調整來源素材資源中圖示圖形和框線之間的邊界，請選取「Yes」。這項作業會移除透明空間，同時保留長寬比。如要讓來源素材資源維持不變，請選取「No」。

    • 「Padding」：如要調整來源素材資源四邊的邊框間距，請移動滑桿。請選取 -10% 至 50% 之間的值。如果您選取「Trim」，則會先進行裁切。

    • 「Theme」：選取「HOLO_LIGHT」或「HOLO_DARK」。或者，如要在「Select Color」對話方塊中指定顏色，請選取「CUSTOM」，然後按一下「Custom color」欄位。

    Image Asset Studio 會在透明的正方形內建立圖示，因此邊緣周圍會有邊框間距。邊框間距提供足夠空間，可用於呈現標準投射陰影圖示效果。

  4. 點選 [下一步]。

  5. 視需要變更資源目錄：

    • 「Res Directory」：選取要新增圖片素材資源的資源來源集：src/main/res、src/debug/res、src/release/res 或使用者定義的來源集。主要來源集會套用至所有建構變數，包括偵錯和發布版本。偵錯和發布來源集則會覆寫主要來源集，並套用至單一建構版本。偵錯來源集僅適用於偵錯。如要定義新的來源集，請依序選取「File」 >「Project Structure」 >「app」 >「Build Types」。舉例來說，您可以定義 Beta 版來源集，並建立右下角顯示「BETA」文字的圖示版本。詳情請參閱「設定建構變數」。

    「Output Directories」區域會顯示圖片，以及這些圖片會顯示在「Project」視窗中專案檔案檢視畫面的哪些資料夾內。

  6. 按一下「Finish」。

    Image Asset Studio 會將圖片新增至用於不同密度的「drawable」資料夾。

參照程式碼中的圖片資源

您通常可以在程式碼中以一般方式參照圖片資源，當應用程式執行時，系統會根據裝置自動顯示相應的圖片：

  • 在多數情況下，您可以在 XML 程式碼中使用 @drawable，或在 Java 程式碼中使用 Drawable 參照圖片資源。

    舉例來說，下列版面配置 XML 程式碼會在 ImageView 中顯示可繪項目：

    <ImageView
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    android:src="@drawable/myimage" />

    以下 Java 程式碼會將圖片擷取為 Drawable：

    Kotlin

    val drawable = resources.getDrawable(R.drawable.myimage, theme)

    Java

    Resources res = getResources();
Drawable drawable = res.getDrawable(R.drawable.myimage, getTheme());

    getResources() 方法位於 Context 類別，適用於 UI 物件，例如活動、片段、版面配置、檢視畫面等。

  • 如果您的應用程式使用支援資料庫，您可以透過 app:srcCompat 陳述式以 XML 程式碼參照圖片資源。例如：

    <ImageView
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    app:srcCompat="@drawable/myimage" />

您只能從主執行緒存取圖片資源。

專案的 res/ 目錄中有圖片資源後，您就可以透過 Java 程式碼或 XML 版面配置，使用資源 ID 參照該圖片資源。下列 Java 程式碼會設定 ImageView，以便使用 drawable/myimage.png 資源：

Kotlin

findViewById<ImageView>(R.id.myimageview).apply {
    setImageResource(R.drawable.myimage)
}

Java

ImageView imageView = (ImageView) findViewById(R.id.myimageview);
imageView.setImageResource(R.drawable.myimage);

詳情請參閱「存取應用程式資源」。