툴킷 "Jetpack Compose"의 도입으로 Android 개발자는 이전 XML 레이아웃에 작별을 고합니다. 사용자 인터페이스의 선언적 설명은 화면 생성, 데이터 바인딩 및 재사용성을 단순화합니다.

Jetpack Compose 의 많은 이점에도 불구하고 특정 사용 사례에는 여전히 많은 코드가 필요합니다. 저는 특히 Android 앱을 위한 더 큰 양식을 만들고 싶었을 때 이것을 깨달았습니다. 이 이야기에서는 Jetpack Compose로 매우 간단한 양식을 만드는 방법을 보여드리고자 합니다.

당신은 아마도 나의 다음 이야기 에 관심 이 있을 것입니다. 여기에서 가능한 한 적은 코드로 유효성 검사기와 데이터 바인딩으로 더 복잡한 양식을 만들 수 있는 자체 개발 라이브러리를 보여줄 것입니다.

간단한 텍스트 필드

다음 예제는 간단한 TextField 컴포저블에 대한 공식 Android 예제입니다.

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

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

관심사의 분리

이 텍스트 필드는 완벽하게 작동합니다. 그러나 일반적인 사용 사례에서는 텍스트 필드의 기본 기능 이상의 것에 관심이 있는 경우가 많습니다. 예를 들어 저는 종종 양식 필드에 유효성 검사기를 추가하고 싶습니다.

또한 Android의 표준화된 아키텍처 원칙을 따르고 다른 레이어를 분리하고 싶습니다 . 따라서 UiState가 있는 ViewModel에 데이터를 갖고 싶습니다.

다음 예는 "최소 길이 유효성 검사기"가 있는 간단한 텍스트 필드를 다시 보여줍니다. 이 예제도 표준화된 아키텍처 원칙을 따릅니다.

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
                )
            }
        }
    }
}

양식 라이브러리 작성

자체 개발한 오픈 소스 라이브러리인 Compose Form을 사용하면 여러 필드, 선택기, 유효성 검사기 및 기타 다양한 기능을 사용하여 표준화된 아키텍처 원칙을 따르는 고급 양식을 매우 쉽게 만들 수 있습니다.
Compose Form을 사용하고 사용자 정의하는 방법을 배우려면 다음 이야기를 읽으십시오.

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