高仿掘金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绑定在一块儿。
重点来了:

1. view(pullToRefresh) -> data(list): 当view有动做(下拉刷新 or 上拉加载)，框架会自行调用loadTask，而后更新TwoWayListVM.data
2. data(list) -> view(RecyclerView): 而当TwoWayListVM.data发生变化，会自动触发RecyclerView刷新。

而后，配合 kotlin 简洁的语法，咱们实现了也许是史上最简洁???的分页列表。

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

7. 参考

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

官方文档

彻底掌握Android Data Binding

MVVMLight