PricingLoginStart free
Jetpack Compose Academy · Pelajaran

Bagian Avatar, Nama & Bio

Susun header dengan gambar dan teks.

Pelajaran 2 dari 413 langkah

Bagian Avatar, Nama & Bio 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.

Buat Header Terlebih Dahulu

Saatnya mewujudkan sketsa. Anda akan mulai dari bagian atas kartu dengan header: avatar, nama, dan bio singkat. 👤

Gambar Avatar

Avatar adalah Composable Gambar yang menggambar sumber daya drawable. Berikan ukuran yang jelas agar gambar tidak membesar hingga memenuhi layar.

Image(
    painter = painterResource(R.drawable.avatar),
    contentDescription = "Profile photo"
)

Jadikan Lingkaran

Foto profil paling bagus ditampilkan sebagai lingkaran. Rangkai clip dengan CircleShape pada pengubah Gambar untuk membulatkannya menjadi avatar sempurna.

Image(
    painter = painterResource(R.drawable.avatar),
    contentDescription = "Profile photo",
    modifier = Modifier.size(96.dp).clip(CircleShape)
)

Tambahkan Nama

Nama tampilan berada di bawah avatar. Composable Teks sederhana menampilkan teks yang pertama kali dibaca pengguna.

Text(text = "Ada Lovelace")

Tata Gaya Nama

Nama harus terlihat menonjol. Teruskan gaya dari tipografi MaterialTheme agar nama tersebut terlihat seperti judul yang sesuai.

Text(
    text = "Ada Lovelace",
    style = MaterialTheme.typography.titleLarge
)

Teks Bio

Di bawah nama, tambahkan bio satu baris dengan Teks lainnya. Gunakan gaya yang lebih kecil dan lembut agar tampil sebagai subjudul, bukan judul utama.

Text(
    text = "Building delightful apps.",
    style = MaterialTheme.typography.bodyMedium
)

Susun dalam Kolom

Avatar, nama, dan bio tersusun secara vertikal, jadi bungkus ketiganya dalam Kolom. Urutan penulisan menentukan urutan tampilnya.

Column {
    Image(/* avatar */)
    Text("Ada Lovelace")
    Text("Building delightful apps.")
}

Pusatkan Semuanya

Header terasa seimbang jika dipusatkan. Atur horizontalAlignment ke CenterHorizontally pada Kolom untuk menyejajarkan avatar dan teks.

Column(
    horizontalAlignment = Alignment.CenterHorizontally
) { /* ... */ }

Tambahkan Jarak Vertikal

Header yang sesak terlihat berantakan. Gunakan Arrangement.spacedBy pada Kolom untuk memberikan jarak yang konsisten antara avatar, nama, dan bio.

Column(
    verticalArrangement = Arrangement.spacedBy(8.dp)
) { /* ... */ }

Beri Padding pada Header

Berikan ruang bernapas pada seluruh bagian dengan menambahkan padding ke pengubah Kolom. Tepi konten tidak boleh menyentuh bingkai layar.

Column(
    modifier = Modifier.padding(16.dp)
) { /* ... */ }

Bagian Header Selesai

Sekarang Anda memiliki header yang rapi: avatar lingkaran, nama tebal, dan bio lembut, semuanya dipusatkan dan diberi jarak. Bagian atas kartu Anda sudah selesai. 🎉

Pemeriksaan Singkat

Bagaimana cara mengubah foto persegi menjadi avatar bulat?

Jawab di pelajaran interaktif

Rangkuman: Header

Anda membuat header di dalam Kolom yang dipusatkan: avatar lingkaran yang dipotong, nama dengan gaya, dan bio yang lembut, semuanya diberi padding dan jarak. Berikutnya, Anda akan menambahkan baris statistik.

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 gratisLihat kursus lengkapnya

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Bagian Avatar, Nama & Bio” gratis?

Ya — teks lengkap “Bagian Avatar, Nama & Bio” 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 “Bagian Avatar, Nama & Bio”?

Susun header dengan gambar dan teks. 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 “Bagian Avatar, Nama & Bio” 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

  1. Membuat Sketsa Layout Kartu Profil
  2. Bagian Avatar, Nama & Bio
  3. Baris Statistik & Button Ikuti
  4. Mengekstrak Composable yang Dapat Digunakan Kembali
← Kembali ke Jetpack Compose Academy