โหลดและแสดงรูปภาพ

หากต้องการแสดงรูปภาพในแอปสำหรับเนื้อหาและสำหรับการตอบสนองต่อการกระทำของผู้ใช้ ให้โหลดรูปภาพจากดิสก์หรือจากแหล่งที่มาภายนอกบนอินเทอร์เน็ต คุณ โหลดรูปภาพได้ด้วยวิธีต่อไปนี้

  • จากดิสก์
  • จากเครือข่ายที่ใช้ Coil
  • จากเครือข่ายที่ใช้ Glide

ผลลัพธ์

รูปภาพสุนัข
รูปที่ 1 โหลดและแสดงรูปภาพ

ความเข้ากันได้ของเวอร์ชัน

การติดตั้งใช้งานนี้กำหนดให้ตั้งค่า minSDK ของโปรเจ็กต์เป็นระดับ API 21 ขึ้นไป

โหลดรูปภาพจากดิสก์

คุณโหลดรูปภาพที่จัดเก็บไว้ในเครื่องจากดิสก์เพื่อแสดงในแอปสำหรับเนื้อหาและเพื่อตอบสนองต่อการดำเนินการของผู้ใช้ได้

ความสัมพันธ์

โหลดรูปภาพ

ใช้โค้ดต่อไปนี้เพื่อโหลดรูปภาพที่จัดเก็บไว้ในเครื่องจากดิสก์เพื่อแสดง ในแอป

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

ประเด็นสำคัญเกี่ยวกับโค้ด

  • ออบเจ็กต์ Image ของ Compose ที่กำหนดไว้ซึ่งมีแอตทริบิวต์ painter ที่ตั้งค่าเป็น painterResource() ซึ่งโหลดรูปภาพจากทรัพยากรของแอป
  • contentDescription ที่TalkBackอ่านได้เพื่อทำให้แอปเข้าถึงได้ง่ายขึ้น
  • 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"
)

คอลเล็กชันที่มีคู่มือนี้

คู่มือนี้เป็นส่วนหนึ่งของคอลเล็กชันคู่มือฉบับย่อที่คัดสรรมาแล้วซึ่งครอบคลุม เป้าหมายการพัฒนา Android ที่กว้างขึ้น

ดูเทคนิคการใช้ภาพที่สว่างและน่าสนใจเพื่อ ทำให้แอป Android ของคุณดูดีและน่าใช้
คอลเล็กชันคู่มือฉบับย่อ

มีคำถามหรือความคิดเห็น

ไปที่หน้าคำถามที่พบบ่อยเพื่อดูคำแนะนำแบบรวดเร็ว หรือติดต่อเราเพื่อบอกความคิดเห็นของคุณ
ไปที่คำถามที่พบบ่อย แสดงความคิดเห็น