Android Academy · Pelajaran

Teks, Imej dan Butang

Gunakan composable terbina dalam yang asas.

Pelajaran 3 daripada 413 langkah

Teks, Imej dan Butang ialah pelajaran Android Academy percuma di CoddyKit. Ini ialah pelajaran 3 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Android Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Android Academy merangkumi sejumlah 4 pelajaran.

Composable Terbina Dalam

Compose disertakan dengan composable sedia digunakan untuk UI biasa. Tiga composable yang akan anda gunakan dengan kerap ialah Text, Image dan Button.

Composable Text

Text memaparkan rentetan. Parameter terpentingnya ialah text.

@Composable
fun Title() {
    Text(text = "My App")
}

Menggayakan Teks

Text menerima banyak parameter penggayaan seperti fontSize, color dan fontWeight.

Text(
    text = "Big Bold",
    fontSize = 24.sp,
    color = Color.Blue,
    fontWeight = FontWeight.Bold
)

sp berbanding dp

Saiz fon menggunakan .sp (piksel bebas skala) supaya mematuhi tetapan kebolehcapaian saiz fon pengguna. Saiz reka letak menggunakan .dp (piksel bebas ketumpatan).

Gunakan sp untuk teks, dp untuk perkara lain.

Composable Image

Image memaparkan gambar. Gunakan painterResource untuk memuatkan sumber boleh lukis, dan sentiasa sediakan contentDescription untuk kebolehcapaian.

Image(
    painter = painterResource(id = R.drawable.logo),
    contentDescription = "App logo"
)

contentDescription

contentDescription dibaca dengan kuat oleh pembaca skrin. Untuk imej hiasan yang tiada makna, hantarkan null. Untuk imej yang bermakna, berikan huraian ringkas.

Composable Button

Button ialah elemen yang boleh diklik. Parameter utamanya ialah onClick, iaitu lambda yang dijalankan apabila ditekan. Label butang diletakkan dalam lambda kandungannya — biasanya Text.

Button(onClick = { /* do something */ }) {
    Text(text = "Tap me")
}

Memberi Respons kepada Klik

Lambda onClick ialah tempat anda meletakkan logik — mengemas kini keadaan, menavigasi atau memanggil fungsi.

Button(onClick = { println("Clicked!") }) {
    Text(text = "Log")
}

Lambda Kandungan

Perhatikan bahawa Button menerima lambda kandungan di hujung. Apa-apa yang anda letakkan di dalamnya akan dipaparkan sebagai kandungan butang, jadi butang boleh mengandungi ikon bersama teks, bukan sekadar label.

Button(onClick = { }) {
    Text(text = "Save")
}

Menggabungkannya

UI sebenar menggabungkan composable ini. Di sini, tajuk, imej dan butang disusun dalam Column.

@Composable
fun Card() {
    Column {
        Text(text = "Profile")
        Image(
            painter = painterResource(id = R.drawable.avatar),
            contentDescription = "Avatar"
        )
        Button(onClick = { }) { Text("Follow") }
    }
}

Banyak Lagi yang Tersedia

Selain tiga ini, Compose menawarkan TextField, Icon, Checkbox, Switch dan banyak lagi. Corak yang sama digunakan: hantarkan parameter dan lambda kandungan.

Semakan Pantas

Parameter Button yang manakah menjalankan kod anda apabila pengguna mengetiknya?

Jawab dalam pelajaran interaktif

Imbas Kembali

Anda telah mempelajari tiga komposabel teras:

Text — memaparkan rentetan; gayakannya dengan fontSize, color (gunakan sp).
Image — painterResource + contentDescription.
Button — lambda onClick serta lambda kandungan.

Percuma untuk bermula

Pelajari Kotlin dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 36
Pelajaran: 152

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Teks, Imej dan Butang” percuma?

Ya — sebanyak 3 pelajaran dalam laluan pembelajaran Android Academy, termasuk “Teks, Imej dan Butang”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus Android Academy merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Teks, Imej dan Butang”?

Gunakan composable terbina dalam yang asas. Anda berlatih Android Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan Android Academy?

Tiada pengalaman terdahulu diperlukan. Pembelajaran Android Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 3 daripada 4.

Berapa lamakah pelajaran “Teks, Imej dan Butang” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran Android Academy ini?

Ya. Setiap pelajaran Android Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

← Kembali ke Android Academy