Arayüz tasarımı oluştururken görsellik yanı sıra kullanıcı ile etkileşimi sağlayan tasarım araçları kullanmakta çok önemlidir.
Bu makale Android Jetpack Compose tasarımda input validation (doğrulama) nasıl yapılacağını örnekleyerek açıklayacaktır.
Umayherbal firma uygulamasının login ekran prototipi:
Proje kodlarına github linkinden, kodlarla ilgili açıklamalara da makaleden ulaşabilirsiniz.
1-Compose Proje Oluşturma
Compose kullanabilmek için Android Studio Arctic Fox veya üst sürümlerden birini indirmeniz gerekir. Android Studio’da File > New yolunu takip edip New Project ekranında Empty Compose Activity arayüz taslağını seçmelisiniz. Next yapıp projenizi oluşturun.
2-Gerekli Kütüphanelerin Eklenmesi
Android Studio Ide ile oluşturduğum projemin app dizinin altındaki build.gradle dosyasını açıyoruz. Dependencies kod bloklarının arasına aşağıdaki kodları yerleştirerek Material3 kütüphanesini yüklüyoruz. Bazı Android Studio sürümleri bu kütüphaneyi kendiside ekleyebiliyor.
|
1 |
implementation 'androidx.compose.material3:material3' |
3- Tasarımı ve Input Validation Oluşturma
Compose tasarımda kullanıcının metin girmesini sağlayan 2 tip input çeşidi vardır.
-
- TextField : Xml yapısındaki EditText’in en sade halidir.
- OutlinedTextField : Bu tür input’a tıkladığınızda animasyon şeklinde label üst border alanına geçer. En önemli özelliği;
onValueChangesayesinde kullanıcı klavyeden her karakter girdiğinde anlık olarak veri güncellenir. Dilerseniz input alanına icon da ekleyebilirsiniz. Örmek,
Örnek projemizde OutlinedTextField kullanmayı tercih ettim. Kodlarımızı detaylı inceleyelim.
Not: Sadece email input kontrolu yaptım. Dilerseniz if kontrolü ekleyerek password input kontrol edebilirsiniz. Ek olarak projede kullandığım renkleri, paket_ismi.ui.theme dizinin içindeki Color.kt dosyası içinde tanımladım.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 |
import androidx.compose.foundation.Image import android.os.Bundle import androidx.activity.ComponentActivity import androidx.activity.compose.setContent import androidx.compose.foundation.layout.* import androidx.compose.material3.* import androidx.compose.runtime.* import androidx.compose.ui.* import androidx.compose.ui.graphics.Color import androidx.compose.ui.res.painterResource import androidx.compose.ui.text.input.PasswordVisualTransformation import androidx.compose.ui.unit.* import com.smality.composeinputvalidation.ui.theme.* class MainActivity : ComponentActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { ComposeInputValidationTheme { Surface( modifier = Modifier.fillMaxSize(),color = yellow ) { ValidateEmail() } } } } } //Email Input oluşturma @OptIn(ExperimentalMaterial3Api::class) @Composable fun EmailTextField(email: String, onEmailChange: (String) -> Unit) { OutlinedTextField( modifier = Modifier.fillMaxWidth(), value = email, onValueChange = { onEmailChange(it) }, label = { Text("Email", color = golden) }, singleLine = true, colors = TextFieldDefaults.outlinedTextFieldColors(focusedBorderColor = golden, unfocusedBorderColor = gray) ) } //Password Input oluşturma @OptIn(ExperimentalMaterial3Api::class) @Composable fun PassTextField(password: String, onEmailChange: (String) -> Unit) { OutlinedTextField( modifier = Modifier.fillMaxWidth().absolutePadding(0.dp, 10.dp, 0.dp, 0.dp), value = password, onValueChange = { onEmailChange(it) }, label = { Text("Password", color = golden) }, singleLine = true, //Yazılan karakterler . şeklinde gözükmesi için özellik atadık visualTransformation = PasswordVisualTransformation(), colors = TextFieldDefaults.outlinedTextFieldColors(focusedBorderColor = golden, unfocusedBorderColor = gray) ) } //Email Validation fun isValidEmail(email: String): Boolean { val emailRegex = "[a-zA-Z0-9._-]+@[a-z]+\\.+[a-z]+".toRegex() return email.matches(emailRegex) } //Tasarımı ve Input Validation Oluşturma @Composable fun ValidateEmail() { var email by remember { mutableStateOf("") } var password by remember { mutableStateOf("") } var errorText by remember { mutableStateOf("") } Column(Modifier.fillMaxWidth().absolutePadding(50.dp, 0.dp, 50.dp, 0.dp),horizontalAlignment = Alignment.CenterHorizontally) { //Logoyu tasarıma ekleyelim. Image( painter = painterResource(id=R.drawable.umay_logo), contentDescription = "logo", modifier = Modifier.size(260.dp) ) EmailTextField(email = email, onEmailChange = { email = it }) //Email input uyarılarını yazdılarılım Text(text = errorText, color = darkRed) PassTextField(password = password, onEmailChange = { password = it }) Button( onClick = { //Email input kontrolü if (email.isNotEmpty()) { if (isValidEmail(email)) { errorText="Email adresi başarılı." } else { errorText="Email geçerli değil." } } }, colors = ButtonDefaults.buttonColors(containerColor = Color(0xFF804C4D)), modifier = Modifier.width(150.dp).absolutePadding(0.dp, 10.dp, 0.dp, 0.dp), ) { Text(text = "LOGIN",color = Color.White, fontSize = 16.sp) } } } |
Proje kodlarına github linkinden, kodlarla ilgili açıklamalara da makaleden ulaşabilirsiniz.
