1.概述

在之前的章节中咱们现已介绍了怎么完结Google Bloom练手项目的欢迎页，本文介绍怎么运用Compose UI完结登录页，登录页运用传统的View去开发的时候需求先去运用XML定义好布局界面，然后在Activity中去加载布局界面，最终拿到对应的输入框ID，按钮ID等去完结登录功能，但是运用Compose UI来完结这些就显得很简略，咱们只需求运用Compose UI 的相关组件依据Compose提供的布局组件，组合到一同就能够了，最首要的是拆分页面，让其分红不同的小组件，然后分别用Compose UI完结这些组件，最终组合成界面。

2.页面展现

1.1 亮色主题

Android Compose UI实战练手----Google Bloom登录页

1.2暗色主题

Android Compose UI实战练手----Google Bloom登录页

上面的图片展现的便是咱们的登录页面，首要是通过输入邮箱地址和暗码来进行登录，这儿做的是一个演示，因为要完结一个真正的登录模块还涉及到很多，比方手机号登录，验证码登录，忘记暗码，注册等功能，这儿仅展现简略的账号暗码登录界面。首要目的是熟悉Compose UI的运用

3.登录页面拆分以及编码完结

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

3.1 登录页面拆分

Android Compose UI实战练手----Google Bloom登录页

如上图所示，咱们拆分完界面发现，能够运用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两部分：

Android Compose UI实战练手----Google Bloom登录页
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源码地址