ImageBitmap và ImageVector

2 loại định dạng hình ảnh phổ biến nhất là đường quét và ảnh vectơ.

Định dạng đồ hoạ đường quét chứa các pixel: các hình vuông nhỏ riêng lẻ chứa màu sắc (gồm các giá trị đỏ, xanh lục, xanh dương và alpha). Khi đặt nhiều pixel cạnh nhau, bạn có thể tạo ra một hình ảnh rất chi tiết, chẳng hạn như ảnh chụp. Đồ hoạ đường quét có độ phân giải cố định (số lượng pixel cố định). Điều này có nghĩa là khi bạn tăng kích thước hình ảnh, hình ảnh sẽ mất chi tiết và quá trình tạo pixel có thể diễn ra. Ví dụ về định dạng đồ hoạ đường quét là JPEG, PNG và WEBP.

Hình 1: Ví dụ về tệp JPEG

Trong khi đó, ảnh vectơ là hình ảnh biểu diễn toán học có thể mở rộng của một thành phần hình ảnh trên màn hình. Vectơ là một tập hợp các lệnh mô tả cách vẽ hình ảnh trên màn hình, chẳng hạn như một đường kẻ, một điểm hoặc vùng tô màu. Khi mở rộng một vectơ trên màn hình, vectơ này sẽ không giảm chất lượng vì công thức toán học giúp duy trì mối quan hệ giữa các lệnh. Ví dụ điển hình về ImageVector là Material Symbols vì các biểu tượng này đều có thể được xác định bằng công thức toán học.

Hình 2: Ví dụ về vectơ (đuôi tệp là .xml hoặc được xác định trong mã Kotlin)

ImageBitmap

Trong Compose, hình ảnh đường quét (thường được gọi là Bitmap) có thể được tải vào thực thể ImageBitmap và BitmapPainter chịu trách nhiệm vẽ bitmap lên màn hình.

Đối với các trường hợp sử dụng đơn giản, bạn có thể sử dụng painterResource() chịu trách nhiệm tạo ImageBitmap và trả về đối tượng Painter (trong trường hợp này là BitmapPainter):

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

Nếu cần tuỳ chỉnh thêm (ví dụ: triển khai trình vẽ tuỳ chỉnh) và cần quyền truy cập vào chính ImageBitmap, bạn có thể tải mã này theo cách sau:

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

ImageVector

VectorPainter chịu trách nhiệm vẽ một ImageVector lên màn hình. ImageVector hỗ trợ một tập con lệnh SVG. Không phải tất cả hình ảnh đều có thể được biểu thị dưới dạng vectơ (ví dụ: ảnh bạn chụp bằng máy ảnh không chuyển đổi được thành vectơ).

Bạn có thể tạo một ImageVector tuỳ chỉnh bằng cách nhập tệp XML vectơ vẽ được hiện có (được nhập vào Android Studio bằng công cụ nhập) hoặc triển khai lớp và phát lệnh đường dẫn theo cách thủ công.

Đối với các trường hợp sử dụng đơn giản, cách tương tự trong đó painterResource() hoạt động với lớp ImageBitmap, cách này cũng hoạt động với ImageVectors, do đó, trả về VectorPainter. painterResource() xử lý việc tải VectorDrawables và BitmapDrawables vào VectorPainter và BitmapPainter tương ứng. Để tải VectorDrawable vào hình ảnh, hãy sử dụng:

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

Nếu cần tuỳ chỉnh thêm và cần quyền truy cập vào chính ImageVector, bạn có thể tải mã này theo cách sau:

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