1.京東的商品詳情Tab樣式

京東商品詳情

上圖中可以看到它大致的樣式，不過還是不夠清晰，下面我們用放大它:

京東商品詳情Tab

簡單分析一下需求：

1.需要一個TabLayout來展示“商品”，“詳情”，“評價”三個頁面，需要利用TabLayout和ViewPager，F(xiàn)ragment來實現(xiàn)

2.TabLayout位于Toolbar中，需要用Toolbar來包裹TabLayout實現(xiàn)

3.TabLayout的Tab選擇時，字體比未選中大了一號，自帶的Api中tabTextAppearance（文字樣式）已經(jīng)不能滿足了。需要自定義Tab

如果不是很熟悉TabLayout的，可以參考TabLayout屬性詳解

2.實現(xiàn)效果前的準(zhǔn)備

Design庫：Design庫地址?|?V7包：V7包地址

3.效果展示?

仿京東商品詳情效果

4.源碼實現(xiàn)

4.1-主頁面布局

主界面布局

由于默認(rèn)的Toolbar只能顯示文字和圖標(biāo)，需要使用TabLayout需要向上圖的方式嵌入到Toolbar中，LinearLayout是為了讓TabLayout居中而添加的，這樣雖說實現(xiàn)了效果可是增加了布局的層次。接下來就是一個普通了ViewPager。

4.2-初始化控件

首先findViewById，我這里使用了butterknife-7.0.1.jar。

初始化尋找控件

初始化ViewPager

初始化ViewPager

在ViewPager頁面改動的時候，設(shè)置TabLayout的聯(lián)動：

tlTitle.getTabAt(paramInt).select();

初始化toolbar和TabLayout

初始化toolbar和TabLayout

設(shè)置TabLayout的監(jiān)聽

設(shè)置TabLayout的監(jiān)聽

在Tab選中的時候，設(shè)置ViewPager的聯(lián)動：

vpProductDetails.setCurrentItem(paramTab.getPosition());

5.其他源碼

ViewPager的適配器：

ViewPager適配器

這里需要注意的是需要手動寫入getPageTitle(0方法.

6.后記

TabLayout還可以實現(xiàn)很多樣式，等著我們?nèi)ヂl(fā)掘。