ImageBitmap กับ ImageVector

รูปแบบรูปภาพที่พบบ่อยที่สุด 2 ประเภทคือรูปภาพแรสเตอร์และเวกเตอร์

รูปแบบกราฟิกแรสเตอร์ประกอบด้วยพิกเซล ซึ่งเป็นสี่เหลี่ยมจัตุรัสเล็กๆ ที่มีสี (ประกอบด้วยค่าสีแดง เขียว น้ำเงิน และอัลฟ่า) เมื่อวางพิกเซลจำนวนมาก ไว้ด้วยกัน จะเกิดเป็นรูปภาพที่มีรายละเอียดมาก เช่น ภาพถ่าย กราฟิกแรสเตอร์มีความละเอียดคงที่ (จำนวนพิกเซลคงที่) ซึ่งหมายความว่า เมื่อคุณเพิ่มขนาดรูปภาพ รายละเอียดจะหายไปและอาจเกิด การแตกเป็นพิกเซล ตัวอย่างรูปแบบกราฟิกแรสเตอร์ ได้แก่ JPEG, PNG และ WEBP

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

ImageBitmap

ใน Compose คุณสามารถโหลดรูปภาพแรสเตอร์ (มักเรียกว่า Bitmap) ลงในอินสแตนซ์ ImageBitmap และ BitmapPainter จะเป็นตัวที่รับผิดชอบในการวาดบิตแมปลงบนหน้าจอ

สำหรับกรณีการใช้งานที่เรียบง่าย คุณสามารถใช้ painterResource() ซึ่งจะดูแลการสร้าง ImageBitmap และส่งคืนออบเจ็กต์ Painter (ในกรณีนี้คือ BitmapPainter)

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

หากต้องการการปรับแต่งเพิ่มเติม (เช่น การติดตั้งใช้งาน CustomPainter) และต้องการเข้าถึง ImageBitmap เอง คุณสามารถโหลดได้ ด้วยวิธีต่อไปนี้

val imageBitmap = ImageBitmap.imageResource(R.drawable.dog)
VectorVsBitmapSnippets.kt

ImageVector

VectorPainter มีหน้าที่วาด ImageVector บนหน้าจอ ImageVector รองรับชุดคำสั่ง SVG บางส่วน รูปภาพบางรูปไม่สามารถ แสดงเป็นเวกเตอร์ได้ (เช่น รูปภาพที่คุณถ่ายด้วยกล้องไม่สามารถ แปลงเป็นเวกเตอร์ได้)

คุณสร้าง ImageVector ที่กำหนดเองได้โดยการนำเข้าไฟล์ XML ของ VectorDrawable ที่มีอยู่ (นำเข้าไปยัง 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)
)
VectorVsBitmapSnippets.kt

หากต้องการปรับแต่งเพิ่มเติมและต้องเข้าถึง ImageVector เอง คุณสามารถโหลดได้โดยทำดังนี้

val imageVector = ImageVector.vectorResource(id = R.drawable.baseline_shopping_cart_24)
VectorVsBitmapSnippets.kt