ImageBitmap กับ ImageVector

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

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

รูปที่ 1: ตัวอย่างไฟล์ JPEG

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

รูปที่ 2: ตัวอย่างเวกเตอร์ (นามสกุลไฟล์คือ .xml หรือกำหนดไว้ในโค้ด Kotlin)

ImageBitmap

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

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

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

หากต้องการการปรับแต่งเพิ่มเติม (เช่น การติดตั้งใช้งานโปรแกรมวาดภาพที่กำหนดเอง) และต้องการเข้าถึง ImageBitmap โดยตรง ให้โหลด ImageBitmap ดังนี้

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

ImageVector

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

คุณสามารถสร้าง ImageVector ที่กำหนดเองได้โดยการนำเข้าไฟล์ XML ของรูปภาพที่วาดด้วยเวกเตอร์ที่มีอยู่ (นำเข้าไปยัง Android Studio โดยใช้เครื่องมือนำเข้า) หรือใช้คลาสและออกคำสั่งเส้นทางด้วยตนเอง

สำหรับ Use Case ง่ายๆ 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 โดยตรง ให้โหลด ImageVector ดังนี้

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