前段時間有些兄弟問我沒有可用於畢業答辯的專案。呼之前來,我給他們介紹了很多,最近介紹一個適合學習的開源的開源專案——豆瓣客戶端
部分特性
- Material Design
- 首頁友鄰廣播
- 啟動速度優化
- 介面動畫
- 支援螢幕旋轉
- 平板多列檢視
- 支援使用 Custom Tabs 開啟網頁
- 支援切換長/短連結顯示
放幾張效果圖吧
功能架構
導航採用抽屜一級導航 + 選項卡二級導航的方式。工具欄上將顯示全域性的動作。
- 工具欄
- 提醒:所有類別的提醒,可以檢視歷史提醒
- 豆郵:使用者間的郵件往來,希望鼓勵鄭重而非聊天。
- 搜尋:立即訪問想要的內容。
- 使用者:點選後顯示個人頁面,相當於“我的豆瓣”。
- 首頁
- 友鄰廣播:友鄰互動、友鄰推薦、系統定製的推薦。
- 九點:友鄰的日記、部落格文章等,有深度的內容。
- 一刻:全站範圍的熱門內容推薦。
- 同城:基於地理位置的內容。
- 線上活動:基於共同興趣的內容。
- 讀書
- 分類瀏覽、首頁推薦:入口,以及最有可能發現新內容的地方。
- 我讀:管理自己的讀書標記、創造內容。
- 動態:檢視友鄰的閱讀動態,互動、獲得推薦。
- 豆瓣猜:基於演算法的推薦。
- 電影
- 類似讀書。
- 音樂
- 類似讀書。
- 設定:提供應用設定等。
在子頁面設計中,豆芽將盡量鼓勵長內容和用心的互動。因為我相信只有豆瓣值得這樣嘗試。
實現架構
資料層面
應用除了對少數內容進行快取,其他內容均直接從網路獲取。
- 基於 Android 賬戶系統提供使用者賬戶和身份認證。
- 使用 Retrofit 及部分自定義增強處理網路請求。
- 使用 Gson 自動填充資料模型。
- 使用 Glide 載入圖片。
- 使用 DiskLRUCache 及自定義增強對首頁資料進行快取。
- 使用 EventBus 同步不同頁面間物件狀態。
介面層面
- 使用 Support Library 中的 AppCompat、Design、CardView、RecyclerView 進行 Material Design 實現,在必要時引入/自己寫作第三方庫以實現部分介面元素和效果。
= 使用框架的 Shared Element Transition 實現在 Android 5.0 以上的介面過渡動畫。
- 介面實現一般分為 Activity、Fragment、Adapter 三個模組,分別負責作為容器,發起請求、展示資料和使用者互動,以及資料/互動繫結。
實現難點
網路請求
Retrofit 本身已經較為強大,而在豆芽中則對 Retrofit 進行了包裝,增加了認證和錯誤處理等功能,為之後 API 層建立提供了很多方便。
磁碟快取
DiskLRUCache 是一個只實現了同步讀取寫入的庫,因此豆芽對其進行了包裝,提供了非同步讀寫的 API,正確實現,提高了應用的響應速度。
狀態同步
由於各個介面獨自獲取資料,資料本身與常規的 ContentProvider 機制中不同,是去中心化的,即可能遇到狀態不同步的問題。
具體地說,即有可能使用者在廣播詳情介面中點贊後,回到主介面列表檢視,發現並未更新狀態。
而豆芽解決方案則是使用 EventBus,在請求完成後通知所有介面重新整理同一資料。
介面動畫
Android 5.0 以上提供了 SharedElementTransition,然而預設情況下共享的介面元素在動畫時卻會被放置在其他介面元素之上,導致其突然越過 AppBar 或 StatusBar 的情況。
通過大量的文件閱讀、原始碼分析和除錯,經過大約一週的時間,最終實現了較為理想的效果。
螢幕旋轉
Android 在螢幕旋轉時,會銷燬檢視和 Activity 並重建,此時如何儲存檢視狀態和已載入的資料、正在進行的網路請求即是問題。
Android 對部分檢視狀態提供了自動儲存恢復,而豆芽對於其他需要儲存的狀態則通過自定義的 onSaveViewState() 和 onRestoreViewState()。
對於資料,豆芽通過自定義的一個無介面的 RetainDataFragment 進行資料保留,並且介面十分簡單易用。
同時,由於網路請求的非同步特性,豆芽通過自定義的一個 RequestFragment 實現了網路請求在 Activity 重建期間的保留,並且能夠在 Activity 重建完成後將請求前的狀態和請求結果回撥至新的 Activity。
平板適配
Android 本身的資源系統提供了對不同配置的很好支援,通過建立不同的資原始檔,即可在手機和平板上使用不同的介面設定。
此外,由於採用了 RecyclerView,通過在執行時判斷當前裝置配置,可以動態給介面設定為 1、2、3 列檢視,充分利用螢幕空間。
啟動速度
Android 預設在冷啟動應用程式至能夠呼叫 Activity.onCreate() 前會載入應用主題中的背景作為預覽,而預設背景是白色,與應用在上部擁有綠色 AppBar 的效果不相匹配。
為了生成適應於不同螢幕大小、系統版本的圖片,我使用 bash 編寫了一系列指令碼,並實現了一個通用的模板化 SVG 格式,詳情見 MaterialColdStart 和 AndroidSVGScripts。
經過自定義視窗背景和其他優化,應用在手機上已經可以達到立即啟動的視覺效果。
專案地址
相信自己,沒有做不到的,只有想不到的
如果你覺得此文對您有所幫助,歡迎入群 QQ交流群 :644196190
微信公眾號:終端研發部