2024年已经过半了,我作为聋人独立开发者,我经常会时不时反思:自己这半年到底进步了多少?在这篇文章里,我分享一个用 Jetpack Compose、Material3和 Kotlin 语言实现使用Jetpack Compose、M3和Kotlin开发轮播图和列表功能。无论你有没有开发经验,相信这篇文章对你会非常有所帮助。
这个Demo为了解决应用中常见的 UI 需求是轮播图、列表和弹窗,使用 Jetpack Compose 和 M3 的组件,可以快速、高效编码现代化的 UI。
但是遗憾想要告诉大家,目前,Jetpack Compose 本身还没有现成的轮播图控件(,只能用Android原生实现-下篇会讲
在首页的 HomeScreen 中使用了 LazyRow 来实现横向滚动的轮播图,还展示了如何使用 M3 的组件创建卡片样式的分类项,自定义颜色、样式和阴影效果。
@OptIn( ExperimentalFoundationApi::class)
@Composable
fun HomeScreen() {
val categories = listOf("Nim", "Nim", "Nim", "Nim", "Nim", "Nim")
val grouped = listOf("Nim大标题", "Nim 中标题" , " Nim标题").groupBy { it[3] }
LazyColumn {
grouped.forEach {
stickyHeader {
Text(
text = it.value[0],
style = MaterialTheme.typography.headlineMedium,
color = MaterialTheme.colorScheme.primary,
modifier = Modifier.padding(16.dp)
)
LazyRow {
items(categories) { cat ->
BrowserItem(cat = cat, drawable = R.drawable.ic_launcher_foreground)
}
}
}
}
}
}
• LazyRow: 这是水平滚动的核心组件,通过它实现了左右滑动效果。它类似于传统的 RecyclerView,但用起来要简单很多
• stickyHeader: 它可以让大家 Card: 包装分类项,提供了一个带有阴影、边框的卡片样式。
• Icon 和 Text: 使用这些组件来显示图标和文字,简单直观。轻松实现分组列表的标题部分,像音乐应用中的不同分类一样。
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun BrowserItem(cat: String, drawable: Int) {
Card(
modifier = Modifier
.padding(16.dp)
.size(200.dp),
border = BorderStroke(2.dp, color = MaterialTheme.colorScheme.onSurfaceVariant),
colors = CardDefaults.cardColors(
containerColor = MaterialTheme.colorScheme.surface,
contentColor = MaterialTheme.colorScheme.onSurface
),
shape = MaterialTheme.shapes.medium,
elevation = CardDefaults.cardElevation(8.dp)
) {
Column(
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally,
modifier = Modifier.fillMaxSize()
) {
Text(
text = cat,
style = MaterialTheme.typography.bodyMedium,
color = MaterialTheme.colorScheme.onSurface
)
Spacer(modifier = Modifier.height(8.dp))
Icon(
painter = painterResource(id = drawable),
contentDescription = cat,
modifier = Modifier.size(64.dp),
tint = MaterialTheme.colorScheme.primary
)
}
}
}
@Preview(showBackground = true, widthDp = 700, heightDp = 1000)
@Composable
fun PreviewHomeScreen() {
HomeScreen()
}
@Preview(showBackground = true)
@Composable
fun PreviewBrowserItem() {
BrowserItem(cat = "Nim", drawable = R.drawable.ic_launcher_foreground)
}
在 SubscriptionScreen页面中展示了实现简单轮播图。
@Composable
fun SubscriptionScreen() {
Column(
modifier = Modifier
.fillMaxSize()
.padding(16.dp),
horizontalAlignment = Alignment.CenterHorizontally
) {
Text(
text = "Nim订阅页面",
style = MaterialTheme.typography.headlineMedium,
color = MaterialTheme.colorScheme.primary
)
Spacer(modifier = Modifier.height(16.dp))
// 轮播图的实现
CarouselView(
imageList = listOf(
R.drawable.a,
R.drawable.a,
R.drawable.a,
R.drawable.a,
R.drawable.a
)
)
}
}
@Composable
fun CarouselView(imageList: List<Int>) {
LazyRow(
modifier = Modifier
.fillMaxWidth()
.height(200.dp),
horizontalArrangement = Arrangement.spacedBy(16.dp)
) {
items(imageList) { imageResId ->
CarouselItem(imageResId = imageResId)
}
}
}
@Composable
fun CarouselItem(imageResId: Int) {
Image(
painter = painterResource(id = imageResId),
contentDescription = null,
modifier = Modifier
.size(150.dp)
.padding(8.dp)
)
}
@Preview(showBackground = true, widthDp = 850)
@Composable
fun PreviewSubscriptionScreen() {
SubscriptionScreen()
}
在MyScreen 页面,展示了如何实现带有点击事件的列表,在用户点击某个项目时弹出对话框(AlertDialog)。
@Composable
fun MyScreen() {
var showDialog by remember { mutableStateOf(false) }
var selectedItem by remember { mutableStateOf("") }
LazyColumn(
modifier = Modifier
.fillMaxSize()
.padding(16.dp),
verticalArrangement = Arrangement.spacedBy(8.dp)
) {
items(libraries) { lib ->
LibItem(lib = lib, onClick = {
selectedItem = lib.name
showDialog = true
})
}
}
if (showDialog) {
AlertDialog(
onDismissRequest = { showDialog = false },
confirmButton = {
TextButton(onClick = { showDialog = false }) {
Text("确定")
}
},
title = {
Text(text = "未开发")
},
text = {
Text(text = "你选择: $selectedItem")
}
)
}
}
• LazyColumn: 展示竖向的列表。
• AlertDialog: 通过 showDialog 这个布尔值来控制它的显示和关闭。当用户点击某个列表项时,触发弹窗。
@Composable
fun LibItem(lib: Lib, onClick: () -> Unit) {
Column {
Row(
modifier = Modifier
.fillMaxWidth()
.padding(vertical = 16.dp)
.clickable { onClick() },
horizontalArrangement = Arrangement.SpaceBetween
) {
Text(text = lib.name)
Icon(imageVector = Icons.Default.KeyboardArrowRight, contentDescription = "Arrow Right")
}
Divider(color = MaterialTheme.colorScheme.onSurface.copy(alpha = 0.2f))
}
}
• clickable: 用来处理用户点击事件,当用户点击某个项目时,通过 onClick 触发相应的逻辑。
• Row: 把文字和图标水平排列,在两端留有一定的间距,视觉上很整齐。
@Preview(showBackground = true)
@Composable
fun PreviewMyScreen() {
MyScreen()
}
通过本次Demo,使用 Jetpack Compose 和 M3 实现了常见的轮播图、列表和弹窗功能,展示了如何高效构建现代化 UI 界面,希望这篇文章帮助大家更好理解 Compose 的强大。
未完待续,下一篇介绍如何使用原生 AndroidView 实现类似功能,敬请期待。
有任何问题欢迎提问,感谢大家阅读 )
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。