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.
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.
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) )
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)
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) )
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)
Đề xuất cho bạn
- Lưu ý: văn bản có đường liên kết sẽ hiện khi JavaScript tắt
- Painter tuỳ chỉnh {:#custom-painter}
- Tài nguyên trong Compose
- Hình ảnh xuất hiện khi đang tải {:#loading-images}