Composable Image
Gambar resource drawable di layar.
Composable Image adalah pelajaran Jetpack Compose Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Jetpack Compose Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Jetpack Compose Academy mencakup 4 pelajaran total.
Gambar dengan Cara Compose
Setiap aplikasi menampilkan gambar, dan di Compose Anda menggambarnya dengan komponen Gambar. Komponen ini merupakan pengganti deklaratif untuk ImageView lama. 🖼️
Anda Membutuhkan Pelukis
Gambar tidak menerima id sumber daya mentah. Gambar menerima pelukis, yaitu objek kecil yang mengetahui cara menggambar gambar Anda ke layar.
painterResource Memuat Drawable
Untuk mengubah drawable di res menjadi pelukis, panggil painterResource dengan id sumber dayanya. Ini membaca aset PNG atau vektor Anda.
val logo = painterResource(id = R.drawable.logo)Gambar Pertama Anda
Teruskan pelukis tersebut ke Gambar dan gambar akan muncul di layar. Satu baris ini menggambar drawable di mana pun komponen tersebut berada.
Image(painter = painterResource(R.drawable.logo), contentDescription = null)contentDescription Wajib Diisi
Gambar selalu meminta contentDescription. Pembaca layar akan mengucapkannya, jadi jelaskan gambar tersebut dengan beberapa kata yang jelas.
Image(painter = logo, contentDescription = "Company logo")Dekoratif? Teruskan null
Jika gambar hanya bersifat dekoratif dan tidak menambahkan makna, tetapkan contentDescription ke null agar TalkBack melewatinya, bukan membacakan suara yang tidak diperlukan.
Vektor Dapat Diskalakan dengan Baik
Compose menyukai drawable vektor. Vektor tetap sangat tajam pada ukuran apa pun karena berupa perhitungan matematis, bukan piksel tetap, sehingga tidak pernah tampak buram.
Atur Ukurannya dengan Modifier
Gambar secara bawaan ditampilkan pada ukuran bitmap. Tambahkan Modifier.size agar dimensinya tepat sesuai kebutuhan tata letak Anda.
Image(painter = logo, contentDescription = null, modifier = Modifier.size(96.dp))Bitmap dari Jaringan
painterResource hanya menangani aset lokal. Untuk URL jarak jauh, gunakan pustaka pemuat gambar; yang paling populer adalah Coil dengan rememberAsyncImagePainter.
Mewarnai Gambar
Anda dapat mengubah warna gambar sederhana dengan colorFilter. Ini sangat berguna untuk ikon monokrom yang ingin disesuaikan dengan warna tema.
Image(painter = logo, contentDescription = null,
colorFilter = ColorFilter.tint(Color.Blue))Gambar dan Ikon
Gunakan Gambar untuk foto dan karya seni yang kaya detail. Untuk simbol kecil yang diberi warna tema, komponen Ikon yang lebih ringan biasanya merupakan pilihan yang lebih baik.
Pemeriksaan Singkat
Argumen apa yang selalu diperlukan komponen Gambar selain pelukis?
Rangkuman: Menggambar Gambar
Anda telah mempelajari bahwa Gambar menggambar pelukis dari painterResource, selalu memerlukan contentDescription, dan ukurannya diatur dengan modifier. Berikutnya: ikon Material! ✨
Belajar Kotlin dengan tutor AI — gratis
Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.
- Kursus
- 30
- Pelajaran
- 120
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Composable Image” gratis?
Ya — teks lengkap “Composable Image” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Jetpack Compose Academy, upgrade ke CoddyKit PRO. Kursus Jetpack Compose Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Composable Image”?
Gambar resource drawable di layar. Kamu berlatih Jetpack Compose Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai Jetpack Compose Academy?
Tidak diperlukan pengalaman sebelumnya. Jetpack Compose Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 4.
Berapa lama pelajaran “Composable Image” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran Jetpack Compose Academy ini?
Ya. Setiap pelajaran Jetpack Compose Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.