高仿掘金App —— 基於 databinding

梁山boy發表於2017-09-24
APP

0. 專案地址

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

相關文章