Android Compose Bloom 项目实战 (一) : 项目说明与配置

谁践踏了优雅 2023-10-09 15:09 32阅读 0赞

### 1. 项目介绍 ###

`Bloom`是谷歌 `AndroidDevChallenge` (Android 开发挑战赛) 中的一期活动，目的是为了推广`Compose`，非常适合用来练手，通过这个项目，我们可以很好的入门`Compose`。本文介绍了如何从零开始，开发这个Compose项目。

设计稿和素材的下载地址 :  
[Android Compose Bloom 素材][Android Compose Bloom]  
其中，有个`Bloom.pdf`，里面是`Bloom`项目所需的UI设计稿。

我们要实现的效果如下所示，可以看到，一共有三个页面 : 欢迎页、登录页和主页。  
![在这里插入图片描述][2d50aea2816448a9a8027d2c5b9d2204.png]  
当然也可以直接运行项目Demo的源码，看一下效果 : [ComposeBloom源码地址][ComposeBloom]

### 2. 新建项目 ###

首先，我们需要新建一个`Compose`项目，这里选择`Empty Compose Activity`

![在这里插入图片描述][b1e6807f4de04cb8abc223ac0aa8f6c1.png]  
这里项目名取为`Bloom`，包名我取为`com.heiko.bloom`

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

### 3. 配置素材 ###

看`Bloom PDF`的第一页，有我们所需要的素材  
![在这里插入图片描述][a89df7e1ea2c4163ae522dfae66b991b.png]

#### 3.1 配置颜色、字体和形状 ####

##### 3.1.1 配置颜色 #####

我们打开`com.heiko.bloom.ui.theme`包名下的`Color.kt`，复制如下内容

package com.heiko.bloom.ui.theme
    
    import androidx.compose.ui.graphics.Color
    
    val Purple200 = Color(0xFFBB86FC)
    val Purple500 = Color(0xFF6200EE)
    val Purple700 = Color(0xFF3700B3)
    val Teal200 = Color(0xFF03DAC5)
    
    val pink100 = Color(0xFFFFF1F1)
    val pink900 = Color(0xFF3F2C2C)
    val white = Color(0xFFFFFFFF)
    val white850 = Color(0xD9FFFFFF)
    val gray = Color(0xFF232323)

##### 3.1.2 配置字体 #####

在`res`文件夹下新建`font`文件夹，将这几个字体放到该文件夹下  
![在这里插入图片描述][61be290c15dd4512aa6a4ee405fc2831.png]

然后，打开`com.heiko.bloom.ui.theme`包名下的`Type.kt`，复制如下内容

package com.heiko.bloom.ui.theme
    
    import androidx.compose.material.Typography
    import androidx.compose.ui.text.TextStyle
    import androidx.compose.ui.text.android.style.LetterSpacingSpanEm
    import androidx.compose.ui.text.font.Font
    import androidx.compose.ui.text.font.FontFamily
    import androidx.compose.ui.text.font.FontWeight
    import androidx.compose.ui.unit.sp
    import com.heiko.bloom.R
    
    // Set of Material typography styles to start with
    val Typography = Typography(
        body1 = TextStyle(
            fontFamily = FontFamily.Default, fontWeight = FontWeight.Normal, fontSize = 16.sp
        )
    )
    
    val nunitoSansFamily = FontFamily(
        Font(R.font.nunitosans_light, FontWeight.Light),
        Font(R.font.nunitosans_semibold, FontWeight.SemiBold),
        Font(R.font.nunitosans_bold, FontWeight.Bold)
    )
    
    val h1 = TextStyle(
        fontSize = 18.sp, fontFamily = nunitoSansFamily, fontWeight = FontWeight.Bold
    )
    
    val h2 = TextStyle(
        fontSize = 14.sp,
        fontFamily = nunitoSansFamily,
        letterSpacing = 0.15.sp,
        fontWeight = FontWeight.Bold
    )
    
    val subtitle1 = TextStyle(
        fontSize = 16.sp, fontFamily = nunitoSansFamily, fontWeight = FontWeight.Light
    )
    
    val body1 = TextStyle(
        fontSize = 14.sp, fontFamily = nunitoSansFamily, fontWeight = FontWeight.Light
    )
    
    val body2 = TextStyle(
        fontSize = 12.sp, fontFamily = nunitoSansFamily, fontWeight = FontWeight.Light
    )
    
    val button = TextStyle(
        fontSize = 14.sp, fontFamily = nunitoSansFamily, fontWeight = FontWeight.SemiBold
    )
    
    val caption = TextStyle(
        fontSize = 12.sp, fontFamily = nunitoSansFamily, fontWeight = FontWeight.SemiBold
    )

##### 3.1.3 配置形状 #####

打开`com.heiko.bloom.ui.theme`包名下的`Shape.kt`，复制如下内容

package com.heiko.bloom.ui.theme
    
    import androidx.compose.foundation.shape.RoundedCornerShape
    import androidx.compose.material.Shapes
    import androidx.compose.ui.unit.dp
    
    val Shapes = Shapes(
        small = RoundedCornerShape(4.dp),
        medium = RoundedCornerShape(4.dp),
        large = RoundedCornerShape(0.dp)
    )
    
    val small = RoundedCornerShape(4.dp)
    val medium = RoundedCornerShape(24.dp)

#### 3.2 添加资源文件 ####

复制矢量图片到`drawable`文件夹下  
![在这里插入图片描述][05a13492952c4baa94bb5c746f5a6891.png]  
复制`JPEG`图片到`drawable-xxhdpi`文件夹下  
![在这里插入图片描述][6fba95c0e3cd4b6dac49b18754f344ff.png]

#### 3.3 配置沉浸式状态栏 ####

如果不配置这几行代码，状态栏会有特定颜色，这和UI稿不一致，所以我们需要将配置下沉浸式状态栏。

![在这里插入图片描述][07dee997627349d0b1aadedcbb044ca6.jpeg]  
在`MainActivity`的`onCreate`方法中的最前面(位于`setContent{}`前面)，添加如下代码

//DecorView不再为SystemUI(状态栏和导航栏等)预留Padding
    WindowCompat.setDecorFitsSystemWindows(window, false)
    val controller = WindowCompat.getInsetsController(window, window.decorView)
    //状态栏设为亮色 (状态栏的文字、图标颜色为暗色)
    controller?.isAppearanceLightStatusBars = true

在`style.xml`中添加修改主题，并配置到`AndroidManifest.xml`中

AndroidManifest.xml

我们再运行项目  
![在这里插入图片描述][382a1940be46460f8c64f6e9cda0e104.jpeg]  
可以看到，状态栏已经是透明色了，而且`Hello Android` 这个`Text`的位置已经到了最顶上，和状态栏重叠了。这样我们的目的就达到了，我们可以将图片背景之类的设置在整个页面中，状态栏和其他布局融为一体，达到沉浸式状态的效果。

至此，我们就完成了项目的配置，接下来，我们就要来开发欢迎页了，这个会在[下一篇文章][Link 1]中进行介绍

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

[Android Compose Bloom]: https://gitee.com/EthanCo/bloom-asset
[2d50aea2816448a9a8027d2c5b9d2204.png]: https://img-blog.csdnimg.cn/2d50aea2816448a9a8027d2c5b9d2204.png
[ComposeBloom]: https://gitee.com/EthanCo/compose-bloom
[b1e6807f4de04cb8abc223ac0aa8f6c1.png]: https://img-blog.csdnimg.cn/b1e6807f4de04cb8abc223ac0aa8f6c1.png
[8f94aa2c6639448bb08b1c7122c6aa80.png]: https://img-blog.csdnimg.cn/8f94aa2c6639448bb08b1c7122c6aa80.png
[a89df7e1ea2c4163ae522dfae66b991b.png]: https://img-blog.csdnimg.cn/a89df7e1ea2c4163ae522dfae66b991b.png
[61be290c15dd4512aa6a4ee405fc2831.png]: https://img-blog.csdnimg.cn/61be290c15dd4512aa6a4ee405fc2831.png
[05a13492952c4baa94bb5c746f5a6891.png]: https://img-blog.csdnimg.cn/05a13492952c4baa94bb5c746f5a6891.png
[6fba95c0e3cd4b6dac49b18754f344ff.png]: https://img-blog.csdnimg.cn/6fba95c0e3cd4b6dac49b18754f344ff.png
[07dee997627349d0b1aadedcbb044ca6.jpeg]: https://img-blog.csdnimg.cn/07dee997627349d0b1aadedcbb044ca6.jpeg
[382a1940be46460f8c64f6e9cda0e104.jpeg]: https://img-blog.csdnimg.cn/382a1940be46460f8c64f6e9cda0e104.jpeg
[Link 1]: https://blog.csdn.net/EthanCo/article/details/128065337
[Android Compose Bloom _ _ _]: https://blog.csdn.net/EthanCo/article/details/127941371
[Android Compose Bloom _ _ _ 1]: https://blog.csdn.net/EthanCo/article/details/128166177
[Android Compose Bloom _ _ _ 2]: https://blog.csdn.net/EthanCo/article/details/128504793