載入並顯示圖片

如要在應用程式中顯示圖片,以便顯示內容和回應使用者動作,請從磁碟或網路上的外部來源載入圖片。您可以透過下列方式載入圖片:

  • 從磁碟
  • 透過使用 Coil 的網路
  • 透過使用 Glide 的網路

版本相容性

這個實作方式需要將專案 minSDK 設為 API 級別 21 以上。

從磁碟載入圖片

您可以從磁碟載入本機儲存的圖片,在應用程式中顯示圖片內容,並回應使用者操作。

依附元件

載入圖片

使用下列程式碼,從磁碟載入本機儲存的圖片,並在應用程式中顯示:

Image(
    painter = painterResource(id = R.drawable.dog),
    contentDescription = stringResource(id = R.string.dog_content_description)
)

程式碼的重點

  • 已定義的 Compose Image 物件,其 painter 屬性設為 painterResource(),可從應用程式資源載入圖片。
  • TalkBack 可讀取的 contentDescription,可讓您的應用程式更易於存取。
  • stringResource() 用於從 strings.xml 檔案載入翻譯內容說明。

透過網路載入圖片

您可以使用 Coil 或 Glide 載入儲存在網際網路外部的圖片。如要選擇專案要使用的程式庫,請考量專案需求和效能限制等因素。

使用 Coil 載入圖片

您可以使用第三方程式庫 Coil 從網際網路載入圖片。Coil 由 Kotlin 協同程式支援,負責從主執行緒載入圖片,並在載入後顯示圖片。請按照這份指南,使用 Coil 從網路載入圖片。

依附元件

載入圖片

請使用下列程式碼,透過 Coil 載入圖片:

AsyncImage(
    model = "https://example.com/image.jpg",
    contentDescription = "Translated description of what the image contains"
)

使用 Glide 載入圖片

您可以使用 Glide 載入儲存在網際網路外部位置的圖片,並在應用程式動態消息中顯示這些圖片。Glide 是快速又有效率的 Android 圖片載入程式庫,旨在提供流暢的捲動瀏覽體驗,並負責從主執行緒載入圖片,並在載入後顯示圖片。

依附元件

載入圖片

請使用下列程式碼,透過 Glide 載入圖片:

GlideImage(
    model = "https://example.com/image.jpg",
    contentDescription = "Translated description of what the image contains"
)

結果

狗的圖片
圖 1. 圖片已載入並顯示。

包含此指南的集合

本指南是精選的快速指南系列之一,涵蓋更廣泛的 Android 開發目標:

瞭解如何運用明亮吸睛的視覺元素,為 Android 應用程式打造美觀的視覺效果。

有問題或意見回饋嗎?

請前往常見問題頁面,瞭解快速指南或與我們聯絡,分享您的想法。