รูปแบบรูปภาพที่ใช้กันมากที่สุด 2 ประเภทคือ รูปภาพแรสเตอร์และรูปภาพเวกเตอร์
รูปแบบกราฟิกแรสเตอร์ประกอบด้วยพิกเซล: สี่เหลี่ยมจัตุรัสขนาดจิ๋วที่มี color (ประกอบด้วยค่าสีแดง เขียว น้ำเงิน และอัลฟ่า) เมื่อวางจำนวนมาก พิกเซลทั้งหมดจะสามารถสร้างรูปภาพที่มีความละเอียดมากได้ เช่น ภาพถ่าย ต กราฟิกแรสเตอร์มีความละเอียดคงที่ (จำนวนพิกเซลคงที่) ซึ่งหมายความว่า เมื่อคุณเพิ่มขนาดรูปภาพ รายละเอียดจะสูญหายไป และภาพแตกอาจ เกิดขึ้น ตัวอย่างรูปแบบกราฟิกแรสเตอร์ ได้แก่ JPEG, PNG และ WEBP
![ตัวอย่างไฟล์ JPEG](https://developer.android.com/static/develop/ui/compose/images/graphics-sourceimage.jpg?authuser=5&hl=th)
ในทางกลับกัน ภาพเวกเตอร์สามารถใช้แทนค่าทางคณิตศาสตร์ที่รองรับการปรับขนาด องค์ประกอบภาพบนหน้าจอ เวกเตอร์คือชุดคำสั่งที่อธิบายวิธีวาด รูปภาพบนหน้าจอ ตัวอย่างเช่น เส้น จุด หรือสีเติม เมื่อปรับขนาดเวกเตอร์ อยู่บนหน้าจอ ก็จะไม่สูญเสียคุณภาพเนื่องจากสูตรคณิตศาสตร์จะคง ความสัมพันธ์ระหว่างคำสั่งต่างๆ ตัวอย่างที่ดีของ ImageVector คือสัญลักษณ์ของวัสดุ เนื่องจากทั้งหมดสามารถกำหนดด้วย สูตรคณิตศาสตร์อื่นๆ
![ตัวอย่างเวกเตอร์ (นามสกุลไฟล์คือ .xml หรือกำหนดไว้ในโค้ด Kotlin)](https://developer.android.com/static/develop/ui/compose/images/graphics-shopping.png?authuser=5&hl=th)
ImageBitmap
ใน Compose รูปภาพแรสเตอร์ (มักเรียกว่า Bitmap
) จะโหลดขึ้นได้
ลงในอินสแตนซ์ ImageBitmap
และ BitmapPainter
คือสิ่งที่รับผิดชอบในการ
ที่วาดบิตแมปไปยังหน้าจอ
สำหรับกรณีการใช้งานแบบง่าย คุณสามารถใช้ painterResource()
ซึ่งจะดูแล
การสร้าง ImageBitmap
และแสดงผลออบเจ็กต์ Painter
(ในกรณีนี้ - a
BitmapPainter
)
Image( painter = painterResource(id = R.drawable.dog), contentDescription = stringResource(id = R.string.dog_content_description) )
หากคุณต้องการปรับแต่งเพิ่มเติม (ตัวอย่างเช่น เครื่องมือทำสีที่กำหนดเอง
การใช้งาน) และต้องมีสิทธิ์เข้าถึงตัว ImageBitmap
เอง คุณสามารถโหลดได้
ในลักษณะดังต่อไปนี้
val imageBitmap = ImageBitmap.imageResource(R.drawable.dog)
ImageVector
VectorPainter
มีหน้าที่วาดImageVector
ไปยังหน้าจอ
ImageVector
รองรับชุดย่อยของคำสั่ง SVG มีบางรูปภาพเท่านั้นที่สามารถ
แสดงเป็นเวกเตอร์ (เช่น รูปภาพที่ถ่ายด้วยกล้องไม่สามารถ
จะเปลี่ยนเป็นเวกเตอร์)
คุณสร้าง ImageVector
ที่กำหนดเองได้ด้วยการนำเข้าเวกเตอร์ที่มีอยู่
ไฟล์ XML ที่ถอนออกได้ (นำเข้าไปยัง Android Studio โดยใช้เครื่องมือนำเข้า) หรือ
การนำคำสั่งคลาสและการออกเส้นทางด้วยตนเอง
สำหรับกรณีการใช้งานทั่วไป จะทำงานแบบเดียวกับที่ painterResource()
ทำงาน
ImageBitmap
ก็ใช้ได้กับ ImageVectors
โดยส่งคืน
ผลลัพธ์เป็น VectorPainter
painterResource()
จัดการการโหลด
VectorDrawables
และ BitmapDrawables
ใน VectorPainter
และ BitmapPainter
ตามลำดับ หากต้องการโหลด VectorDrawable
ลงในรูปภาพ ให้ใช้สิ่งต่อไปนี้
Image( painter = painterResource(id = R.drawable.baseline_shopping_cart_24), contentDescription = stringResource(id = R.string.shopping_cart_content_desc) )
หากต้องการการปรับแต่งเพิ่มเติมและต้องเข้าถึง ImageVector
คุณสามารถโหลดได้ด้วยวิธีต่อไปนี้
val imageVector = ImageVector.vectorResource(id = R.drawable.baseline_shopping_cart_24)
แนะนำสำหรับคุณ
- หมายเหตุ: ข้อความลิงก์จะแสดงเมื่อ JavaScript ปิดอยู่
- ช่างทาสีที่กำหนดเอง {:#custom-painter}
- แหล่งข้อมูลใน Compose
- กำลังโหลดรูปภาพ {:#loading-images}