Mit der Einführung des Toolkits „Jetpack Compose“ verabschieden sich Android-Entwickler von alten XML-Layouts. Die deklarative Beschreibung von Benutzeroberflächen vereinfacht die Erstellung von Bildschirmen, die Datenbindung und die Wiederverwendbarkeit.

Trotz der vielen Vorteile von Jetpack Compose erfordern bestimmte Anwendungsfälle immer noch viel Code. Dies wurde mir insbesondere klar, als ich ein größeres Formular für eine Android-App erstellen wollte. In dieser Geschichte möchte ich Ihnen zeigen, wie Sie mit Jetpack Compose ein sehr einfaches Formular erstellen.

Wahrscheinlich interessiert Sie auch meine nächste Story , in der ich Ihnen eine selbst entwickelte Bibliothek zeige, mit der Sie mit möglichst wenig Code komplexere Formulare mit Validatoren und Datenbindung erstellen können.

Einfaches Textfeld

Das folgende Beispiel ist ein offizielles Android-Beispiel für ein einfaches TextField- Composable.

@Composable
fun SimpleFilledTextFieldSample() {
    var textState by remember { mutableStateOf("Hello") }

    TextField(
        value = textState,
        onValueChange = { textState = it },
        label = { Text("Label") }
    )
}

Trennung von Bedenken

Nun, dieses Textfeld funktioniert perfekt. Im normalen Anwendungsfall interessiert mich jedoch oft mehr als nur die Grundfunktionalität eines Textfeldes. Ich möchte beispielsweise häufig Validatoren zu Formularfeldern hinzufügen.

Außerdem möchte ich den standardisierten Architekturprinzipien von Android folgen und die verschiedenen Schichten trennen. Ich möchte daher die Daten in einem ViewModel mit einem UiState haben.

Das folgende Beispiel zeigt noch einmal ein einfaches Textfeld mit einem „Mindestlängenvalidator“. Auch dieses Beispiel folgt den standardisierten Architekturprinzipien.

data class MainUiState(
    val currentName: String = "",
    val currentNameErrors: MutableList<String> = mutableListOf(),
)
class MainViewModel: ViewModel() {
    // Main UI state
    private val _uiState = MutableStateFlow(MainUiState())
    val uiState: StateFlow<MainUiState> = _uiState.asStateFlow()

    fun updateName(name: String) {
        val errors = mutableListOf<String>()
        if (name.length < 4) {
            errors.add("The name must be at least 4 characters.")
        }
        _uiState.value = _uiState.value.copy(
            currentName = name,
            currentNameErrors = errors
        )
    }
}
class MainActivity : ComponentActivity() {
    // ...
    
    @Composable
    fun SimpleFilledTextFieldSample(
        mainViewModel: MainViewModel = viewModel()
    ) {
        val mainUiState by mainViewModel.uiState.collectAsState()
        Column(modifier = Modifier.padding(16.dp)) {
            TextField(
                value = mainUiState.currentName,
                singleLine = true,
                modifier = Modifier.fillMaxWidth(),
                onValueChange = { mainViewModel.updateName(it) },
                label = { Text(text = "Enter your Name") },
                isError = mainUiState.currentNameErrors.isNotEmpty()
            )
            mainUiState.currentNameErrors.forEach {
                Text(
                    modifier = Modifier.padding(vertical = 8.dp),
                    text = it,
                    color = Color.Red
                )
            }
        }
    }
}

Formularbibliothek erstellen

Mit der selbst entwickelten Open-Source-Bibliothek Compose Form ist es sehr einfach, ein erweitertes Formular zu erstellen, das den standardisierten Architekturprinzipien folgt, mit mehreren Feldern, Pickern, Validatoren und verschiedenen anderen Funktionen.
Lesen Sie meine nächste Geschichte, um zu erfahren, wie Sie Compose Form verwenden und anpassen.

https:///@benlue/advanced-forms-in-android-with-compose-form-154ee0bff65b