Android Compose Bloom 项目实战 (三) : 登录页

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 项目实战 (四) : 主页