Адаптивный макет для всех размеров экрана в Android Jetpack Compose ⇐ Android

[Anonymous]

Страница входа:

Код: Выделить всё

    [![@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun LoginPage(navController: NavController) {
val context = LocalContext.current
val homeScreen = remember { mutableStateOf(false) }
val loginScreen = remember { mutableStateOf(false) }
val mobileNumberState = remember { mutableStateOf("") }
val showToastState = remember { mutableStateOf(false) }
var buttonClicked by remember { mutableStateOf(false) }
val keyboardController = LocalSoftwareKeyboardController.current

// Check the length of the mobile number
val isMobileNumberValid = mobileNumberState.value.length == 10 && mobileNumberState.value.isDigitsOnly()
var isFieldFocused by remember { mutableStateOf(false) }
val focusRequester = remember { FocusRequester() }

Surface(
color = Color(
ContextCompat.getColor(
context,
R.color.pageBg
)
),
modifier = Modifier
.fillMaxSize()
.padding(10.dp)
) {
Column(
modifier = Modifier
.fillMaxSize()
.padding(horizontal = 16.dp)
.background(Color.White)
.verticalScroll(rememberScrollState())
) {
Spacer(modifier = Modifier.weight(1f))
Text(
text = "Welcome Back!",
modifier = Modifier.fillMaxWidth(),
textAlign = TextAlign.Center,
style = MaterialTheme.typography.headlineMedium,
fontFamily = regular,
color = colorResource(id = R.color.scaapp),
)
Spacer(modifier = Modifier.height(8.dp))
Text(
text = "Let’s get Started",
modifier = Modifier.fillMaxWidth(),
textAlign = TextAlign.Center,
style = MaterialTheme.typography.headlineSmall,
color = colorResource(id = R.color.splashtext),
fontFamily = regular
)
Spacer(modifier = Modifier.height(24.dp))
Image(
painter = painterResource(id = R.drawable.login), // Replace 'login' with your drawable file name
contentDescription = "Splash Image",
modifier = Modifier
.fillMaxWidth()
.aspectRatio(1f)
.align(Alignment.CenterHorizontally)
)
Spacer(modifier = Modifier.height(24.dp))
OutlinedTextField(
value = mobileNumberState.value,
keyboardOptions = KeyboardOptions(
capitalization = KeyboardCapitalization.None,
autoCorrect = true,
keyboardType = KeyboardType.Number,
imeAction = ImeAction.Done
),
label = {
Row(
verticalAlignment = Alignment.CenterVertically,
modifier = Modifier.fillMaxWidth()
) {
Text("+91 ", fontFamily = semibold)
Text(
text = "Enter Your Mobile Number",
//                            style = MaterialTheme.typography.bodySmall,
color = Color(
ContextCompat.getColor(
context,
R.color.placeholderColor
)
),
maxLines = 1,
)
}
},
onValueChange = {
if (it.length   char.isDigit() } // This also ensures the input is only digits
}
},
modifier = Modifier
.fillMaxWidth()
.focusRequester(focusRequester)
.onFocusChanged { focusState ->
isFieldFocused = focusState.isFocused
},
colors = TextFieldDefaults.outlinedTextFieldColors(
focusedBorderColor = if (isFieldFocused) {
if (mobileNumberState.value.length == 10) colorResource(id = R.color.scaapp) else Color.Red
} else colorResource(id = R.color.fieldBorder),
unfocusedBorderColor = colorResource(id = R.color.fieldBorder)
)
)
Spacer(modifier = Modifier.height(16.dp))
Button(
onClick = {
val mobileNumber = mobileNumberState.value
if (mobileNumber.length == 10 && mobileNumber.isDigitsOnly()) {
showToastState.value = false
buttonClicked = true
} else {
showToastState.value = true
keyboardController?.hide()
}
},
shape = RoundedCornerShape(5.dp),
modifier = Modifier
.height(50.dp)
.fillMaxWidth(),
colors = ButtonDefaults.buttonColors(
containerColor = if (isMobileNumberValid) colorResource(R.color.scaapp) else colorResource(R.color.buttonDisable), // Set the background color
contentColor = Color.White // Set the text color
)
) {
Text("Sign in")
}
Spacer(modifier = Modifier.height(16.dp))
Row(modifier = Modifier.align(Alignment.CenterHorizontally)) {
Text(
"Don't have an account?",
color = colorResource(id = R.color.black),
fontFamily = regular
)
Text(
" Register here",
modifier = Modifier.clickable { navController.navigate(ROUTES.SIGNUP.name) },
color = colorResource(id = R.color.scaapp),
fontFamily = regular
)
}
}
}

val prefDataStore = PreferenceDataStore(LocalContext.current)
val accesstoken = runBlocking { prefDataStore.userName.first() }

if (accesstoken.isEmpty()) {
loginScreen.value = true
} else {
LaunchedEffect(true) {
withContext(Dispatchers.IO) {
prefDataStore.getDetails().collect {
if (it.name != "") {
withContext(Dispatchers.Main) {
homeScreen.value = true
navController.navigate(ROUTES.HOME.name)
}
} else {
withContext(Dispatchers.Main) {
navController.navigate(ROUTES.LOGIN.name)
}
}
}
}
}
}
}

@Preview(showBackground = true, device = Devices.DEFAULT)
@Composable
fun LoginPagePreview() {
SCATheme {
val navController = rememberNavController()
LoginPage(navController)
}
}

когда Я проверяю свой пользовательский интерфейс в режиме «Начать проверку пользовательского интерфейса». Размеры экрана 115 %, 130 %, 180 % и 200 % всегда странные
Как видите, «У вас нет учетной записи?» и «Зарегистрируйтесь здесь» не отображаются в одну строку, за исключением 100% размера экрана телефона.
Я также проверил и на реальных устройствах... проблема все еще существует
Мне нужно отображать полный текст в одну строку без...
На многих экранах также возникает проблема с надписью «Введите номер мобильного телефона», как вы можете видеть на изображении
Как адаптировать Android Jetpack Compose под все размеры экрана

Подробнее здесь: https://stackoverflow.com/questions/785 ... ck-compose