接上篇大话Compose过渡篇(1) – ()留的家庭作业。本文只是展示一个参阅！
准备工作
-
AS新建一个项目
- 创建一个新项目添加compose相关依赖
- 用模板生成一个empty compose activity(M3版本)
-
经过Material Theme Builder装备款式
挑选自己喜爱的关键色彩，经过实时预览直到达到自己满足的配色。
装备色彩及生成的色彩色调
亮/暗形式默许色彩装备
亮/暗形式背景色
亮形式作用预览
暗形式作用预览
导出并导入款式
点击Export挑选Compose然后自动下载文件。解压文件后替换项目ui包内theme包内Theme.kt文件。，这便是经过Material Theme Builder装备的主题，测试一下主题。
测试主题
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
WindowCompat.setDecorFitsSystemWindows(window, false)
setContent {
val systemUiController = rememberSystemUiController()
val useDarkIcons = !isSystemInDarkTheme()
DisposableEffect(systemUiController, useDarkIcons) {
systemUiController.setSystemBarsColor(
color = Color.Transparent,
darkIcons = useDarkIcons,
)
onDispose {}
}
//这个地方的WaTheme是我自己改了姓名，默许的应该是AppTheme之类的。
WaTheme {
Surface(
modifier = Modifier
.fillMaxSize()
.statusBarsPadding(),
color = MaterialTheme.colorScheme.background,
) {
Column(modifier = Modifier) {
ElevatedButton(onClick = { }) {
Icon(NiaIcons.Add, contentDescription = null)
Text(text = "高差按钮")
}
Button(onClick = { }) {
Text(text = "填充色按钮")
}
FilledTonalButton(onClick = { /*TODO*/ }) {
Text(text = "填充色调按钮")
}
OutlinedButton(onClick = { /*TODO*/ }) {
Text(text = "描边按钮")
}
TextButton(onClick = { /*TODO*/ }) {
Text(text = "文字按钮")
}
IconButton(onClick = { /*TODO*/ }) {
Icon(NiaIcons.Person, contentDescription = null)
}
FloatingActionButton(onClick = {
}) {
Icon(imageVector = NiaIcons.ExpandLess, contentDescription = null)
}
ExtendedFloatingActionButton(
text = { Text(text = "扩展fab")},
icon = { Icon(imageVector = NiaIcons.MoreVert, contentDescription =null ) },
onClick = { },
)
}
}
}
}
}
运转后作用跟装备时的预览相同，后边我们实操写一个简单的登录注册页面
完结一个简单的登录页面
主题款式验证没问题后，现在来试着写个登录注册的页面再来看见作用。废话不多说先上作用图：
代码如下：
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
WindowCompat.setDecorFitsSystemWindows(window, false)
setContent {
val systemUiController = rememberSystemUiController()
val useDarkIcons = !isSystemInDarkTheme()
DisposableEffect(systemUiController, useDarkIcons) {
systemUiController.setSystemBarsColor(
color = Color.Transparent,
darkIcons = useDarkIcons,
)
onDispose {}
}
WaTheme {
LoginLandScreen("1Android",painterResource(id = R.mipmap.c40e539dbd192d785175fa8ad2079efc),
{
Toast.makeText(
this@MainActivity,
"跳转到注册页面",
Toast.LENGTH_SHORT,
).show()
},
{
Toast.makeText(
this@MainActivity,
"跳转到忘掉暗码页面",
Toast.LENGTH_SHORT,
).show()
},
{account,password->
Toast.makeText(
this@MainActivity,
"用账号:${account}和暗码:${password}跳转登录页面",
Toast.LENGTH_SHORT,
).show()
},
)
}
}
}
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun LoginLandScreen(
appName: String,
backgroundImage: Painter,
signup: () -> Unit,
forgotPassword: () -> Unit,
signin: (account: String, password: String) -> Unit,
) {
var name by remember {
mutableStateOf("")
}
var password by remember {
mutableStateOf("")
}
var showPassword by remember {
mutableStateOf(value = false)
}
ConstraintLayout(
modifier = Modifier.fillMaxSize(),
) {
val (textAppName, textSignup, textFiledInput, textForgotPas, buttonLogin) = createRefs()
Image(
modifier = Modifier.fillMaxSize(),
painter = backgroundImage,
contentDescription = null,
)
Text(
text = appName,
style = TextStyle(
fontSize = 28.sp,
fontWeight = FontWeight.SemiBold,
fontStyle = FontStyle.Italic,
shadow = Shadow(
color = MaterialTheme.colorScheme.primary,
offset = Offset(5f, 5f),
blurRadius = 3f,
),
),
modifier = Modifier.constrainAs(textAppName) {
centerHorizontallyTo(parent)
bottom.linkTo(textFiledInput.top, 24.dp)
},
)
TextButton(
onClick = {
signup()
},
modifier = Modifier.constrainAs(textSignup) {
top.linkTo(parent.top, 44.dp)
end.linkTo(parent.end, 22.dp)
},
) {
Text(
text = "注册", fontWeight = FontWeight.SemiBold,
)
}
Column(
modifier = Modifier.constrainAs(textFiledInput) {
centerTo(parent)
},
) {
OutlinedTextField(
value = name,
onValueChange = {
name = it
},
label = {
Text(
text = "请输入账号",
style = MaterialTheme.typography.labelSmall,
)
},
singleLine = true,
shape = TextFieldDefaults.outlinedShape,
keyboardOptions = KeyboardOptions(
keyboardType = KeyboardType.Text,
imeAction = ImeAction.Next,
),
)
Spacer(modifier = Modifier.height(22.dp))
OutlinedTextField(
value = password,
visualTransformation = if (!showPassword) {
PasswordVisualTransformation()
} else {
VisualTransformation.None
},
trailingIcon = {
if (showPassword) {
IconButton(
onClick = {
showPassword = false
},
) {
Icon(
imageVector = Filled.Visibility,
contentDescription = "隐藏暗码",
)
}
} else {
IconButton(
onClick = {
showPassword = true
},
) {
Icon(
imageVector = Filled.VisibilityOff,
contentDescription = "显示暗码",
)
}
}
},
onValueChange = {
password = it
},
label = {
Text(
text = "请输入暗码",
style = MaterialTheme.typography.labelSmall,
)
},
singleLine = true,
shape = TextFieldDefaults.outlinedShape,
keyboardOptions = KeyboardOptions(
keyboardType = KeyboardType.Password,
imeAction = ImeAction.Done,
),
)
}
TextButton(
modifier = Modifier.constrainAs(textForgotPas) {
top.linkTo(textFiledInput.bottom, 6.dp)
end.linkTo(textFiledInput.end)
},
onClick = {
forgotPassword()
},
) {
Text(text = "忘掉暗码", fontWeight = FontWeight.SemiBold)
}
Button(
onClick = {
signin(name, password)
},
modifier = Modifier
.constrainAs(buttonLogin) {
centerHorizontallyTo(parent)
top.linkTo(textForgotPas.bottom, 24.dp)
}
.width(100.dp),
) {
Text(text = "登录")
}
}
}
最终比照一下亮色主题和深色主题的作用
亮色主题：
小结
Material Theme Builder装备款式后一键导出，配合Compose的Material Theme页面构造入口函数，能够很轻松的完成app内款式的高适配度和统一性。减少了传统xml写法中需要自定义各种style等繁琐重复的操作，让我们能够把更多精力放在其他的地方。经过大话compose筑基篇的内容并结合登录注册页面的比如，很轻松就完成了一个用原生组件+主题款式的可复用的可组合项。
过渡篇旨在起到一个抛砖引玉，或承上启下的作用。希望能激起有爱好的xdm自己去不断学习或者让读过我之前系列的jym在开始一个新系列的学习之前有个理解过渡。后边正式开启大话Compose炼体篇。感谢一向重视陪同的xdm，你们的点赞评论收藏是我能继续下去的动力。
