高仿掘金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