ImageBitmap กับ ImageVector

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

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

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

ImageBitmap

ใน Compose รูปภาพแรสเตอร์ (มักเรียกว่า 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 โดยใช้เครื่องมือนำเข้า) หรือ การนำคำสั่งคลาสและการออกเส้นทางด้วยตนเอง

สำหรับกรณีการใช้งานทั่วไป จะทำงานแบบเดียวกับที่ 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