高仿掘金App —— 基于 databinding
1. 项目初衷
不同于前端 vue、 react 的火热, 移动端的 databinding 好像不受待见。鉴于 vue、 react 都有各自成熟的生态圈,我希望通过这个项目打磨出一个简单易用的
databinding 组件库
。
1.1 data -> view,舍弃 Adapter
之前有不少前辈专门针对 RecyclerView 做了各自的封装,完全省去了 Adapter, 比如:
1.2 更进一步:view -> data -> view
在本项目中,你将会看到一个带有 下拉刷新
+ 上拉加载
的页面如何简化到10+行java代码
! see NotifyVM.kt
2. 模块概览
接口全抓自掘金app, 支持登录、注册(走的官方接口,并非假数据哦~)
- 已完成:
- 登录、注册:可以用自己的掘金帐号登录,或者临时注册一个
- 首页:热门推荐及文章列表,以及各个分类页面(Android、前端、产品。。。)
- 发现:一级页面,包括 banner、活动、沸点、热门文章
- 消息:完成消息列表
- 我的:一级页面,包括登录与未登录两个状态
- 文章详情页面: 文章 html 以及 下方的评论列表
- TODO:
- splash 页
- 第三方登录
- 发现页 - 搜索模块、活动、沸点的二级页面
- 我的 - 个人信息页,包括从用户头像跳转
- 我的 - 喜欢、收藏、设置等二级页面
- 发布文章页
- 收藏、评论、分享等其他功能
- 夜间模式
- ...
3. 效果图
4. 技术栈
- databinding
- kotlin
- rxJava + rxAndroid
- retrofit + okhttp
- glide
5. 关于 "10+行" 实现的分页列表
我们来看第3个tab - 消息列表: see NotifyVM.kt
// NotifyListVM.kt
@ResHolder(R.layout.item_notify_list) // item 布局
@HeaderResHolder(R.layout.header_notify) // header 布局
class NotifyListVM : TwoWayListVM<NotifyBean>() {
override val loadTask = { lastItem: NotifyBean? -> // 网络请求(refresh、loadMore 二合一)
ApiFactory.getApi(JueJinApis.Notify:: class.java)
.getUserNotification(lastItem?.createdAtString?: "")
.compose(Composers.handleError())
}
override val onItemClick = ArticleActivity.START_FROM_NOTIFY // 点击事件
override val headerData = Any()
}
框架中封装了TwoWayListVM
,我们的NotifyListVM
继承与它,并在布局中与RecyclerView
绑定在一起。
重点来了:
- view(pullToRefresh) -> data(list): 当view有动作(下拉刷新 or 上拉加载),框架会自行调用
loadTask
,然后更新TwoWayListVM.data
- data(list) -> view(RecyclerView): 而当
TwoWayListVM.data
发生变化,会自动触发RecyclerView
刷新。
然后,配合 kotlin 简洁的语法,我们实现了也许是史上最简洁???
的分页列表。