ImageBitmap vs ImageVector

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.

Gambar 1: Contoh file JPEG

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.

Gambar 2: Contoh vektor (ekstensi file adalah .xml atau ditentukan dalam kode Kotlin)

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)
)
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 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)
)
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