Layouts, Styling und Modifier

Nun bauen wir das UI unserer Todo-App weiter aus. Hier stehen wir:

Das Layout einer Android-App wird komplett in Kotlin-Code erstellt. Mit Compose können wir das UI deklarativ beschreiben, d.h. wir beschreiben, wie das UI aussieht, wenn es gerendert wird („was wird dargestellt anstatt wie wird es dargestellt“). Composables sind die Bausteine für das UI und können geschachtelt werden, womit wir komplexe Layouts erstellen können.

Row und Column

Mit den vordefinierten Layout-Composables Row und Column können wir UI-Elemente nebeneinander oder untereinander anordnen. Zunächst fügen wir einem Todo eine Checkbox hinzu:

@Composable
fun Todo(text: String) {
    Row {
        Checkbox(checked = false, onCheckedChange = { })
        Text(text)
    }
}

Row ist ein Composable, das die enthaltenen Composables nebeneinander bzw. horizontal anordnet. Hier wird wieder mit { … } ein Lambda-Ausdruck verwendet, um die in Row enthaltenen Composables zu definieren. Das Lambda { } in Checkbox ist zunächst leer, da wir noch kein Verhalten für die Checkbox definiert haben. Checkbox ist eine Komponente aus dem Material-Design (dazu später mehr).

Mehrere Todos können wir vertikal in einer Column anordnen:

@Composable
fun TodoList() {
    Column {
        Todo("Einkaufen")
        Todo("Android lernen")
        Todo("Sport machen")
    }
}

Hier haben wir gleich ein neues Composable TodoList erstellt, das drei Todos enthält. Wir müssen dies noch in setContent in MainActivity verwenden:

setContent {
    TodoList()
}

Gleich werden wir uns um das Aussehen bzw. Styling des Todos kümmern.

Später werden wir das Verhalten der Checkbox in einem Todo implementieren und eine „echte“ Liste von Todos erstellen.

Styling einzelner Composables

Für bestimmte Composables gibt es vordefinierte Parameter, um das Aussehen zu verändern. Zum Beispiel können wir den Text in einem Todo fett und größer darstellen:

@Composable
fun Todo(text: String) {
    Row {
        Checkbox(checked = false, onCheckedChange = { })
        Text(text, fontWeight = FontWeight.Bold, fontSize = 22.sp)
    }
}

sp steht für scalable pixels und ist eine Maßeinheit, die für Text bestimmt ist. Dabei wird die gewünschte Schriftgröße in den Systemeinstellungen des Geräts berücksichtigt.

Vordefinierte Composables wie Text haben unterschiedliche Parameter, um das Aussehen bzw. Styling einzelner Composables zu verändern.

Manche Composables haben auch spezifische Layout-Parameter. Wir können z.B. die vertikale Ausrichtung innerhalb einer Row bestimmen, damit im Todo die Checkbox und der Text vertikal zentriert sind:

@Composable
fun Todo(text: String) {
    Row(verticalAlignment = Alignment.CenterVertically) {
        Checkbox(checked = false, onCheckedChange = { })
        Text(text, fontWeight = FontWeight.Bold, fontSize = 22.sp)
    }
}

Oben wird nochmals die trailing lambda Syntax deutlich. Row erhält in den runden Klammern einen Parameter verticalAlignment und in den geschweiften Klammern wird der letzte Parameter von Row als ein Lambda-Ausdruck definiert. Diese „kombinierte“ Syntax von Parametern ist in Kotlin und besonders in Compose sehr verbreitet.

Modifiers für Layout und Verhalten

Mit Modifiers können wir das Layout und das Verhalten von Composables verändern. Modifiers sind Kotlin-Objekte, die an Composables übergeben werden. Sie sind wiederverwendbar und allgemeiner als die eben gezeigten Parameter für das Styling einzelner Composables.

Ein Modifier kann z.B. mit padding einen Abstand um ein Composable festlegen:

@Composable
fun Todo(text: String) {
    Row(
        modifier = Modifier.padding(10.dp),
        verticalAlignment = Alignment.CenterVertically
    ) {
        Checkbox(checked = false, onCheckedChange = { })
        Text(text, fontWeight = FontWeight.Bold, fontSize = 22.sp)
    }
}

Es gibt eine längere Liste von Modifiern: https://developer.android.com/develop/ui/compose/modifiers-list 

Wenn mehrere Modifiers verwendet werden, können sie miteinander kombiniert werden, indem sie syntaktisch verkettet werden. Außerdem sind Modifiers nicht nur für Layout gedacht, sondern u.a. auch für das Verhalten. Hier machen wir ein Todo anklickbar:

@Composable
fun Todo(text: String) {
    Row(
        modifier = Modifier.clickable(onClick = {}).padding(10.dp),
        verticalAlignment = Alignment.CenterVertically
    ) {
        Checkbox(checked = false, onCheckedChange = { })
        Text(text, fontWeight = FontWeight.Bold, fontSize = 22.sp)
    }
}

Nun wollen wir vielleicht, dass eine Zeile bzw. ein Todo sich auf die komplette Bildschirmbreite erstreckt. Dafür gibt es den Modifier fillMaxWidth:

@Composable
fun Todo(text: String) {
    Row(
        modifier = Modifier
            .clickable(onClick = {})
            .padding(10.dp)
            .fillMaxWidth(),
        verticalAlignment = Alignment.CenterVertically
    ) {
        Checkbox(checked = false, onCheckedChange = { })
        Text(text, fontWeight = FontWeight.Bold, fontSize = 22.sp)
    }
}

Dies lässt sich nun durch Anklicken eines Todos nachvollziehen.

@Composable
fun Todo(text: String) {
    Row(
        modifier = Modifier
            .clickable(onClick = { Log.d("MAIN_ACTIVITY", "Todo geklickt") })
            .padding(10.dp)
            .fillMaxWidth(),
    ) // Rest des Codes unverändert
}

Mehr zu Layout und Styling

Layout: https://developer.android.com/develop/ui/compose/layouts/basics 

Modifiers: https://developer.android.com/develop/ui/compose/modifiers  und die nachfolgenden Seiten