Eine Profilkarte erstellen

Nun kombinieren wir das Gelernte. Wir erstellen eine einfache Profilkarte: einen Namen und eine Berufsbezeichnung, sauber in einer gestalteten Box angeordnet.

Dabei lernen Sie den Modifier kennen, der Größe, Abstände und Darstellung von Composables steuert.

Ein Modifier verändert das Aussehen und Verhalten eines Composables. Sie übergeben ihn über den Parameter modifier, den die meisten Composables akzeptieren.

Modifier übernehmen unter anderem Innenabstände, Größen, Hintergrundfarben und Rahmen. Sie sind die wichtigste Möglichkeit, Ihre Benutzeroberfläche in Compose zu gestalten.

Sie erstellen einen Modifier, indem Sie Aufrufe mit Punkten verketten. Jeder Aufruf gibt einen neuen Modifier zurück, sodass Sie mehrere Modifier aneinanderreihen können.

Die Reihenfolge ist wichtig: Ein Innenabstand vor dem Hintergrund unterscheidet sich von einem Innenabstand danach. Lesen Sie die Kette von links nach rechts – wie ein Rezept.

Der Modifier fillMaxWidth lässt ein Composable den gesamten verfügbaren horizontalen Raum einnehmen. Er eignet sich perfekt für Karten, die sich über die gesamte Bildschirmbreite erstrecken sollen.

Für beide Richtungen gibt es außerdem fillMaxSize und mit size können Sie eine feste Breite und Höhe festlegen.

Ein Innenabstand schafft innerhalb eines Composables Platz zwischen dessen Rand und seinem Inhalt. Verwenden Sie Modifier.padding mit einem dp-Wert.

Der Innenabstand verhindert, dass Text direkt an den Rändern einer Karte anliegt, und sorgt für ein angenehmes, übersichtliches Layout.

Eine Hintergrundfarbe hebt die Karte hervor. Wenden Sie sie mit dem Modifier background und einem Farbwert an.

Kombinieren Sie sie mit einem Innenabstand, damit der farbige Bereich um den Text herum genügend Raum lässt.

In der Column der Karte stapeln wir zwei Textabschnitte: oben einen fett formatierten Namen und darunter eine dünnere Berufsbezeichnung.

Durch unterschiedliche Werte für fontSize und fontWeight entsteht eine klare visuelle Hierarchie zwischen beiden.

Wir wandeln die Karte in ein wiederverwendbares Composable um, das einen name und einen title als Parameter akzeptiert. Nun kann es beliebige Personen anzeigen.

Das ist dieselbe Idee wie in der ersten Lektion: Daten übergeben und die Benutzeroberfläche überall wiederverwenden.

Hier sehen Sie die Karte mit allen Bestandteilen: eine Column über die gesamte Breite, ein grauer Hintergrund, Innenabstand und zwei formatierte Textzeilen.

Beachten Sie, wie die Modifier-Kette und die untergeordneten Elemente der Column alles aus den vorherigen Lektionen zu einem übersichtlichen Composable verbinden.

Fügen Sie einen @Preview-Wrapper hinzu, um die Karte in Android Studio anzuzeigen. Er ruft ProfileCard mit Beispieldaten auf und zeigt einen Hintergrund an.

Nun können Sie Innenabstände oder Farben anpassen und beobachten, wie das Ergebnis sofort aktualisiert wird.

Um die Karte in der ausgeführten App anzuzeigen, rufen Sie sie innerhalb von setContent in Ihrer Activity auf. Dadurch wird Ihr Composable mit dem aktiven Bildschirm verbunden.

Damit haben Sie den Weg von einem einzelnen Composable zu einer vollständigen, wiederverwendbaren UI-Komponente zurückgelegt.

Sehen wir uns an, wie Composables ihren Innenabstand, ihre Größe und ihren Hintergrund erhalten.

Sie haben eine vollständige Profilkarte erstellt, indem Sie Text, Column und Modifier kombiniert haben. Mit Modifiern können Sie padding, fillMaxWidth und background verketten, um Ihre Benutzeroberfläche zu gestalten und zu formatieren.

Sie haben die Karte mit den Parametern name und title wiederverwendbar gemacht, sie mit @Preview in der Vorschau angezeigt und über setContent dargestellt. Das ist ein vollständiger Compose-Bildschirm von Anfang bis Ende. Herzlichen Glückwunsch!