Jetpack Compose ile arayüz

LEGO'dan bir ev yaparken her tuğlanın bir yeri vardır: birkaç tuğla bir duvar, duvarlar bir oda, odalar da bir ev olur. Jetpack Compose'da ekran da böyle kurulur: küçük composable fonksiyonlardan (bir metin, bir düğme, bir görsel) daha büyük parçalar, onlardan da bütün bir ekran oluşur. Bu derste Educora uygulaması için bir ders kartı ve bir ders listesi kuracaksın.

Composable fonksiyonlar ve bildirimsel yaklaşım

Eski Android yönteminde ekran bir XML dosyasında tanımlanır, Kotlin kodu da öğeleri findViewById ile bulup elle değiştirirdi. Compose'da ise yalnızca verilen veriye göre ekranın nasıl görünmesi gerektiğini yazarsın; veri değişince Compose fonksiyonu yeniden çağırır. Karşılaştır:

// activity_main.xml contains a TextView and a Button
class MainActivity : AppCompatActivity() {
    private var count = 0

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        val label = findViewById<TextView>(R.id.label)
        val button = findViewById<Button>(R.id.button)
        button.setOnClickListener {
            count++
            label.text = "Taps: $count"
        }
    }
}

@Composable
fun TapCounter() {
    var count by remember { mutableIntStateOf(0) }
    Column {
        Text("Taps: $count")
        Button(onClick = { count++ }) {
            Text("Tap")
        }
    }
}

• Bir composable fonksiyon @Composable ile işaretlenir ve adı büyük harfle başlar: LessonCard.
• Arayüz çizen bir composable hiçbir şey döndürmez (Unit); arayüzü tanımlar.
• Veri parametrelerle gelir; son parametre genellikle modifier: Modifier = Modifier olur ki çağıran taraf görünümü ayarlayabilsin.

Modifier: boyut, boşluk, arka plan, tıklama

Modifier, bir öğenin nasıl yerleşeceğini ve nasıl davranacağını belirleyen bir zincirdir: padding, size, fillMaxWidth, background, clip, clickable vb. Zincir yukarıdan aşağıya, dıştan içe doğru uygulanır; bu yüzden sıra önemlidir:

Text(
    text = "Kotlin",
    modifier = Modifier
        .padding(8.dp)
        .background(Color.Yellow)
        .padding(16.dp)
        .clickable { /* open the lesson */ }
)

Yerleşimler: Row, Column, Box, LazyColumn

Şimdi bunları birleştirelim. LessonCard solda yuvarlak bir rozet, sağda ise başlık ve süre gösterir. Rozet bir Box'tır, metinler bir Column'dadır, ikisi de bir Row'un içindedir. Modifier.weight(1f), satırda kalan tüm boş alanı sütuna verir.

@Composable
fun LessonCard(title: String, minutes: Int, modifier: Modifier = Modifier) {
    Card(modifier = modifier.fillMaxWidth()) {
        Row(
            modifier = Modifier.padding(16.dp),
            verticalAlignment = Alignment.CenterVertically
        ) {
            Box(
                modifier = Modifier
                    .size(48.dp)
                    .clip(CircleShape)
                    .background(MaterialTheme.colorScheme.primaryContainer),
                contentAlignment = Alignment.Center
            ) {
                Text(title.first().toString())
            }
            Spacer(Modifier.width(16.dp))
            Column(modifier = Modifier.weight(1f)) {
                Text(title, style = MaterialTheme.typography.titleMedium)
                Text("$minutes min", style = MaterialTheme.typography.bodySmall)
            }
        }
    }
}

@Composable
fun LessonList(lessons: List<String>, modifier: Modifier = Modifier) {
    LazyColumn(
        modifier = modifier,
        contentPadding = PaddingValues(16.dp),
        verticalArrangement = Arrangement.spacedBy(8.dp)
    ) {
        items(lessons) { title ->
            LessonCard(title = title, minutes = 15)
        }
    }
}

Material 3 bileşenleri ve tema

Material 3, Google'ın tasarım sistemidir ve Compose'da hazır bileşenler olarak gelir: Button, OutlinedButton, TextButton, Card, OutlinedTextField, Switch, Checkbox, Scaffold ve daha fazlası. Renkleri ve yazı tiplerini elle yazmak yerine MaterialTheme.colorScheme ve MaterialTheme.typography'den al; böylece koyu tema ve Android 12'den itibaren duvar kâğıdına uyan dinamik renkler kendiliğinden çalışır.

@Composable
fun ProfileForm(modifier: Modifier = Modifier) {
    var name by remember { mutableStateOf("") }
    var reminders by remember { mutableStateOf(true) }

    Column(
        modifier = modifier.padding(16.dp),
        verticalArrangement = Arrangement.spacedBy(12.dp)
    ) {
        OutlinedTextField(
            value = name,
            onValueChange = { name = it },
            label = { Text("Name") }
        )
        Row(verticalAlignment = Alignment.CenterVertically) {
            Text("Daily reminders", modifier = Modifier.weight(1f))
            Switch(checked = reminders, onCheckedChange = { reminders = it })
        }
        Button(onClick = { /* save */ }, enabled = name.isNotBlank()) {
            Text("Save")
        }
    }
}

Dikkat et: Material bileşenleri kendi durumlarını tutmaz. OutlinedTextField metni value parametresinden alır ve yeni metni onValueChange ile sana geri verir; onu saklamak senin işin. Bunun nasıl çalıştığını bir sonraki derste ayrıntılı öğreneceksin.

Önizlemeler: uygulamayı çalıştırmadan bak

@Preview(showBackground = true)
@Preview(
    name = "Dark",
    showBackground = true,
    uiMode = Configuration.UI_MODE_NIGHT_YES
)
@Composable
fun LessonCardPreview() {
    EducoraNotesTheme {
        LessonCard(title = "Jetpack Compose", minutes = 15)
    }
}

1. 1
   Split görünümünü aç

   Düzenleyicinin sağ üst köşesindeki Split düğmesine bas: solda kod, sağda önizleme görünür.

2. 2
   Yenile

   Büyük bir değişiklikten sonra önizleme panelindeki Build & Refresh'e bas; küçük metin değişiklikleri genellikle hemen görünür.

3. 3
   Etkileşimli mod

   Önizlemenin üstündeki etkileşimli mod düğmesine bas: artık emülatör olmadan düğmelere basabilir ve metin yazabilirsin.