Compose 打造一个Home页面

一般的APP首页都是由多个Tab组成。在Compose中，要实现这个会变得异常的简单，这个得益于Compose自带的组合函数功能。下面是轻松打造一个Home页面的过程。

BottomNavigationView的实现

由于Compose布局的组合化的灵活。这里直接实现一个 Image +Text的Tab，通过遍历数组进行生成即可。拆分步骤如下：

一个横向布局，嵌套多个竖向Tab
Tab具备的信息：图片（选中和未选中）、文本
每一个Tab点击的回调：tag->Unit

模型

data class TabModel(val tagTag: String,val tabName: Int,val normalIcon: Int,val selectedIcon: Int
)

主体代码

@Preview(showBackground = true)
@Composable
fun TabView(@PreviewParameter(TabDataSourceMock::class) tabSource: Array<TabModel>,tagCallback: ((String) -> Unit)?
) {Row(modifier = Modifier.fillMaxWidth().shadow(4.dp, RectangleShape, false).wrapContentHeight(Alignment.CenterVertically).background(Color.White)) {val imageModifier = Modifier.padding(0.dp, 8.dp, 0.dp, 0.dp)val tabModifier = Modifier.padding(0.dp, 0.dp, 0.dp, 5.dp)val selectIndex = rememberSaveable {mutableStateOf(0)}tabSource.forEachIndexed { index, currentModel ->Column(modifier = Modifier.weight(1F, true).clickable {selectIndex.value = indextagCallback?.invoke(currentModel.tagTag)},horizontalAlignment = Alignment.CenterHorizontally,verticalArrangement = Arrangement.Center,) {Image(painter = if (index == selectIndex.value) painterResource(id = currentModel.selectedIcon) elsepainterResource(id = currentModel.normalIcon),contentDescription = stringResource(id = currentModel.tabName),modifier = imageModifier)Text(stringResource(id = currentModel.tabName),modifier = tabModifier,textAlign = TextAlign.Center,fontSize = 12.sp,color = if (index == selectIndex.value) Color(0xFF07C160) else Color(0xFFAFB2B0),)}}}
}

模拟数据

class TabDataSourceMock : PreviewParameterProvider<Array<TabModel>> {override val values: Sequence<Array<TabModel>>get() = listOf<Array<TabModel>>(tabDataAll(),tabDataWithoutMall()).asSequence()
}fun tabDataAll(): Array<TabModel> {return arrayOf<TabModel>(TabModel(TabTags.TAG_HOME,R.string.tab_home,R.drawable.icon_home_normal,R.drawable.icon_home_selected),TabModel(TabTags.TAG_SMART,R.string.tab_smart,R.drawable.icon_smart_normal,R.drawable.icon_smart_selected),TabModel(TabTags.TAG_MALL,R.string.tab_mall,R.drawable.icon_mall_normal,R.drawable.icon_mall_selected),TabModel(TabTags.TAG_MORE,R.string.tab_more,R.drawable.icon_me_normal,R.drawable.icon_me_selected))
}fun tabDataWithoutMall(): Array<TabModel> {return arrayOf<TabModel>(TabModel(TabTags.TAG_HOME,R.string.tab_home,R.drawable.icon_home_normal,R.drawable.icon_home_selected),TabModel(TabTags.TAG_SMART,R.string.tab_smart,R.drawable.icon_smart_normal,R.drawable.icon_smart_selected),TabModel(TabTags.TAG_MORE,R.string.tab_more,R.drawable.icon_me_normal,R.drawable.icon_me_selected))
}
class TabTags {companion object {const val TAG_HOME = "home"const val TAG_SMART = "smart"const val TAG_MALL = "mall"const val TAG_MORE = "more"}
}

预览如下

这里为什么有两个预览呢？主要是在模拟函数返回了两个source。

开发中遇到的问题

资源引用

引用字符串 stringResource(id = currentModel.tabName)
引用图片资源 painterResource（id = currentModel.selectedIcon）

预览函数

PreviewParameterProvider<Array<TabModel>> 这个函数正确使用方式如下

@Preview(showBackground = true)
@Composable
fun TabView(@PreviewParameter(TabDataSourceMock::class) tabSource: Array<TabModel>,tagCallback: ((String) -> Unit)?
)

模型抽象的错误

开始时，我对TabModel的抽象是直接使用了 Painter 导致了一个错误 Functions which invoke @Composable functions must be marked with the @Composable annotation
这个错误已经非常明显，所以不能在非@Composable 函数下。尽可能抽象出不依赖Compose的model。

Compose的便捷

通过这个简单的例子发现。

简约到极致。 Compose的便捷不单单在简约，而且特别省时间，开发效率可以说是翻了好几倍。你想想，如果之前要实现这个，你要多少的封装，可能还要使用到Fragment的管理。真不敢想象。
依赖减少。 开发这个首页居然可以0依赖，没有什么第三方控件的引入，也没有去找控件的烦恼。这里需要注意的是，很多人担心Compose没有那么多开源框架，其实这个担心是多余的。因为Compose简化了布局的实现，已经不需要那些什么约束布局和线性布局的思路了，也不需要什么UI库，万物皆组合。

Compose 打造一个Home页面相关推荐

(实战)Vue + Koa从零打造一个H5页面可视化编辑器——Quark-h5
作者:围的围 https://juejin.im/post/5dc81428e51d4523632ee793 前言想必你一定使用过易企秀或百度H5等微场景生成工具制作过炫酷的h5页面,除了感叹其神奇 ...
Vue + element从零打造一个H5页面可视化编辑器——pl-drag-template
pl-drag-template Github地址:https://github.com/livelyPeng/pl-drag-template 前言想必你一定使用过易企秀或百度H5等微场景生成工具 ...
用Jetpack Compose做一个俄罗斯方块游戏机
本文介绍如何使用Jetpack Compose打造一个经典版的俄罗斯方块游戏. 玩过上面这种游戏机的朋友应该会对本文内容感到亲切,废话不多说,先看东西: 1. 为什么Compose适合做游戏? 通常一 ...
bootstrap设计登录页面_前端小白如何在10分钟内打造一个爆款Web响应式登录界面？...
对于前端小白(例如:专注后端代码N年的攻城狮),自己编写一个漂亮的Web登录页面似乎在设计上有些捉襟见肘,不懂UI设计,颜色搭配极度的混乱(主色,辅助色,配色,色彩渐变,动画效果等等,看起来一堆乱七八 ...
Compose 正式发布，来打造一个 Flappy Bird! | 开发者说·DTalk
本文原作者: 小虾米君,原文发布于: TechMerger https://mp.weixin.qq.com/s/Hpd2NF0hOw4xOo3wVb_VFg 之前看到 fun 神用 Compose ...
vue.js+socket.io打造一个好玩的新闻社区
title: Socket.io+vue打造新闻社区 date: 2017-06-12 20:19:05 tags: [vue.js,javascript,socket.io] vue2.0 + so ...
使用CSS3悬停效果打造不同的页面版式
CSS3 为 Web 开发带来了非常令人兴奋的变化,特别是 CSS 3D 转换.动画等特性的支持,可以轻松的创建很酷的 Web 效果. CSS3新增添了实现动画效果的新功能,通过本文,你可以对这些新功 ...
mysql 分词搜索_打造一个蓝奏云网盘搜索引擎
目前存在的网盘搜索引擎好多,可以归于两类: 1.搜索引擎索引 2.爬虫入库索引第一种:搜索引擎索引这种索引方式是目前比较主流的方式,依靠百度,谷歌建立索引链接,当用户进行搜索的时候,网盘搜索引擎会 ...
使用jquery打造一个动态的预览产品颜色效果
在浏览一些电子商务网站的时候,选择一件产品的时候,我们经常会看到点击衣服的颜色,同一件衣服的颜色就会切换,让我们觉得真是比较有意思,这样做的效果给用户的体验比较好,今天就给大家分享一下这种效果的实现原 ...

Compose 打造一个Home页面

Compose 打造一个Home页面

BottomNavigationView的实现

模型

主体代码

模拟数据

预览如下

开发中遇到的问题

资源引用

预览函数

模型抽象的错误

Compose的便捷

Compose 打造一个Home页面相关推荐

最新文章

热门文章