class LoginActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
GoodNewsTheme {
// A surface container using the 'background' color from the theme
Surface(
modifier = Modifier.fillMaxSize(),
color = Color.White
) {
Login()
}
}
}
}
}
@Composable
fun Login() {
var inputPhone by remember {
mutableStateOf("")
}
val pwd = remember {
mutableStateOf("")
}
val maxLength = 11
val minLength = 6
Column(
verticalArrangement = Arrangement.Center,
modifier = Modifier
.padding(horizontal = 16.dp)
.background(Color.White)
.fillMaxWidth()
) {
Image(painter = painterResource(id = R.mipmap.logo), contentDescription = null, Modifier
.size(120.dp, 120.dp).align(Alignment.CenterHorizontally))
Text(
text = "好兄弟快快登录",
color = colorResource(id = R.color.blue700),
fontFamily = FontFamily.Monospace,
fontSize = 36.sp,
modifier = Modifier
.align(Alignment.CenterHorizontally)
)
Spacer(modifier = Modifier.height(48.dp))
TextField(
value = inputPhone,
onValueChange = {
if (it.length <= maxLength) inputPhone = it
else "手机号格式错误".showToast()
},
label = { Text(text = "请输入账号") },
leadingIcon = {
Icon(
imageVector = Icons.Default.AccountBox,
contentDescription = "AccountBox"
)
},
trailingIcon = {
IconButton(onClick = { inputPhone = "" }) {
Icon(
imageVector = Icons.Default.Clear,
contentDescription = "Clear"
)
}
},
keyboardOptions = KeyboardOptions(
//设置键盘类动作为搜索按钮
imeAction = ImeAction.Next,
//设置键盘类似为纯文本
keyboardType = KeyboardType.Number
),
modifier = Modifier
.fillMaxWidth()
.border(1.dp, color = Color.Blue),
//设置点击键盘的搜索动作按钮的监听
keyboardActions = KeyboardActions(onSearch = {
"当前输入的数据为:$inputPhone".showToast()
}),
//设置输入框的背景色为透明
colors = TextFieldDefaults.textFieldColors(backgroundColor = Color.Transparent)
)
Spacer(modifier = Modifier.height(24.dp))
TextField(
value = pwd.value,
//visualTransformation设置文本的视觉格式
visualTransformation = (
if (pwd.value.isEmpty())
VisualTransformation.None//普通文本样式
else
PasswordVisualTransformation()//密码样式,星号显示文字
),
onValueChange = {
pwd.value = it
},
label = { Text(text = "请输入密码") },
leadingIcon = {
Icon(
imageVector = Icons.Default.Password,
contentDescription = "Password"
)
},
trailingIcon = {
IconButton(onClick = { pwd.value = "" }) {
Icon(
imageVector = Icons.Default.Clear,
contentDescription = "Clear"
)
}
},
keyboardOptions = KeyboardOptions(
//设置键盘类动作为搜索按钮
imeAction = ImeAction.Send,
//设置键盘类似为纯文本
keyboardType = KeyboardType.Password
),
modifier = Modifier
.fillMaxWidth()
.border(1.dp, color = Color.Blue),
keyboardActions = KeyboardActions(onSend = {
if (pwd.value.length in minLength..maxLength)
"账号为:${inputPhone},密码为:${pwd.value}".showToast()
else
"密码长度为6 - 11 位".showToast()
}),
//设置输入框的背景色为透明
colors = TextFieldDefaults.textFieldColors(backgroundColor = Color.Transparent)
)
Spacer(modifier = Modifier.height(24.dp))
Button(
onClick = {
if (pwd.value.length in minLength..maxLength)
"账号为:${inputPhone},密码为:${pwd.value}".showToast()
else "密码长度为6 - 11 位".showToast()
},
modifier = Modifier
.align(Alignment.CenterHorizontally)
.fillMaxWidth()
.height(48.dp),
shape = RoundedCornerShape(20),
//or shape = CircleShape
) {
Text(text = "登录下好兄弟!", color = Color.White)
}
}
}
@Preview(showBackground = true)
@Composable
fun GreetingPreview() {
GoodNewsTheme {
Login()
}
}
Android compose 一个简陋的登陆页面
最新推荐文章于 2024-02-19 15:53:20 发布