Jetpack Compose Academy · Pelajaran

Memotong & Membentuk Gambar

Buat sudut membulat dan avatar berbentuk lingkaran.

Pelajaran 4 dari 413 langkah

Memotong & Membentuk Gambar adalah pelajaran Jetpack Compose Academy gratis di CoddyKit. Ini adalah pelajaran 4 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.

Melampaui Persegi Panjang

Secara bawaan, gambar digambar sebagai persegi panjang biasa. Untuk mendapatkan sudut membulat atau avatar lingkaran, Anda dapat clip gambar ke suatu bentuk.

Modifier.clip Memotong Bentuk

Fungsi Modifier.clip membatasi komponen ke bentuk tertentu. Apa pun yang berada di luar bentuk tersebut tidak akan digambar.

Image(painter = p, contentDescription = null,
    modifier = Modifier.clip(CircleShape))

CircleShape untuk Avatar

Untuk avatar berbentuk lingkaran sempurna, gunakan clip dengan CircleShape. Padukan dengan ukuran persegi dan Crop untuk mendapatkan foto profil bulat yang rapi.

Modifier.size(64.dp).clip(CircleShape)

Sudut Membulat

Kartu yang lembut dan modern menggunakan RoundedCornerShape. Berikan radius sudut dalam dp untuk membulatkan keempat sudut secara merata.

Modifier.clip(RoundedCornerShape(16.dp))

Membulatkan Sudut Tertentu

Anda dapat membulatkan sudut secara terpisah, misalnya hanya sudut atas, dengan meneruskan nilai terpisah untuk setiap sudut RoundedCornerShape.

RoundedCornerShape(topStart = 16.dp, topEnd = 16.dp)

Urutan Penting: Clip Terlebih Dahulu

Modifier diterapkan secara berurutan. Letakkan clip sebelum latar belakang atau border agar bentuk tersebut juga membatasi keduanya, bukan hanya konten gambar.

Tambahkan Border di Atasnya

Gambar yang telah di-clip terlihat menarik dengan garis tepi yang serasi. Rangkai border dengan bentuk yang sama tepat setelah clip.

Modifier.clip(CircleShape).border(2.dp, Color.White, CircleShape)

Gabungkan Clip dan Crop

Rumus avatar terdiri dari dua modifier dan satu skala: size, lalu clip ke CircleShape, dengan ContentScale.Crop agar foto memenuhi lingkaran.

Image(painter = p, contentDescription = null,
    contentScale = ContentScale.Crop,
    modifier = Modifier.size(64.dp).clip(CircleShape))

Bentuk Khusus

Memerlukan segi enam atau bintang? Anda dapat meneruskan Shape apa pun, termasuk bentuk yang Anda definisikan sendiri dengan jalur, untuk membuat garis luar khusus.

clipToBounds untuk Anak

Untuk mencegah konten anak digambar di luar wadah, gunakan Modifier.clipToBounds, yang membatasi gambar ke persegi panjang elemen.

Bayangan dan Clipping

Bayangan juga memerlukan bentuk. Terapkan Modifier.shadow dengan bentuk yang sama sebelum clip agar elevasi mengikuti tepi yang membulat.

Modifier.shadow(4.dp, CircleShape).clip(CircleShape)

Pemeriksaan Singkat

Bentuk apa yang digunakan untuk melakukan clip pada gambar agar menjadi avatar lingkaran sempurna?

Jawab di pelajaran interaktif

Rangkuman: Membentuk Gambar

Sekarang Anda dapat melakukan clip pada gambar ke CircleShape atau RoundedCornerShape, mengurutkan modifier dengan benar, serta menambahkan border dan bayangan. Kursus selesai! 🎉

Gratis untuk memulai

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

Mulai belajar gratis Lihat kursus lengkapnya

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Memotong & Membentuk Gambar” gratis?

Ya — teks lengkap “Memotong & Membentuk Gambar” 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 “Memotong & Membentuk Gambar”?

Buat sudut membulat dan avatar berbentuk lingkaran. 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 4 dari 4.

Berapa lama pelajaran “Memotong & Membentuk Gambar” 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

← Kembali ke Jetpack Compose Academy