หากต้องการแสดงรูปภาพในแอปสำหรับเนื้อหาและการตอบสนองต่อการดําเนินการของผู้ใช้ ให้โหลดรูปภาพจากดิสก์หรือจากแหล่งที่มาภายนอกบนอินเทอร์เน็ต คุณโหลดรูปภาพได้ดังนี้
- จากดิสก์
- จากเครือข่ายที่ใช้ 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" )
ผลลัพธ์

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