1. 前言
上篇文章 我们实现了 Compose Bloom项目的开发页,这篇文章接着上文,来介绍登录页的开发。
2. 分析页面布局
根据UI稿我们可知,这个页面就用一个垂直的列表,把一个个组件实现了就好了。
3. 实现标题
Column( //垂直列表
modifier = Modifier
.fillMaxSize()
.background(color = white),
horizontalAlignment = Alignment.CenterHorizontally
) {
Text(
text = "Log in with email",
style = h1,
color = gray,
modifier = Modifier.padding(top = 184.dp)
)
}
这里用到了Column
组件,这个类似于LinearLayout
,只不过它的方向是固定的,是垂直方向上的。
对应的,横向布局的组件,有Row
,内部的子布局会从左往右进行排布。
效果如下所示
4. 实现输入框
OutlinedTextField(
value = "", onValueChange = {},
modifier = Modifier
.padding(top = 16.dp, start = 16.dp, end = 16.dp)
.fillMaxWidth(),
placeholder = {
Text(
text = "Email address",
style = body1,
color = gray,
modifier = Modifier.padding(top = 3.dp)
)
}
)
OutlinedTextField(
value = "", onValueChange = {},
modifier = Modifier
.padding(top = 16.dp, start = 16.dp, end = 16.dp)
.fillMaxWidth(),
placeholder = {
Text(
text = "Password (8+ characters)",
style = body1,
color = gray,
modifier = Modifier.padding(top = 3.dp)
)
}
)
这里OutlinedTextField
是androidx.compose.material
包下的,说明它是个Material
风格的组件,看字面意思可知,是有一圈外边框的输入框。
效果如下所示
5. 自定义输入框样式
我们可以通过自定义输入框样式,来实现和OutlinedTextField
一样的效果
首先,我们要知道Compose
中,总共分为4
层,每一层都可以单独使用,在不同维度提供能力支持。
Compose模块 | 说明 |
---|---|
Material | 此模块位于最上层,基于Material Design系统实现的各种Composable |
Foundation | 此模块为UI提供了一些基础的Composable,例如Row、Column、lazyColumn等布局类UI,以及特定手势识别等,这些基础Composable在很多平台都可以通用 |
UI | 此模块构筑了上层Composable运行的基础,例如Composable的测量、布局、绘制、事件处理以及Modifier管理等 |
Runtime | 此模块提供了基本的对UI树的管理能力,如果只需要Compose的树管理能力,而不需要其UI,则可以直接基于此层进行构建 |
我们可以基于Foundation
层来实现自定义风格样式的Compose
组件,而BasicTextField
就是基于Foundation
层的。所以我们这里基于BasicTextField
来自定义输入框样式。
BasicTextField(value = password, decorationBox = { innerTextField ->
Box(
modifier = Modifier
.fillMaxWidth()
.height(56.dp)
.padding(start = 16.dp, end = 16.dp, top = 8.dp)
.border(1.dp, color = light_gray, shape = small)
.padding(start = 16.dp, end = 16.dp),
contentAlignment = Alignment.CenterStart
) {
if (password.isEmpty()) {
Text(text = "Password (8+ characters)", style = body1, color = gray)
}
innerTextField()
}
}, onValueChange = {})
运行项目,可以看到,和OutlinedTextField
的效果是一样的。
6. 实现Tips小字
Text(
text = "by clicking below,you agree to our Terms of Use and consent to our Privacy Prolicy.",
style = body2,
color = gray,
modifier = Modifier.padding(start = 16.dp, end = 16.dp, top = 16.dp),
textAlign = TextAlign.Center
)
效果如下所示
7. 实现登录按钮
Button(
onClick = { },
colors = ButtonDefaults.buttonColors(pink900),
modifier = Modifier
.padding(top = 16.dp, start = 16.dp, end = 16.dp)
.fillMaxWidth()
.height(48.dp)
.clip(medium)
) {
Text(text = "Log in", style = button, color = white)
}
效果如下所示
8. 封装自定义View
如果看过上一篇文章,就可以发现,这个按钮的样式,和上一篇文章中欢迎页的按钮样式是一样的。为了通用性,我们完全可以封装一个自定义View,来进行复用。
首先,我们新建一个类BloomButton.kt
代码如下
@Composable
fun BloomButton(modifier: Modifier, text: String) {
Button(
onClick = { },
modifier = Modifier
.then(modifier)
.fillMaxWidth()
.height(48.dp)
.clip(medium),
colors = ButtonDefaults.buttonColors(backgroundColor = pink900)
) {
Text(text = text, style = button, color = white)
}
}
这样,我们就创建好了一个我们自己的Compose组件,然后进行调用
BloomButton(
modifier = Modifier.padding(start = 16.dp, top = 16.dp, end = 16.dp),
text = "Log in"
)
运行项目,可以发现效果是一样的
9.小结
至此,我们就完成了登录页面。下一篇文章我们将来实现主页的逻辑。
Compose 项目实战 系列文章
Android Compose Bloom 项目实战 (一) : 项目说明与配置
Android Compose Bloom 项目实战 (二) : 欢迎页
Android Compose Bloom 项目实战 (三) : 登录页
Android Compose Bloom 项目实战 (四) : 主页