Dua jenis format gambar yang paling umum adalah gambar raster dan vektor.
Format grafik raster berisi piksel: setiap kotak kecil yang berisi warna (terdiri dari nilai merah, hijau, biru, dan alfa). Saat menggabungkan banyak piksel, dapat terbentuk sebuah gambar yang sangat mendetail, seperti foto. Grafik raster memiliki resolusi tetap (jumlah piksel tetap). Artinya, saat Anda memperbesar ukuran gambar, detail gambar akan hilang dan pikselasi dapat terjadi. Contoh format grafik raster adalah JPEG, PNG, dan WEBP.
![Contoh file JPEG](https://developer.android.com/static/develop/ui/compose/images/graphics-sourceimage.jpg?authuser=6&hl=id)
Di sisi lain, gambar vektor adalah representasi matematika skalabel dari elemen visual di layar. Vektor adalah serangkaian perintah yang menjelaskan cara menggambar gambar di layar, misalnya, garis, titik, atau isian. Saat menskalakan vektor di layar, kualitasnya tidak akan hilang karena formula matematika akan mempertahankan hubungan antara berbagai perintah. Contoh bagus ImageVector adalah Simbol Material, karena semuanya dapat ditentukan dengan formula matematika.
![Contoh vektor (ekstensi file adalah .xml atau ditentukan dalam kode Kotlin)](https://developer.android.com/static/develop/ui/compose/images/graphics-shopping.png?authuser=6&hl=id)
ImageBitmap
Di Compose, gambar raster (sering disebut Bitmap
) dapat dimuat
ke dalam instance ImageBitmap
, dan BitmapPainter
bertanggung jawab untuk
menggambar bitmap ke layar.
Untuk kasus penggunaan sederhana, painterResource()
dapat digunakan yang akan menangani
pembuatan ImageBitmap
dan menampilkan objek Painter
(dalam hal ini adalah
BitmapPainter
):
Image( painter = painterResource(id = R.drawable.dog), contentDescription = stringResource(id = R.string.dog_content_description) )
Jika Anda memerlukan penyesuaian lebih lanjut (misalnya penerapan painter
kustom) dan memerlukan akses ke ImageBitmap
, Anda dapat memuatnya
dengan cara berikut:
val imageBitmap = ImageBitmap.imageResource(R.drawable.dog)
ImageVector
VectorPainter
bertanggung jawab menggambar ImageVector
ke layar.
ImageVector
mendukung subset perintah SVG. Tidak semua gambar dapat direpresentasikan
sebagai vektor (misalnya, foto yang Anda ambil dengan kamera tidak dapat
diubah menjadi vektor).
Anda dapat membuat ImageVector
kustom dengan mengimpor file XML
vektor drawable yang ada (diimpor ke Android Studio menggunakan alat impor) atau
mengimplementasikan class dan mengeluarkan perintah jalur secara manual.
Untuk kasus penggunaan sederhana, cara yang sama, yaitu saat painterResource()
menangani
class ImageBitmap
, juga berfungsi untuk ImageVectors
yang menampilkan
VectorPainter
sebagai hasilnya. painterResource()
menangani pemuatan
VectorDrawables
dan BitmapDrawables
masing-masing ke VectorPainter
dan BitmapPainter
. Untuk memuat VectorDrawable
ke dalam gambar, gunakan:
Image( painter = painterResource(id = R.drawable.baseline_shopping_cart_24), contentDescription = stringResource(id = R.string.shopping_cart_content_desc) )
Jika memerlukan penyesuaian lebih lanjut dan perlu mengakses ImageVector
, Anda dapat memuatnya dengan cara berikut:
val imageVector = ImageVector.vectorResource(id = R.drawable.baseline_shopping_cart_24)
Direkomendasikan untuk Anda
- Catatan: teks link ditampilkan saat JavaScript nonaktif
- Pelukis kustom {:#custom-Painter}
- Resource di Compose
- Memuat gambar {:#loading-images}