高仿掘金App —— 基于 databinding

0. 项目地址

MVVM-JueJin

1. 项目初衷

不同于前端 vue、 react 的火热, 移动端的 databinding 好像不受待见。鉴于 vue、 react 都有各自成熟的生态圈，我希望通过这个项目打磨出一个简单易用的 databinding 组件库。

1.1 data -> view，舍弃 Adapter

之前有不少前辈专门针对 RecyclerView 做了各自的封装，完全省去了 Adapter, 比如：

MVVMLight
binding-collection-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 简洁的语法，我们实现了也许是史上最简洁???的分页列表。

6. 项目持续打磨中，有兴趣给个star~

7. 参考

Android DataBinding 数据绑定 —— QQ音乐技术团队

官方文档

完全掌握Android Data Binding

MVVMLight