"Jetpack Compose" araç setinin kullanıma sunulmasıyla, Android geliştiricileri eski XML düzenlerine veda ediyor. Kullanıcı arayüzlerinin bildirimsel açıklaması, ekranların oluşturulmasını, veri bağlamayı ve yeniden kullanılabilirliği basitleştirir.

Jetpack Compose'un birçok avantajına rağmen , bazı kullanım durumları hala çok fazla kod gerektiriyor. Bunu özellikle bir Android uygulaması için daha büyük bir form oluşturmak istediğimde fark ettim. Bu hikayede size Jetpack Compose ile nasıl çok basit bir form oluşturacağınızı göstermek istiyorum.

Doğrulayıcılar ve olabildiğince az kodla veri bağlama ile daha karmaşık formlar oluşturabileceğiniz, kendi geliştirdiğim bir kitaplığı göstereceğim bir sonraki hikayemle de muhtemelen ilgileniyorsunuzdur .

Basit metin alanı

Aşağıdaki örnek, basit bir TextField düzenlenebilirliği için resmi bir Android örneğidir.

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

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

Endişelerin ayrılması

Peki, bu metin alanı mükemmel çalışıyor. Bununla birlikte, normal bir kullanım durumunda, genellikle bir metin alanının temel işlevlerinden daha fazlasıyla ilgilenirim. Örneğin, genellikle form alanlarına doğrulayıcılar eklemek isterim.

Ayrıca Android'in standartlaştırılmış mimari ilkelerini takip etmek ve farklı katmanları ayırmak istiyorum . Bu nedenle, verilerin bir UiState ile bir ViewModel'de olmasını istiyorum.

Aşağıdaki örnekte yine "minimum uzunluk doğrulayıcı" içeren basit bir metin alanı gösterilmektedir. Bu örnek aynı zamanda standartlaştırılmış mimari ilkelerini de takip eder.

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

Form Kitaplığı Oluştur

Kendi geliştirdiği açık kaynak kitaplık Compose Form ile , birden çok alan, seçici, doğrulayıcı ve çeşitli diğer özelliklerle standartlaştırılmış mimari ilkelerini izleyen gelişmiş bir form oluşturmak çok kolaydır.
Form Oluştur'u nasıl kullanacağınızı ve özelleştireceğinizi öğrenmek için bir sonraki hikayemi okuyun.

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