Android-仿豌豆莢首頁導航實現

1：結果圖：

2: 實現思路：

2.1：UI層次框架：

如 圖所示：最低層爲RelativeLayout,第二層爲ScrollView,第三層爲頂部的祝導航欄。IndexNavigator是在 ScrollView層上，會跟着一塊兒滑動。而MainNavigator則是一直呆在頂部。個人實現思路就是監聽ScrollView的活動狀況來調整 IndexNavigator的佈局，讓IndexNavigator和MainNavigator徹底重合。

2.2：有關ScrollView滑動的一些屬性：

如圖(一次滑動)所示：

ScrollView滑動的距離是滾動條上端到ScrollView頂部的距離，在這裏我稱呼爲ScrollTop。一次用戶滑動操做會觸發不少次OnScrollChange事件，這也正是咱們能夠在手指觸碰屏幕的過程當中定義動畫的基礎事件，在這裏咱們把一次ScrollView的滑動定義爲內部觸發的一次OnScrollChange事件，那麼，一次滑動的距離就會和用戶的滑動的速度有關，固然，ScrollView內部已經幫咱們處理好了最後的結果，咱們只須要在回調OnScrollChange方法裏取出來就好了。

好， 讓咱們一塊兒先來研究一下OnScrollChange方法回調回來的回傳參數究竟有哪些狀況存在吧。這個方法是在ScrollView內部的一個 protected方法，所以咱們須要使用一個簡單的類繼承它，而後開放出來。這個很簡單，就演示代碼了，咱們重點研究這個方法的回傳參數：onScrollChanged(int newLeft, int newTop, int oldLeft, int oldTop)

通過觀察打印結果後分析，對於ScrollView滑動通過的一片小區域，一次滑動一共可能出現的狀況有：

假 定咱們如今的方向爲上下滑動，其中，綠色框能夠理解爲固定在屏幕中的一塊區域，箭頭爲滑動方向，newTop爲箭頭的頂部到ScrollView頂部的距 離，oldTop爲箭尾到ScrollView頂部的距離。那麼一次滑動的狀況可能出現的結果就如上圖所示的六種狀況之一。

2.3：動畫分解

通 過觀察豌豆莢的動畫效果，我分解出來了這四個步驟的動畫，在整個滑動過程當中，下面的導航欄其實和上面的主導航欄是兩個不一樣的View層，也就是對應上面 UI層圖的IndexNavigator和MainNavigator部分，是經過使兩者重合，而後以相同的垂直速度移動達到的效果。

1：字體消失：這裏我經過改變TextView的TextColor值來實現。

2：移動View組件：其實就是改變每一個View的Margin或者Padding值來實現。

3：源碼地址

第一次在gitbug上傳代碼：https://github.com/YeDaxia/WanDaoJiaIndex

---

博客原文：http://www.darcye.com/article/44558296