仿樂視LIVE App主界面的TabLayout

新媒體管家

本文作者

作者：唯鹿

鏈接：

本文由作者投稿發布。

ChangeTabLayout是我模仿樂視LIVE App主界面的TabLayout效果實現的，希望大家多多支持。

https://github.com/simplezhli/ChangeTabLayout

1

效果展示與說明

原效果圖轉為Gif過大，所以將錄製的MP4效果視頻已經放入了項目根目錄的preview文件夾內，有興趣可去查看。（高清哦~）

實現效果圖

GIF/1346K

ChangeTabLayout在打開狀態時

垂直方向切換時，文字的顏色大小變化。

水平方向切換時，文字的漸變與圖片的變化。

ChangeTabLayout在收起狀態時

垂直方向切換時，圖片的變化。

點擊ChangeTabLayout，切換為打開狀態。

2

分析

首先利用HierarchyViewer查看一下層級：

上圖我們可以知道，TabLayout是一個ScrollView，內容區域則是垂直ViewPager嵌套了一個水平方向的ViewPager。

圖片顏色的變化則是使用兩個ImageView疊加實現的。知道了這些，我們的思路大致就有了。當然我們不一定完全一樣，可以按自己的方式處理。

最後貼一張我實現的最終效果：

可以看到我的結構會比較簡潔一些，因為圖片部分的效果我使用了自定義Drawable去實現，所以不需在疊加一個ImageView，也就少了外層的FrameLayout，其次指示器我是用Canvas去繪製的。所以少了外層的RelativeLayout。

3

準備工作

上面我們提到有用到了垂直方向滑動的ViewPager，那麼我順利的在Github上找到了VerticalViewPager，可惜此項目年代久遠，比如setOnPageChangeListener已經過時，而有時我們需添加多個監聽器，能同時生效。

所以我參考了VerticalViewPager的思路，重新對現有的ViewPager（25.1.0）源碼進行了修改。（真是個細緻活）

https://github.com/castorflex/VerticalViewPager

其次我想起了我曾經用到的SmartTabLayout，覺得使用起來很便捷。所以提前閱讀了它的源碼。所以此項目的實現結構大量的借鑒了它。

https://github.com/ogaclejapan/SmartTabLayout

對於圖片的變化部分，我找到了這篇自定義Drawables在研究了代碼之後，根據需求在此基礎上添加了垂直方向的判斷，去除了多餘的代碼部分。

https://bboyfeiyu.gitbooks.io/android-tech-frontier/content/issue-8/Custom-Drawables.html

感謝以上作者的分享！那麼萬事具備，開搞！！

4

實現流程

在準備工作之後，首先明確我們還缺什麼，那麼剩餘的就是文字部分、指示器部分、與承載這些組件的容器了。

1.文字部分

根據觀察效果圖，文字的變化是被指示器覆蓋的部分，文字變為白色。且在頁面垂直移動時，文字會有大小的變化。當然頁面水平切換時，文字的漸變我們可以利用setAlpha去實現。

ChangeTextView核心代碼：

計算部分就不介紹了，文字的變化主要利用了我們常見的PorterDuffXfermode 的SRC_IN模式。也就是取兩層繪製交集，顯示上層。如下圖：

比如文字是黑色，這個遮罩是淡藍色，那麼重疊部分的文字就會變為淡藍色。同時其餘遮罩部分不顯示。

如下示意圖：

那麼我們變化RectF 的大小就可以控制文字的顏色變化。

那麼為了可以顯示多行文字，同時讓文字可以隨大小變化自動換行。我使用了StaticLayout去實現。使用起來很簡單方便。

2.指示器部分

這裡的指示器、背景、陰影部分都放到了ScrollView的子容器LinearLayout中。

ChangeTabStrip核心代碼：

繪製相關代碼：

這裡沒有什麼特別的，主要就是根據ViewPager的移動不斷繪製新的位置。

3.TabLayout部分

首先創建子容器：

根據傳入的PagerAdapter，利用adapter.getCount()方法創建相應數量的TabView，並添加至ChangeTabStrip。簡化代碼如下：

監聽垂直方向ViewPager

垂直滑動時圖片，文字的動態變化部分：

水平方向滑動時圖片，文字的動態變化部分：

到此位置，大體流程就完了。

5

一些小問題解決

1.充滿整個屏幕

如果TabView數量較少時，高度未能撐滿整個屏幕時，顯示效果是這樣的。

這樣看起來有點尷尬了。雖然我設置了高度為MATCH_PARENT但是沒有起作用。

很簡單添加setFillViewport(true)即可。顧名思義，這個屬性允許 ScrollView中的組件大小在不足時去充滿它。

2.點擊問題

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！