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

桃扇骨 2023-10-09 15:12 40阅读 0赞

#### 1. 前言 ####

[上篇文章][Link 1] 我们实现了 Compose Bloom项目的开发页，这篇文章接着上文，来介绍登录页的开发。

![在这里插入图片描述][ad66beb1137c448fa7feec04b19df615.png]

#### 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`，内部的子布局会从左往右进行排布。  
效果如下所示  
![在这里插入图片描述][0d4626443acf4810918c44dd88abdfb4.png]

#### 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`风格的组件，看字面意思可知，是有一圈外边框的输入框。

效果如下所示  
![在这里插入图片描述][7471646d13464c36a65251fe1b441f1d.png]

#### 5. 自定义输入框样式 ####

我们可以通过自定义输入框样式，来实现和`OutlinedTextField`一样的效果  
首先，我们要知道`Compose`中，总共分为`4`层，每一层都可以单独使用，在不同维度提供能力支持。

<table> 
 <thead> 
  <tr> 
   <th>Compose模块</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>Material</td> 
   <td>此模块位于最上层，基于Material Design系统实现的各种Composable</td> 
  </tr> 
  <tr> 
   <td>Foundation</td> 
   <td>此模块为UI提供了一些基础的Composable，例如Row、Column、lazyColumn等布局类UI，以及特定手势识别等，这些基础Composable在很多平台都可以通用</td> 
  </tr> 
  <tr> 
   <td></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>UI</td> 
   <td>此模块构筑了上层Composable运行的基础，例如Composable的测量、布局、绘制、事件处理以及Modifier管理等</td> 
  </tr> 
  <tr> 
   <td>Runtime</td> 
   <td>此模块提供了基本的对UI树的管理能力，如果只需要Compose的树管理能力，而不需要其UI，则可以直接基于此层进行构建</td> 
  </tr> 
 </tbody> 
</table>

我们可以基于`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
    )

效果如下所示  
![在这里插入图片描述][b00c764f5dd84656917d1f10dc9ce38f.png]

#### 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)
    }

效果如下所示  
![在这里插入图片描述][fb6289b3839349d68a672f820d00c38f.png]

#### 8. 封装自定义View ####

如果看过[上一篇文章][Link 1]，就可以发现，这个按钮的样式，和上一篇文章中欢迎页的按钮样式是一样的。为了通用性，我们完全可以封装一个自定义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.小结 ####

至此，我们就完成了登录页面。[下一篇][Link 2]文章我们将来实现主页的逻辑。

Compose 项目实战 系列文章  
[Android Compose Bloom 项目实战 (一) : 项目说明与配置][Android Compose Bloom _ _ _]  
[Android Compose Bloom 项目实战 (二) : 欢迎页][Link 1]  
[Android Compose Bloom 项目实战 (三) : 登录页][Android Compose Bloom _ _ _ 1]  
[Android Compose Bloom 项目实战 (四) : 主页][Link 2]

[Link 1]: https://blog.csdn.net/EthanCo/article/details/128065337
[ad66beb1137c448fa7feec04b19df615.png]: https://img-blog.csdnimg.cn/ad66beb1137c448fa7feec04b19df615.png
[0d4626443acf4810918c44dd88abdfb4.png]: https://img-blog.csdnimg.cn/0d4626443acf4810918c44dd88abdfb4.png
[7471646d13464c36a65251fe1b441f1d.png]: https://img-blog.csdnimg.cn/7471646d13464c36a65251fe1b441f1d.png
[b00c764f5dd84656917d1f10dc9ce38f.png]: https://img-blog.csdnimg.cn/b00c764f5dd84656917d1f10dc9ce38f.png
[fb6289b3839349d68a672f820d00c38f.png]: https://img-blog.csdnimg.cn/fb6289b3839349d68a672f820d00c38f.png
[Link 2]: https://blog.csdn.net/EthanCo/article/details/128504793
[Android Compose Bloom _ _ _]: https://blog.csdn.net/EthanCo/article/details/127941371
[Android Compose Bloom _ _ _ 1]: https://blog.csdn.net/EthanCo/article/details/128166177