Ikon Material dengan Icon
Gunakan kumpulan ikon bawaan di mana saja.
Ikon Material dengan Icon adalah pelajaran Jetpack Compose Academy gratis di CoddyKit. Ini adalah pelajaran 2 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.
Mengenal Komponen Ikon
Untuk simbol kecil seperti hati atau panah kembali, Compose menyediakan Ikon. Komponen ini lebih ringan daripada Gambar dan otomatis menyesuaikan warnanya dengan tema Anda.
Pustaka Ikon
Anda mendapatkan ratusan simbol siap pakai dari Ikon, yaitu kumpulan ikon Material. Tidak perlu menggambar atau mengekspor; cukup merujuk salah satunya berdasarkan nama.
Icon(imageVector = Icons.Default.Favorite, contentDescription = "Like")imageVector Adalah Simbolnya
Ikon menerima imageVector, yaitu grafik vektor dari kumpulan Material. Karena berupa vektor, tampilannya tetap tajam pada ukuran apa pun.
Lima Gaya Visual
Setiap simbol tersedia dalam beberapa gaya: Default, Bergaris, Membulat, Tajam, dan TwoTone. Pilih gaya yang sesuai dengan karakter aplikasi Anda.
Icon(Icons.Outlined.Settings, contentDescription = "Settings")Paket Ikon Tambahan
Kumpulan dasar dibuat kecil agar aplikasi tetap ringan. Tambahkan dependensi material-icons-extended untuk membuka akses ke ribuan simbol lainnya.
Ikon Otomatis Mengikuti Warna
Secara bawaan, Ikon digambar menggunakan warna konten saat ini dari tema Anda, sehingga selalu terlihat konsisten tanpa perlu menetapkan warna.
Ganti Warna
Ingin menggunakan warna khusus? Teruskan argumen tint dan simbol akan digambar ulang tepat dengan warna tersebut.
Icon(Icons.Default.Star, contentDescription = null, tint = Color.Yellow)Mengatur Ukuran Ikon
Ikon ditampilkan pada ukuran 24dp secara bawaan, sesuai standar Material. Ubah ukurannya dengan Modifier.size, sama seperti komponen lainnya.
Icon(Icons.Default.Home, contentDescription = null, modifier = Modifier.size(32.dp))Jelaskan Ikon Juga
Seperti Gambar, Ikon memerlukan contentDescription. Jelaskan tindakannya, misalnya "Tambahkan ke favorit", atau teruskan null jika label di dekatnya sudah menjelaskannya.
Ikon di dalam Tombol
Ikon sangat cocok digunakan di dalam komponen lain. Menempatkan Ikon ke dalam IconButton memberi Anda tindakan yang dapat diketuk dan ukurannya sudah sesuai.
IconButton(onClick = {}) { Icon(Icons.Default.Delete, "Delete") }Ikon dari Drawable
Anda juga dapat membuat Ikon dari aset sendiri menggunakan painterResource, bukan imageVector, dengan tetap mempertahankan pewarnaan otomatis.
Pemeriksaan Singkat
Apa warna bawaan yang digunakan Ikon jika Anda tidak menetapkan tint?
Rangkuman: Ikon Material
Sekarang Anda dapat menggunakan Ikon untuk simbol vektor yang tajam, memilih gaya, mengganti tint, dan mengatur ukuran dengan modifier. Berikutnya: menskalakan gambar! 🎯
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 “Ikon Material dengan Icon” gratis?
Ya — teks lengkap “Ikon Material dengan Icon” 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 “Ikon Material dengan Icon”?
Gunakan kumpulan ikon bawaan di mana saja. 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 2 dari 4.
Berapa lama pelajaran “Ikon Material dengan Icon” 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.
Semua pelajaran dalam kursus ini
- Composable Image
- Ikon Material dengan Icon
- ContentScale & Pemotongan
- Memotong & Membentuk Gambar