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

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

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

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

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

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

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

ทรัพยากร Dependency

โหลดรูปภาพ

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

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

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

  • ออบเจ็กต์ Compose Image ที่กําหนดไว้ซึ่งมีการตั้งค่าแอตทริบิวต์ painter เป็น painterResource() ที่โหลดรูปภาพจากทรัพยากรแอป
  • contentDescription ที่ TalkBack อ่านได้เพื่อทำให้แอปของคุณเข้าถึงได้ง่ายขึ้น
  • stringResource() เพื่อโหลดคำอธิบายเนื้อหาที่แปลแล้วจากไฟล์ strings.xml

โหลดรูปภาพผ่านเครือข่าย

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

โหลดรูปภาพโดยใช้ Coil

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

ทรัพยากร Dependency

โหลดรูปภาพ

ใช้โค้ดต่อไปนี้เพื่อโหลดรูปภาพโดยใช้ Coil

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

โหลดรูปภาพโดยใช้ Glide

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

ทรัพยากร Dependency

โหลดรูปภาพ

ใช้โค้ดต่อไปนี้เพื่อโหลดรูปภาพโดยใช้ Glide

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

ผลลัพธ์

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

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

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

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

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

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