本頁面由 Cloud Translation API 翻譯而成。

可繪項目總覽
透過集合功能整理內容你可以依據偏好儲存及分類內容。

如果需要在應用程式中顯示靜態圖片，可以使用 Drawable 類別及其子類別來繪製形狀和所以映像檔較小Drawable 是以下項目的一般抽象化機制： 可以繪製的事物各種子類別可協助您處理特定圖片您可以擴充這些情境，定義自己的可繪項目物件能夠以獨特的方式運作

除了使用類別建構函式，您也可以用兩種方式定義和例項化 Drawable：

加載儲存在專案中的圖片資源 (點陣圖檔案)。
加載定義可繪項目屬性的 XML 資源。

注意： 建議您改用向量可繪項目，以定義圖片的點、線和曲線，以及相關色彩資訊。如此一來，向量可繪項目但不會影響畫質詳情請參閱「向量可繪項目總覽。

根據資源圖片建立可繪項目

您可以參照專案資源支援的檔案類型包括 PNG (建議)、JPG (可接受)、和 GIF (不建議)。應用程式圖示、標誌和其他圖像，例如非常適合採用這種技巧

如要使用圖片資源，請將檔案新增至 res/drawable/ 目標專案目錄在專案中您可以參照從程式碼或 XML 版面配置中移除資源無論選擇哪種方式，一律採用資源 ID，即不含檔案類型副檔名的檔案名稱。適用對象例如，將 my_image.png 稱為 my_image。

注意：放在可能會透過以下項目自動最佳化 res/drawable/ 目錄：在建構期間使用 aapt 工具進行無損圖片壓縮上傳資料集之後，您可以運用 AutoML 自動完成部分資料準備工作例如，真實色彩 PNG，而且只能使用 256 種顏色可以使用調色盤轉換為 8 位元 PNG。這會產生一張圖片但需要較少記憶體因此，映像檔的二進位檔此目錄中的所有項目可能會在建構時變更。如果您想閱讀才能轉換為點陣圖，將圖片放在改為 res/raw/ 資料夾，但 aapt 工具沒有進行修改。

下列程式碼片段說明如何建立 ImageView，以使用從可繪製資源建立的圖片並新增至版面配置：

Kotlin

private lateinit var constraintLayout: ConstraintLayout

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)

    // Instantiate an ImageView and define its properties
    val i = ImageView(this).apply {
        setImageResource(R.drawable.my_image)
        contentDescription = resources.getString(R.string.my_image_desc)

        // set the ImageView bounds to match the Drawable's dimensions
        adjustViewBounds = true
        layoutParams = ViewGroup.LayoutParams(
                ViewGroup.LayoutParams.WRAP_CONTENT,
                ViewGroup.LayoutParams.WRAP_CONTENT)
    }

    // Create a ConstraintLayout in which to add the ImageView
    constraintLayout = ConstraintLayout(this).apply {

        // Add the ImageView to the layout.
        addView(i)
    }

    // Set the layout as the content view.
    setContentView(constraintLayout)
}

Java

ConstraintLayout constraintLayout;

protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);

  // Create a ConstraintLayout in which to add the ImageView
  constraintLayout = new ConstraintLayout(this);

  // Instantiate an ImageView and define its properties
  ImageView i = new ImageView(this);
  i.setImageResource(R.drawable.my_image);
  i.setContentDescription(getResources().getString(R.string.my_image_desc));

  // set the ImageView bounds to match the Drawable's dimensions
  i.setAdjustViewBounds(true);
  i.setLayoutParams(new ViewGroup.LayoutParams(
          ViewGroup.LayoutParams.WRAP_CONTENT,
          ViewGroup.LayoutParams.WRAP_CONTENT));

  // Add the ImageView to the layout and set the layout as the content view.
  constraintLayout.addView(i);
  setContentView(constraintLayout);
}

在其他情況下，建議您將圖片資源處理為 Drawable 物件，如下所示範例：

Kotlin

val myImage: Drawable = ResourcesCompat.getDrawable(context.resources, R.drawable.my_image, null)

Java

Resources res = context.getResources();
Drawable myImage = ResourcesCompat.getDrawable(res, R.drawable.my_image, null);

警告：專案中的每個不重複資源無論您建立多少不同的物件例項化。舉例來說，假設您從同一圖片資源將兩個 Drawable 物件例項化，並變更一個物件的屬性 (例如 Alpha 值)，但也會影響另一個處理映像檔資源的多個執行個體時才能直接轉換 Drawable 物件，您應執行前青少年動畫。

以下 XML 程式碼片段說明如何在 XML 版面配置中，將可繪製資源新增至 ImageView：

<ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/my_image"
        android:contentDescription="@string/my_image_desc" />

如要進一步瞭解如何使用專案資源，請參閱「資源和資產」。

注意事項：使用圖片資源做為可繪項目來源時，確認圖片尺寸適用於各種像素密度。如果圖像不正確時，系統會將圖片調整為適當大小，導致可繪項目失真。詳情請參閱透過像素密度。

從 XML 資源建立可繪項目

如果有 Drawable 要建立的物件，一開始並沒有依賴由然後在 XML 中定義 Drawable 是個不錯的方法平均如果您希望 Drawable 在使用者互動期間變更屬性，請這麼做您應考慮使用 XML 定義物件，因為您可以在已為物件執行個體化

在 XML 中定義 Drawable 後，請將檔案儲存在專案的 res/drawable/ 目錄。以下範例顯示會定義 TransitionDrawable 繼承自 Drawable 的資源：

<!-- res/drawable/expand_collapse.xml -->
<transition xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/image_expand"/>
    <item android:drawable="@drawable/image_collapse"/>
</transition>

然後，透過呼叫 Resources#getDrawable() 並傳送 XML 檔案的資源 ID不限 Drawable 子類別支援 inflate() 方法，且可在 XML 中定義並例項化。

重要事項：擴充 Drawable 子類別的自訂類別必須覆寫 getConstantState() 方法。請參閱下方「自訂可繪項目」一節的重點。

每個支援 XML 加載作業的可繪項目類別都會使用特定的 XML 屬性這些內容會用於定義物件屬性下方程式碼會將 TransitionDrawable 並將其設為 ImageView 物件：

Kotlin

val transition= ResourcesCompat.getDrawable(
        context.resources,
        R.drawable.expand_collapse,
        null
) as TransitionDrawable

val image: ImageView = findViewById(R.id.toggle_image)
image.setImageDrawable(transition)

// Description of the initial state that the drawable represents.
image.contentDescription = resources.getString(R.string.collapsed)

// Then you can call the TransitionDrawable object's methods.
transition.startTransition(1000)

// After the transition is complete, change the image's content description
// to reflect the new state.

Java

Resources res = context.getResources();
TransitionDrawable transition =
    (TransitionDrawable) ResourcesCompat.getDrawable(res, R.drawable.expand_collapse, null);

ImageView image = (ImageView) findViewById(R.id.toggle_image);
image.setImageDrawable(transition);

// Description of the initial state that the drawable represents.
image.setContentDescription(getResources().getString(R.string.collapsed));

// Then you can call the TransitionDrawable object's methods.
transition.startTransition(1000);

// After the transition is complete, change the image's content description
// to reflect the new state.

如要進一步瞭解支援的 XML 屬性，請參閱。

形狀可繪項目

ShapeDrawable 物件當您想動態繪製 2D 圖形時你可以透過程式輔助方式在 ShapeDrawable 物件上繪製原始形狀並套用應用程式所需的樣式

ShapeDrawable 是 Drawable 的子類別。因此，您可以使用 ShapeDrawable 應位於 Drawable 的位置。適用對象例如，您可以使用 ShapeDrawable 物件來設定背景的檢視畫面，方法是將其傳遞至檢視區塊的 setBackgroundDrawable() 方法。也可以繪製形狀並新增至應用程式中的版面配置。

由於 ShapeDrawable 有專屬的 draw() 方法，您可以可繪製 ShapeDrawable 的 View 子類別物件，如onDraw() 以下程式碼範例：

Kotlin

class CustomDrawableView(context: Context) : View(context) {
    private val drawable: ShapeDrawable = run {
        val x = 10
        val y = 10
        val width = 300
        val height = 50
        contentDescription = context.resources.getString(R.string.my_view_desc)

        ShapeDrawable(OvalShape()).apply {
            // If the color isn't set, the shape uses black as the default.
            paint.color = 0xff74AC23.toInt()
            // If the bounds aren't set, the shape can't be drawn.
            setBounds(x, y, x + width, y + height)
        }
    }

    override fun onDraw(canvas: Canvas) {
        drawable.draw(canvas)
    }
}

Java

public class CustomDrawableView extends View {
  private ShapeDrawable drawable;

  public CustomDrawableView(Context context) {
    super(context);

    int x = 10;
    int y = 10;
    int width = 300;
    int height = 50;
    setContentDescription(context.getResources().getString(
            R.string.my_view_desc));

    drawable = new ShapeDrawable(new OvalShape());
    // If the color isn't set, the shape uses black as the default.
    drawable.getPaint().setColor(0xff74AC23);
    // If the bounds aren't set, the shape can't be drawn.
    drawable.setBounds(x, y, x + width, y + height);
  }

  protected void onDraw(Canvas canvas) {
    drawable.draw(canvas);
  }
}

您可以在程式碼範例中使用 CustomDrawableView 類別方法就跟使用其他自訂檢視模式一樣舉例來說：透過程式輔助方式將函式新增至應用程式活動，如下所示範例：

Kotlin

private lateinit var customDrawableView: CustomDrawableView

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    customDrawableView = CustomDrawableView(this)

    setContentView(customDrawableView)
}

Java

CustomDrawableView customDrawableView;

protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  customDrawableView = new CustomDrawableView(this);

  setContentView(customDrawableView);
}

如果您想改為在 XML 版面配置中使用自訂檢視區塊，請 CustomDrawableView 類別必須覆寫 View(Context, AttributeSet) 建構函式，系統會在類別發生時呼叫該建構函式由 XML 加載。以下範例說明如何宣告 XML 版面配置中的 CustomDrawableView：

<com.example.shapedrawable.CustomDrawableView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        />

ShapeDrawable 類別，和其他許多 android.graphics.drawable 套件中的可繪項目類型，可讓您使用公開方法定義物件的各種屬性。一些例子建議調整的屬性包括 Alpha 透明度、色彩濾鏡顏色、透明度和顏色。

您也可以使用 XML 資源定義原始可繪項目形狀。如要資訊，請參閱中的形狀可繪項目可繪製資源類型。

NinePatch 可繪項目

NinePatchDrawable 圖形是一個可延展點陣圖圖片，可做為檢視畫面的背景。Android 版自動調整圖像大小，以配合檢視畫面的內容。一個 NinePatch 圖像的使用範例為標準 Android 使用的背景按鈕：按鈕必須延伸，才能容納各種長度的字串。A 罩杯 NinePatch 圖像是標準的 PNG 圖片，其中包含額外的 1 像素邊框。必須使用 9.png 擴充功能儲存 (位於專案的 res/drawable/ 目錄。

使用邊框來定義圖片的可延展和靜態區域。繪製一個 (或更多個) 1 像素寬，即可指出可延展區塊框線的左側和上半部黑線 (其他邊框像素) 必須是完全透明或白色的內容)。可以延展的部分數量視需要調整設定可延展部分的相對大小維持不變最大的區塊永遠是最大的

您也可以為圖片定義選用的可繪項目部分 (實際上也就是在右側繪製線條，並在底部繪製線條。如果 View 物件會將 NinePatch 圖像設為背景然後指定檢視區塊的文字，並延展到所有文字只會佔用右側和底部程式碼指定的區域 (如有)。如果沒有邊框間距，Android 會使用左側和上行會定義此可繪項目區域

為了清楚區分兩條線的差異，左側和上行會定義允許複製的圖像像素來延展圖片。底部和右線會定義圖片中的相對區域檢視畫面的內容可供佔用。

圖 1 範例顯示用來定義按鈕的 NinePatch 圖像：

圖 1：NinePatch 圖像範例定義按鈕的

此 NinePatch 圖像定義了一個可延展區域，左側和頂部為一個可延展區域而可繪項目區域以及底部和右側線條在頂端圖片中灰色虛線代表複製的圖像區域以便延展圖片底部圖片中的粉紅色矩形代表了系統允許檢視區塊內容的區域。如果內容會延展圖片，將圖片調整為合適大小。

繪製 9-patch 工具提供用 WYSIWYG 圖形製作 NinePatch 圖像非常方便的方法編輯。如為可延展範圍定義區域，它甚至會引發警告可能導致系統產生繪圖失真複製功能

以下版面配置 XML 示範如何新增 NinePatch 圖像移到兩個按鈕上NinePatch 圖像會儲存至 res/drawable/my_button_background.9.png。

<Button android:id="@+id/tiny"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerInParent="true"
        android:text="Tiny"
        android:textSize="8sp"
        android:background="@drawable/my_button_background"/>

<Button android:id="@+id/big"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerInParent="true"
        android:text="Biiiiiiig text!"
        android:textSize="30sp"
        android:background="@drawable/my_button_background"/>

請注意，layout_width 和 layout_height 將屬性設為 wrap_content，讓按鈕更美觀文字周圍

圖 2 顯示透過 XML 和 NinePatch 圖像轉譯的兩個按鈕如上所示。請注意按鈕的寬度和高度會如何隨文字改變而且背景圖片會配合尺寸延展

圖 2：使用 XML 轉譯的按鈕資源和 NinePatch 圖像

自訂可繪項目

如要建立自訂繪圖，您可以擴充 Drawable 類別 (或其任何子類別)。

最重要的實作方法為 draw(Canvas) 因為此方法會提供您需要使用的 Canvas 物件擷取繪圖指示

以下程式碼顯示 Drawable 的簡易子類別來繪製圓形：

Kotlin

class MyDrawable : Drawable() {
    private val redPaint: Paint = Paint().apply { setARGB(255, 255, 0, 0) }

    override fun draw(canvas: Canvas) {
        // Get the drawable's bounds
        val width: Int = bounds.width()
        val height: Int = bounds.height()
        val radius: Float = Math.min(width, height).toFloat() / 2f

        // Draw a red circle in the center
        canvas.drawCircle((width / 2).toFloat(), (height / 2).toFloat(), radius, redPaint)
    }

    override fun setAlpha(alpha: Int) {
        // This method is required
    }

    override fun setColorFilter(colorFilter: ColorFilter?) {
        // This method is required
    }

    override fun getOpacity(): Int =
        // Must be PixelFormat.UNKNOWN, TRANSLUCENT, TRANSPARENT, or OPAQUE
        PixelFormat.OPAQUE
}

Java

public class MyDrawable extends Drawable {
    private final Paint redPaint;

    public MyDrawable() {
        // Set up color and text size
        redPaint = new Paint();
        redPaint.setARGB(255, 255, 0, 0);
    }

    @Override
    public void draw(Canvas canvas) {
        // Get the drawable's bounds
        int width = getBounds().width();
        int height = getBounds().height();
        float radius = Math.min(width, height) / 2;

        // Draw a red circle in the center
        canvas.drawCircle(width/2, height/2, radius, redPaint);
    }

    @Override
    public void setAlpha(int alpha) {
        // This method is required
    }

    @Override
    public void setColorFilter(ColorFilter colorFilter) {
        // This method is required
    }

    @Override
    public int getOpacity() {
        // Must be PixelFormat.UNKNOWN, TRANSLUCENT, TRANSPARENT, or OPAQUE
        return PixelFormat.OPAQUE;
    }
}

接著，您可以視需求新增可繪項目，例如 ImageView，如下所示：

Kotlin

val myDrawing = MyDrawable()
val image: ImageView = findViewById(R.id.imageView)
image.setImageDrawable(myDrawing)
image.contentDescription = resources.getString(R.string.my_image_desc)

Java

MyDrawable mydrawing = new MyDrawable();
ImageView image = findViewById(R.id.imageView);
image.setImageDrawable(mydrawing);
image.setContentDescription(getResources().getString(R.string.my_image_desc));

在 Android 7.0 (API 級別 24) 以上版本中，您也可以定義自訂可繪項目的執行個體以下列方式使用 XML：

使用完整的類別名稱做為 XML 元素名稱。就這個方法而言可繪項目類別必須是公開的頂層類別：
```
<com.myapp.MyDrawable xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="#ffff0000" />
```
使用 drawable 做為 XML 標記名稱，並指定完整類別從類別屬性中移除名稱這個方法適用於公開頂層類別和公開靜態內部類別：
```
<drawable xmlns:android="http://schemas.android.com/apk/res/android"
    class="com.myapp.MyTopLevelClass$MyDrawable"
    android:color="#ffff0000" />
```

，瞭解如何調查及移除這項存取權。

重點提示：擴充 Drawable 子類別的自訂類別 (例如如 ColorDrawable) 必須覆寫 getConstantState() 方法，然後傳回空值 (或 Drawable.ConstantState)。確定自訂類別的所有加載例項都是正確的類型。第一次呼叫 Resources#getDrawable() 加載自訂類別，一律正確建立則為自訂類型 (例如 MyColorDrawable)。不過呼叫會建立父項類型 (例如 ColorDrawable) 的執行個體， getConstantState()並未覆寫。直接設為子類別的自訂類別 Drawable 不需覆寫 getConstantState()。

為可繪項目新增色調

在 Android 5.0 (API 級別 21) 以上版本中，您可以對點陣圖和 nine-patch 定義使用 Alpha 遮罩可使用色彩資源或解析為顏色的主題屬性來配色 (例如 ?android:attr/colorPrimary)。您通常會建立這些素材資源而且只會依照主題自動調整顏色。

可套用色調至 BitmapDrawable、NinePatchDrawable 或 VectorDrawable 建立含有 setTint() 方法的物件你可以您也可以使用 android:tint 和 android:tintMode 屬性。

從圖片擷取顯著色彩

Android 支援資料庫包含 Palette 類別，可讓您從圖片中擷取醒目的顏色。您可以將可繪項目載入為 Bitmap，並傳遞至 Palette 來存取顏色。如需瞭解更多資訊，請參閱選擇色彩 Palette API。

可繪項目總覽 透過集合功能整理內容 你可以依據偏好儲存及分類內容。

根據資源圖片建立可繪項目

Kotlin

Java

Kotlin

Java

從 XML 資源建立可繪項目

Kotlin

Java

形狀可繪項目

Kotlin

Java

Kotlin

Java

NinePatch 可繪項目

自訂可繪項目

Kotlin

Java

Kotlin

Java

為可繪項目新增色調

從圖片擷取顯著色彩

可繪項目總覽
透過集合功能整理內容你可以依據偏好儲存及分類內容。