1.概述

在之前的章节中我们已经介绍了如何实现Google Bloom练手项目的欢迎页，本文介绍如何使用Compose UI实现登录页，登录页使用传统的View去开发的时候需要先去使用XML定义好布局界面，然后在Activity中去加载布局界面，最后拿到对应的输入框ID，按钮ID等去实现登录功能，但是使用Compose UI来实现这些就显得很简单，我们只需要使用Compose UI 的相关组件根据Compose提供的布局组件，组合到一起就可以了，最主要的是拆分页面，让其分成不同的小组件，然后分别用Compose UI实现这些组件，最后组合成界面。

2.页面展示

1.1 亮色主题

1.2暗色主题

上面的图片展示的就是我们的登录页面，主要是通过输入邮箱地址和密码来进行登录，这里做的是一个演示，因为要完成一个真正的登录模块还涉及到很多，比如手机号登录，验证码登录，忘记密码，注册等功能，这里仅展示简单的账号密码登录界面。主要目的是熟悉Compose UI的使用

3.登录页面拆分以及编码实现

当我们要编写一个界面时，首先要做的就是做页面的拆分，将页面拆分成一个个的小组件,然后分别编码去实现这些小组件，有些组件例如底部的导航栏啥的分离出来还可以重复使用，所以能做到合理的拆分页面也是很重要的。

3.1 登录页面拆分

如上图所示，我们拆分完界面发现，可以使用Column组件将我们拆分的子组件堆叠起来就可以了。

3.2 编码实现

在上面我们拆分完登录页面后，接下来就是编码实现了，从拆分的结果中我们可以很轻易的想到，使用一个Column组件将这些子组件堆叠起来，然后根据设计稿添加适当的边距就可以了，代码如下：

3.2.1 LoginPage

这个方法主要是将其他的子组件使用Column组件堆叠到一起形成整个登录页面。

@Composable
fun LoginPage() {
    Column(
        modifier =
        Modifier
            .fillMaxSize()
            .background(MaterialTheme.colors.background)
            .padding(horizontal = 16.dp)
    ) {
        LoginTitle()
        LoginInputBox()
        LoginHintWithUnderLine();
        LoginButton()
    }
}

3.2.2 LoginTitle

这个组件是为了展示登录页面的标题的，从设计稿中可以知道，LoginTitle的文本基线距离顶部184dp,文本基线距离底部16dp，我们可以使用paddingFromBaseline进行设置。代码如下：

@Composable
fun LoginTitle() {
    Text(
        text = "Log in with email",
        modifier = Modifier
            .fillMaxWidth()
            .paddingFromBaseline(
                top = 184.dp,
                bottom = 16.dp
            ),
        style = MaterialTheme.typography.h1,
        color = MaterialTheme.colors.primary,
        textAlign = TextAlign.Center
    )
}

3.2.3 LoginInoutBox

这个组件时两个文本输入框的堆叠，我们可以使用OutlineTextField予以实现，因为两个输入框的代码大部分都是一样的，所以我们可以提取一个公共的组件LoginTextField,调用的时候传入Placeholder即可，代码如下所示：

@Composable
fun LoginInputBox() {
    Column {
        LoginTextField(placeHolder = "Email address")
        Spacer(modifier = Modifier.height(8.dp))
        LoginTextField(placeHolder = "Password(8+ Characters)")
    }
}

@Composable
fun LoginTextField(placeHolder: String) {
    OutlinedTextField(value = "", onValueChange = {},
        modifier = Modifier
            .fillMaxWidth()
            .height(56.dp)
            .clip(MaterialTheme.shapes.small)
            .border(1.dp, MaterialTheme.colors.primary),
        placeholder = {
            Text(
                text = placeHolder,
                style = MaterialTheme.typography.body1,
                color = MaterialTheme.colors.primary
            )
        }
    )
}

3.2.4 LoginHintWithUnderLine

这个组件比较麻烦一点，虽然Text组件本身支持为文本串添加下划线，但并不支持仅对文本中具体某几个单词添加下划线，所以需要我们自己自定义下Composable组件，我们可以把这个组件分为TopText与BottomText两部分： TopText 可以看作时对整行单词进行两端对齐，而BottomText 则看作是居中对齐，我们只需要将这两部分组合即可：

@Composable
fun LoginHintWithUnderLine() {
    Column(modifier = Modifier.paddingFromBaseline(top = 24.dp, bottom = 16.dp)) {
        TopText()
        BottomText()
    }
}

TopText中需要使用到Row组件并设置两端对齐，然后将句子分词，对每个单词创建出对应的Text组件添加到Row中，然后在需要带下划线的单词中单独插入Row组件里，代码如下：

@Composable
fun TopText() {
    Row(
        modifier = Modifier.fillMaxWidth(),
        horizontalArrangement = Arrangement.SpaceBetween //设置两端对齐
    ) {
        val keyWorldPre = "By Clicking below you agree to our".split(" ")
        val keyWorldPost = "and consent".split(" ")

        for (word in keyWorldPre) {
            Text(
                text = word,
                style = MaterialTheme.typography.body2,
                color = MaterialTheme.colors.primary
            )
        }

        Text(
            text = "Terms of Use",
            style = MaterialTheme.typography.body2,
            color = MaterialTheme.colors.primary,
            textDecoration = TextDecoration.Underline
        )

        for (word in keyWorldPost) {
            Text(
                text = word,
                style = MaterialTheme.typography.body2,
                color = MaterialTheme.colors.primary
            )
        }
    }
}

BottomText是一个居中对齐的文本，实现起来很简单，代码如下：

@Composable
fun BottomText() {
    Row(
        modifier = Modifier.fillMaxWidth(),
        horizontalArrangement = Arrangement.Center
    ) {
        Text(
            text = " to Our",
            style = MaterialTheme.typography.body2,
            color = MaterialTheme.colors.primary
        )

        Text(
            text = "Privacy policy.",
            style = MaterialTheme.typography.body2,
            color = MaterialTheme.colors.primary
        )
    }
}

这样LoginHintWithUnderLine组件就完成了，接下来看登录按钮组件

3.2.5 LoginButton

LoginButton组件实际上就是一个按钮，实现起来也很简单，不多赘述，代码如下：

@Composable
fun LoginButton(){
    Button(onClick = { /*TODO*/ },
    modifier = Modifier
        .height(48.dp)
        .fillMaxWidth()
        .clip(MaterialTheme.shapes.medium),
        colors = ButtonDefaults.buttonColors(MaterialTheme.colors.onBackground)){
        Text(text = "Log in", style = MaterialTheme.typography.button, 
        color = MaterialTheme.colors.onPrimary)
    }
}

至此一个登录页面就完成了，这里只是一个简单的登录界面演示，主要是为了熟悉如何使用ComposeUI编写Android页面。

4.源码地址

整个项目的源码已经上传到Github，刚兴趣的小伙伴欢迎下载，提交新的Compose页面。下一篇博客我们将会介绍Home主页的编写，敬请期待。 GitHub源码地址