Android - Jetpack Compose个人开源项目

3,865 阅读4分钟

项目介绍

分享一个Jetpack Compose开发的安卓项目:Kreedz,项目比较简单,非常适合看了Compose文档想要实战练习的开发者。简单介绍一下主要功能,有一个整体的认识再看项目会更容易理解。

App的数据来自Kreedz这个网站,这是一个保存cs1.6游戏地图,以及地图最快纪录(即从起点到达终点最快的时间)的网站。

玩家可以在本地游戏中尝试打破某个地图的纪录,成功之后可以把本地录制的文件上传到该网站,通过审核之后,该网站会根据当前收录的新纪录,选择一个合适的时间点发布一个新闻,新闻中会列出最新破纪录的玩家,地图以及时间。关键词:地图,地图纪录,玩家。

考虑到这是一个主要帮助开发者入门Compose的项目,所以不会用到过重的库,例如HiltKoinNavigation等。

Compose相关

这一节,简单介绍项目一些场景,都是和Compose相关的。

日期选择器

项目中有一个场景是可以根据日期查看历史上不同时间点的排行榜,这里用到了作者的一个库:compose-wheel-picker,有兴趣的读者可以前往查看,实现效果如下:

录屏2024-11-19 17.20.57.gif

Pager切换加载

在传统View中,我们一般使用ViewPager或者ViewPager2,Compose中横向使用的是HorizontalPager

就控件本身而言其实没有什么可单独介绍的,实际使用时为了更流畅的滚动一般会等待滑动切换完成之后进行数据加载绑定,而不是边切换边加载绑定,如果你在使用该控件时遇到滑动卡顿的问题,或许这个场景对你一些参考价值。

录屏2024-11-19 15.58.00.gif

搜索

搜索是App中比较常见的功能,项目中有一个场景是:显示所有地图和地图的纪录,可以搜索关键字定位自己感兴趣的地图,通过这个场景,可以了解到在Compose中如何结合Flow,实现多关键字搜索,并将匹配到文字着色,效果如下:

录屏2024-11-19 14.26.21.gif

Paging3

项目中有个一个类似聊天室的功能,它支持分页,演示了Compose和Paging3如何结合使用。

原始数据是一个普通的json列表,并没有按日期分组,项目中演示了Paging3中,如何将数据动态进行按日期分组,以及Paging3如何修改某一项数据,例如截图中的第一项内容,原本是有文字的,删除成功之后,本地直接修改为<deleted>而不用刷新接口(刷新接口后返回的内容也是(<deleted>)

image.png

列表Sticky

除了普通的地图时间纪录,还有一种跳远纪录,类似现实运动会中的跳远,列出当前各种跳远类型排行前十的玩家,和现实类似,现实中分跳远,三级跳远等,只不过游戏中的跳远方式更多,名称不同而已。

通过这个场景,你可以了解到在Compose中列表如何实现粘性效果,列表如何配合标题栏实现嵌套滚动,以及列表定位。

录屏2024-11-19 15.44.42.gif

非Compose相关

这一节,简单介绍一些非Compose的场景,主要是协程异步相关的问题。

Http日志

打印Http日志,这是一个再普通不过的功能,但是实际使用起来,看日志并非那么直观,各个拦截器中可能都打印了日志,多个请求并发时的日志真是惨不忍睹,项目中演示了如何为每次请求标记一个唯一id,这样子在并发看日志时我们可以通过id快速定位我们要查看到日志:

image.png

网络状态

项目中用到了WebSocket,连接时应该判断网络处于通畅状态,如果不通畅应该挂起等待,网络通畅时恢复该协程发起连接:

private suspend fun connect(userId: String) {
   // 如果App处于前台继续执行,否则挂起
   fAwaitAppStarted()
   // 如果网络通畅继续执行,否则挂起
   fAwaitNetwork()
   // 发起连接并收集数据
   newWebSocketFlow(userId).collect {
      _onlineUsersFlow.value = it
   }
}

一行代码即可实现该功能,如果你的项目中也有类似的场景,相信会对你有一些参考价值。

结束

还有更多的场景需要单独写文章来描述,不适合在这里展开,后面有时间会写专门的文章分析。如果有问题欢迎一起交流学习,感谢你的阅读。