Android Compose Bloom 项目实战 (四) : 主页

原创 已于 2023-06-28 09:36:42 修改 · 2.3k 阅读 · 5 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
标签
#android #kotlin #开发语言
于 2023-02-19 13:18:05 首次发布
本文介绍了如何使用AndroidCompose开发主页界面，包括BottomBar的实现、搜索框的创建、横向和竖向列表的布局，以及Checkbox的展示。使用了Scaffold、BottomNavigationItem、OutlinedTextField、LazyRow和LazyColumn等组件。

1. 前言

上篇文章 我们实现了 Compose Bloom项目的开发页，这篇文章接着上文，来介绍主页的开发。

在这里插入图片描述

2. 分析页面布局

根据UI稿我们可知，这个页面有一个底部切换的BottomBar，还有一个搜索框，一个横向的列表以及一个竖向的列表。
在这里插入图片描述

3. 定义数据

首先先定义数据

data class ImageItem(val name: String, val resId: Int)

导航栏的数据

val navList = listOf(
    ImageItem("Home", R.drawable.ic_home),
    ImageItem("Favorites", R.drawable.ic_favorite_border),
    ImageItem("Profile", R.drawable.ic_account_circle),
    ImageItem("Cart", R.drawable.ic_shopping_cart)
)

植物的数据

val gardenList = listOf(
    ImageItem("Monstera", R.drawable.monstera),
    ImageItem("Aglaonema", R.drawable.aglaonema),
    ImageItem("Peace lily", R.drawable.peace_lily),
    ImageItem("Fiddle leaf", R.drawable.fiddle_leaf),
    ImageItem("Snake plant", R.drawable.snake_plant),
    ImageItem("Pothos", R.drawable.pothos),
)

主题集合的数据

val themeList = listOf(
    ImageItem("Desert chic", R.drawable.desert_chic),
    ImageItem("Tiny terrariums", R.drawable.tiny_terrariums),
    ImageItem("Jungle vibes", R.drawable.jungle_vibes),
    ImageItem("Easy care", R.drawable.easy_care),
    ImageItem("Statements", R.drawable.statements),
)

4. 实现底部Tab栏BottomBar

Scaffold是Android中的脚手架Scaffold，Compose 提供了大量基于 Material Design 的可组合项以及依赖项，旨在简化界面的构建。Scaffold 可以实现具有基本 Material Design 布局结构的界面，比如Drawer、FloatingActionButton 、 TopAppBar以及BottomBar

@Preview
@Composable
fun HomePage() {
    Scaffold(bottomBar = {
        BottomBar()
    }) {

    }
}

BottomBar里其实就是通过for循环navList，然后创建每一项的BottomNavigationItem
每个BottomNavigationItem里都包含一个icon和一个lable

@Preview(showBackground = true, backgroundColor = 0xFFFFFF)
@Composable
fun BottomBar() {
    BottomNavigation(
        modifier = Modifier
            .fillMaxWidth()
            .height(56.dp),
        backgroundColor = pink100,
    ) {
        navList.forEach {
            val isSelected = "Home" == it.name
            BottomNavigationItem(selected = isSelected, onClick = { }, icon = {
                Image(
                    painter = painterResource(id = it.resId),
                    contentDescription = "",
                    modifier = Modifier.size(24.dp),
                    colorFilter = ColorFilter.tint(
                        if (isSelected) gray else Color(
                            0xff757575
                        )
                    )
                )
            }, label = {
                Text(
                    text = it.name,
                    style = caption,
                    color = if (isSelected) gray else Color(0xff757575)
                )
            })
        }
    }
}

预览效果如下所示

在这里插入图片描述

5. 实现搜索框

搜索框其实就是OutlinedTextField，带边框的输入框，leadingIcon中传入Icon，用来显示搜索图标。
OutlinedTextField是material design包下的，说明它是个material design风格的组件

@Preview(showBackground = true)
@Composable
fun SearchBar() {
    val keyword = remember { mutableStateOf("") }
    Box(
        modifier = Modifier
            .height(96.dp)
            .padding(top = 40.dp)
    ) {
        OutlinedTextField(
            value = keyword.value, onValueChange = {
                keyword.value = it
            }, modifier = Modifier
                .fillMaxWidth()
                .padding(start = 16.dp, end = 16.dp),
            maxLines = 1,
            placeholder = { Text(text = "Search", style = MaterialTheme.typography.body1) },
            leadingIcon = {
                Icon(
                    imageVector = Icons.Outlined.Search,
                    contentDescription = null,
                    modifier = Modifier.size(18.dp)
                )
            }
        )
    }
}

OutlinedTextField针对样式进行了封装，我们直接用更底层的foundation包下的BasicTextField，也可以实现同样的效果

预览效果如下所示
在这里插入图片描述

6. 实现横向列表

首先实现Item

BloomRowTitle是标题

@Composable
private fun BloomRowTitle() {
    Text(
        text = "Browse themes",
        modifier = Modifier.padding(start = 16.dp, top = 16.dp, bottom = 6.dp),
        style = h1
    )
}

然后实现横向列表
这里就用到LazyRow这个组件了
LazyRow和LazyColumn都是列表组件，用来替代传统View体系中的Recyclerview
LazyRow和LazyColumn内部都是基于LazyList组件实现的(这是一个internal的内部组件，我们无法直接使用)
可以看到传参中的content是一个LazyListScope.()->Unit
使用方式如下所示

LazyRow {
	//添加一个Item
	item {
		Text("XXXXXXX")
	}
	//继续添加5个Item
	item(5) {
		Text("YYYYY"+it)
	}
	//继续添加一个List (等于添加了List.size个Item)
	item(myList){ data ->
		Text("$data.name $data.age")
	}
}

知道了怎么用后，再来看下在本项目中怎么使用
代码如下所示

@Composable
fun BloomRowList() {
    LazyRow(content = {
        items(themeList.size) {
            ThemeCard(themeList[it])
        }
    }, modifier = Modifier.padding(start = 10.dp, end = 10.dp, top = 3.dp))
}

ThemeCard是每一项的Item，实现如下
包含一个Box，一个Image，还有一个Text，最外层是一个Card，所以带有卡片阴影的效果

@Composable
fun ThemeCard(item: ImageItem) {
    Card(elevation = 5.dp, modifier = Modifier.padding(6.dp)) {
        Surface(
            color = white
        ) {
            Box(
                modifier = Modifier
                    .height(136.dp)
                    .width(136.dp)
            ) {
                Image(
                    painter = painterResource(id = item.resId),
                    contentDescription = null,
                    modifier = Modifier.height(96.dp),
                    contentScale = ContentScale.Crop
                )
                Text(
                    text = item.name,
                    style = h2,
                    overflow = TextOverflow.Ellipsis,
                    maxLines = 1,
                    modifier = Modifier
                        .align(Alignment.BottomStart)
                        .padding(start = 16.dp, end = 16.dp, bottom = 12.dp)
                        .fillMaxWidth()
                )
            }
        }
    }
}

进行组装

@Preview(showBackground = true, backgroundColor = 0xFFFFFF)
@Composable
fun BloomRowPreView() {
    Column {
        BloomRowTitle()
        BloomRowList()
    }
}

预览效果如下

在这里插入图片描述

7. 实现竖向的列表

首先实现Item

@Composable
fun BloomListTitle() {
    Box(
        modifier = Modifier
            .padding(16.dp)
            .fillMaxWidth(),
    ) {
        Text(
            text = "Design you home garden",
            modifier = Modifier.align(Alignment.CenterStart),
            style = h1,
        )
        Image(
            imageVector = Icons.Default.FilterList,
            contentDescription = null,
            modifier = Modifier.align(Alignment.CenterEnd),
            colorFilter = ColorFilter.tint(MaterialTheme.colors.onBackground)
        )
    }
}

然后实现竖向列表

@Composable
fun BloomList() {
    LazyColumn(content = {
        items(gardenList.size) {
            ItemGarden(it == 0, gardenList[it])
        }
    })
}

来实现具体的Item，包含一个Image、Checkbox、主标题和副标题，以及一条分隔线。
最外层用的一个Box布局进行包裹，通过fillMaxWidth使其宽度设为最大。

@Composable
fun ItemGarden(checked: Boolean, item: ImageItem) {
    Box(
        modifier = Modifier
            .fillMaxWidth()
            .padding(vertical = 8.dp, horizontal = 16.dp)
            .height(64.dp),
    ) {
        Image(
            painter = painterResource(id = item.resId),
            contentDescription = "",
            contentScale = ContentScale.Crop,
            modifier = Modifier
                .height(64.dp)
                .width(64.dp)
                .clip(shape = RoundedCornerShape(4.dp))
        )
        Column(modifier = Modifier.padding(start = 80.dp)) {
            Text(text = item.name, style = h2, modifier = Modifier.padding(top = 12.dp))
            Text(text = "This is a description", style = body1)
        }
        Checkbox(
            checked = checked,
            onCheckedChange = {},
            modifier = Modifier
                .align(Alignment.CenterEnd)
                .padding(end = 16.dp)
        )
        Divider(
            modifier = Modifier
                .padding(start = 72.dp, end = 16.dp)
                .align(Alignment.BottomStart)
        )
    }
}

这里的Checkbox暂时只是一个展示的用途，并无法让其真正进行点击
如果要让其可以点击，那么需要传入mutableStateOf给Checkbox，并在onCheckedChange回调的时候修改该mutableStateOf的值

var selectedby remember {
    mutableStateOf(true)
}

Checkbox(
    checked = selected,
    onCheckedChange = {
		selected = it
	},
    modifier = Modifier
        .align(Alignment.CenterEnd)
        .padding(end = 16.dp)
)

预览效果如下
在这里插入图片描述

8. 组装所有组件

这里我们使用Column竖向列表组装本文上述内容的组件

@Composable
fun HomePage() {
    Scaffold(bottomBar = {
        BottomBar()
    }) {
        Column {
            SearchBar()
            BloomRowTitle()
            BloomRowList()
            BloomListTitle()
            BloomList()
        }
    }
}

最终显示效果如下

在这里插入图片描述

9. 小结

至此，我们就完成了主页的UI效果，下一篇文章，我们将来处理Compose页面间的跳转

Compose 项目实战 系列文章
Android Compose Bloom 项目实战 (一) : 项目说明与配置
Android Compose Bloom 项目实战 (二) : 欢迎页
Android Compose Bloom 项目实战 (三) : 登录页
Android Compose Bloom 项目实战 (四) : 主页
Android Compose Bloom 项目实战 (五) : 使用Navigation实现页面跳转

本文源码下载 : ComposeBloom

android compose 从入门到精通 新手必备
06-02
android compose 从入门到精通 新手必备
Android Compose Bloom 项目实战 (一) : 项目说明与配置
朱豪凯的博客
11-20 3009
Bloom是谷歌 AndroidDevChallenge (Android 开发挑战赛) 中的一期活动，目的是为了推广Compose，非常适合用来练手，通过这个项目，我们可以很好的入门`Compose`。本文介绍了如何从零开始，开发这个Compose项目。
现代化 Android 开发：Jetpack Compose 最佳实践
1
07-17 1598
Compose 业务上能做的优化大体上就是这些了。总之我们就是我们要保持组件的颗粒度尽可能的小，容易变动的要独立出来，非常稳定的也要独立出来，尽量使用 Immutable 的数据结构。如此之后， Compose 的流畅度还是非常不错的。如果还觉得卡，那多半是因为你使用的是 Debug 包，Compose 会在 Debug 包加很多调试信息，会很影响其流畅度的。切换到 Release 包，可能丝滑感就出来了。为了帮助大家更好的熟知Jetpack Compose 这一套体系的知识点，
Jetpack Compose 构建现代 Android 界面实战
Sapphire521的博客
05-25 196
Jetpack Compose 构建现代 Android 界面实战
Android Compose Bloom 项目实战 (五) : 使用Navigation实现页面跳转
朱豪凯的博客
05-21 2652
上几篇文章我们分别实现了 Compose Bloom项目的各个页面，但并没有关联页面跳转，而本篇文章的任务就是实现各个页面见的跳转。
JetPack Compose 实战：打造一个 Compose 版本的「玩 Android
code8889的博客
03-17 1130
功能强大凭借对 Android 平台 API 的直接访问和对于 Material Design、深色主题、动画等的内置支持，创建精美的应用。我来补充一下我个人的理解打破了以往先声明布局，再绑定数据的模式，声明View的同时绑定数据，数据有更新，View也将自动更新，并通过diff差量算法来实现最小化更新原本我们一般需要一个xml来描述一个布局，另外通过Kotlin绑定数据，现在所有的布局描述和数据绑定都在Kotlin中完成由于不需要解析xml，所以性能更快，另外Compose重新设计了View。
Android Compose Bloom 项目实战 (二) : 欢迎页
朱豪凯的博客
11-27 2096
上一篇文章我们讲到了 Compose Bloom 项目开发之前的一些配置及沉浸式状态栏的修改。这篇文章接着上文，会介绍欢迎页的开发。
Android Compose UI实战练手----Google Bloom 主页实现（完结）
知识应该共享，创造才应收费
07-08 623
主页的页面比前面的欢迎页和登录页面要复杂得多，假设使用传统的view，即使用xml布局的方式，我们可能需要书写很多的代码，但是使用Compose UI，这一切都会变得很简单，有了前面的页面开发经验，我们拿到这个主页的页面时首先想到的第一步就是拆分页面。然后将拆分后的页面使用Compose UI中对应的组件来实现。
Unity PostProcessing Bloom在安卓环境下无法正常显示的坑
INoriEGOIST
07-08 6845
最近在项目过程中遇到了一个问题，本来在PC环境下调试好的特效使用了PostProcessing组件的Bloom效果，但是在切换了安卓环境后效果全部消失了，并且只能在Scene视图中看到有辉光效果在game视图中是没有的，我试了各种办法包括修改bloom参数，调整Bloom阈值到1以下虽然有一点点的辉光的感觉但是和预期效果完全不一致，在我对PostProcessing组件百般折磨后最后终于放弃了从组件上找问题，这时候我想到了一个问题:Bloom效果需要有HDR支持才能对显示色域内的像素进行正常的处理达到预期的
Android compose官方入门教程，基础到实战，快速通关
m0_59162559的博客
10-27 5616
Compose是Android团队与JetBrain大力推动的新一代UI框架。2021年7月 Android compose 1.0正式版本的诞生，这意味着Compose即将进入生产环节。 国际app巨头Twitter首当其冲，其他国内外企业和程序员的学习热情也都非常高涨，目前国内以字节跳动为首的大小厂也都开始尝试在新页面上使用Compose。 声明式 UI、更简单的自定义、实时且带交互的预览功能、更强的性能和功能...这些优势和特点让Compose飞速超越传统写法的「命令式 UI」的热度，成为程序员们
JetPack Compose 实战：打造一个 Compose 版本的「玩 Android」
2301_77118221的博客
04-01 1341
一线互联网Android面试题含详解（初级到高级专题）这些题目是今年群友去腾讯、百度、小米、乐视、美团、58、猎豹、360、新浪、搜狐等一线互联网公司面试被问到的题目。并且大多数都整理了答案，熟悉这些知识点会大大增加通过前两轮技术面试的几率如果设置门槛，很多开发者朋友会因此错过这套高级架构资料，错过提升成为架构师的可能。这就失去了我们的初衷；让更多人都能通过高效高质量的学习，提升自己的技术和格局，升职加薪。最后送给大家一句话，望共勉，永远不要放弃自己的梦想和追求；
Android开发实战班 - 现代 UI 开发之自定义 Compose 组件
知道者
11-20 1688
代码复用通过创建自定义组件，可以将常用的 UI 逻辑封装起来，避免重复代码，提高代码复用性。简化 UI 逻辑将复杂的 UI 逻辑封装到自定义组件中，可以简化调用代码，使代码更简洁易懂。一致性自定义组件可以保证应用界面的一致性，例如统一的按钮样式、输入框样式等。模块化自定义组件可以将 UI 拆分成更小的模块，便于维护和测试。创建自定义 Compose 组件非常简单，只需定义一个带有注解的函数即可。) {Text(参数说明text: 按钮显示的文本。onClick: 按钮点击事件回调。
Jetpack Compose实战教程（三）
xiaoliluote的专栏
06-15 1043
第三章 实现一个带接口数据请求的界面。
Android Compose搜索框实现
简单记录工作和学习
09-04 1325
这个搜索框用Compose实现起来看上去有点嵌套地狱，主要是还不熟悉控件里面的属性
Android Compose Bloom 项目实战 (三) : 登录页
朱豪凯的博客
12-03 1358
上篇文章我们实现了Android Compose Bloom项目的开发页，这篇文章接着上文，来介绍登录页的开发。
【亲测免费】 Bloom 开源项目常见问题解决方案
gitblog_00626的博客
01-17 353
Bloom 开源项目常见问题解决方案 Bloom 是一个用于在 Android 视图中显示爆炸效果的开源库，它可以通过粒子动画的形式为任何视图添加爆炸效果。该项目主要使用 Java 编程语言。 新手常见问题及解决步骤 问题一：如何将 Bloom 集成到 Android 项目中？ 解决步骤： 在项目的 build.gradle 文件中，确保已经添加了 JCenter 或者 MavenCentral...
Bloom 项目使用教程
gitblog_00090的博客
06-19 383
Bloom 项目使用教程 1. 项目的目录结构及介绍 Bloom/ ├── apks/ ├── bloom/ ├── gradle/wrapper/ ├── sample/ ├── screenshots/ ├── .gitignore ├── LICENSE ├── README.md ├── README_CN.md ├── build.gradle ├── gradle.properties...
Bloom：为你的应用增添绚丽粒子动画
gitblog_00992的博客
09-10 505
Bloom：为你的应用增添绚丽粒子动画 项目介绍 Bloom 是一个开源的Android库，专注于为任何View添加炫酷的粒子动画效果。无论你是想为按钮、图片还是其他UI元素增添动态效果，Bloom都能轻松实现。通过简单的API调用，你可以在应用中轻松集成粒子动画，提升用户体验。 项目技术分析 技术栈 Android SDK：基于Android平台开发，支持API 11及以上版本。 粒子系统：使...
实战Compose——做个简洁却不简单的星球打卡App
m0_56144365的博客
05-06 1119
Focus Focus是一款帮助你集中的app——为自己的目标建立星球，将时间投入在上面。花在星球上的每一分钟都会被记录，每颗星球可以定制颜色与外观。为了贯彻简单干净不让人分心的设计理念，app采用白灰为主色调。为了不使界面显得单调，所以增加了不少的动画。 UI使用Compose实现，采用了MVI架构，涉及框架包括Navigation,Hilt,Room,Flow 预览 先看看目前的所有功能总的预览吧，使用流程主要就是： 创建星球界面设置星球名字，打卡时间和详细描述 星球列表界面选中要打卡的星球 主界
Lottie Android：设计师交付动画，开发直接用
最新发布
pythonpioneer的博客
06-21 221
Lottie Android是由Airbnb开源的高星动画库，它通过解析After Effects导出的JSON文件，实现设计师与开发者无缝协作。支持Android、iOS、Web等多平台，一份动画资源全端通用。开发者只需简单集成，即可加载播放设计师制作的动画，完美还原效果。Lottie支持大多数AE特性，包括关键帧、遮罩、混合模式等，已广泛应用于启动页、交互动效等场景。相比传统实现方式，Lottie具有体积小、跨平台一致、设计开发高效协同等优势，目前由Airbnb团队持续维护，社区活跃度高。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

氦客

你的鼓励是我创作最大的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值