高仿掘金App —— 基于 databinding

梁山boy / 文 发表于2017-09-25 01:24 次阅读 juejin,mvvm,kotlin,databinding

0. 项目地址

https://github.com/fashare2015/MVVM-JueJin

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绑定在一起。 重点来了:

  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

收藏 赞 (1) 踩 (0)