Bitmap gambar versus vektor gambar

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.

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 mempertahankan hubungan antara berbagai perintah. Contoh ImageVector yang bagus adalah Simbol Material, karena semuanya dapat ditentukan dengan formula matematika.

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 dasar, painterResource() dapat digunakan untuk membuat ImageBitmap dan menampilkan objek Painter (dalam hal ini - BitmapPainter):

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

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)
VectorVsBitmapSnippets.kt

ImageVector

VectorPainter bertanggung jawab menggambar ImageVector ke layar. ImageVector mendukung subset perintah Scalable Vector Graphics (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 dasar, painterResource() berfungsi untuk ImageVectors dengan cara yang sama seperti yang dilakukannya untuk class ImageBitmap, 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)
)
VectorVsBitmapSnippets.kt

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)
VectorVsBitmapSnippets.kt