仿寫豆瓣詳情頁（一）開篇

仿寫豆瓣詳情頁（一）開篇
仿寫豆瓣詳情頁（二）底部浮層
仿寫豆瓣詳情頁（三）內容列表
仿寫豆瓣詳情頁（四）彈性佈局 doing
仿寫豆瓣詳情頁（五）聯動和其餘細節 doing

一、初衷

首先，從用戶體驗的角度來講，豆瓣各個頁面內容的滑動和銜接都十分順滑，這一點十分佩服豆瓣的產品和開發。而豆瓣的詳情頁是我接觸過的 UI 中動畫最複雜的，所以一直想嘗試實現一下。

另外一方面也但願提高下本身處理複雜交互動畫的能力。平常需求的交互都比較簡單，也不涉及複雜的動畫，或者有現成的組件能夠用。事件分發和嵌套滑動只是大致瞭解，還須要多加實踐。

半年前的時候嘗試實現過一次，因爲時間和精力的緣由中途放棄，此次決定堅持搞下去，至少有個像樣的 demo。

二、頁面結構拆分

複雜的功能能夠經過分層來解決，複雜的 UI 也能夠拆成一小部分一小部分相對簡單的 UI 來實現。這裏根據我本身的觀察（畢竟我也拿不到豆瓣的源碼，並且實現方案也是多種多樣的），將頁面的主要結構拆成不一樣的部分，並對每一部分抽象成業務無關的 View，在此基礎上實現豆瓣的頁面效果。

2.一、底部彈起浮層

查看動圖

CoordinatorLayout 有一個 BottomSheetBehavior 實現的就是這個效果。其實本身實現也很簡單，方式也有多種，這裏就本身造一個簡單的輪子。

2.二、內容列表

查看動圖

這部分的視圖「看起來」是一個大列表，裏面有影片的信息（這裏以電視劇爲例）、豆瓣評分、劇情介紹、演職員表、劇照、短評和其餘等卡片。下面還塞了影評的視圖，由一個劇評和小組討論兩個 tab 頁面（暫不考慮本身的影評部分）組成，裏面的內容是一個列表。

而後是交互。在咱們不斷上滑的過程當中，先是列表內容向下滾動，滾動到底部後，開始滾動影評的列表部分；手指下滑時，列表向上滾動，先滾動影評的列表部分，再滾動外層的大列表。

對於這樣的 UI，我首先想到的就是 NestedScrollView，的確能夠用這個實現，可是會有不少問題，這個會在下面的文章中細說。

2.三、彈性佈局

查看動圖

「演職員表」和「劇照」是兩個水平滾動的列表，左右兩側滾動到頭都會有彈性的效果，在右側滑倒必定程度鬆開會打開下一級頁面。

固然 github 上也有不少開源的彈性視圖，這裏我也根據本身對事件分發和嵌套滑動的理解本身造了個輪子。

2.四、聯動和其餘細節

查看動圖

詳情頁的內容列表、底部浮層和標題欄還有聯動效果。

內容底部的影評部分在還沒露出時，就把這部分視圖放在浮層裏，滑出一部分時再從浮層中移除，放入內容列表中。

標題欄有兩種狀態，顯示標題和顯示影視信息，中間又動畫過渡，狀態切換隨內容列表的滾動值或浮層是否徹底展開而改變。

三、預備知識

• View 的繪製流程
• Touch 事件的分發機制
• 嵌套滾動的分發機制，這裏主要用到 NestedScrollingParent
• 改變 View 位置的方法，margin、layout、scroll、屬性動畫等
• Scroller、VelocityTracker 的用法

四、最後

最後想說的是，自定義 View 不要過於追求大而全，咱們也不可能像寫官方控件那樣考慮各類各樣的應用場景，考慮一大堆通用性和各類適配。自定義嘛，能用就行，若是總想着大而全，反而會陷入其中沒法自拔。

github.com/funnywolfda…