Design库-TabLayout仿京东商品详情Tab

1.京东的商品详情Tab样式

京东商品详情

上图中可以看到它大致的样式，不过还是不够清晰，下面我们用放大它:

京东商品详情Tab

简单分析一下需求：

1.需要一个TabLayout来展示“商品”，“详情”，“评价”三个页面，需要利用TabLayout和ViewPager，Fragment来实现

2.TabLayout位于Toolbar中，需要用Toolbar来包裹TabLayout实现

3.TabLayout的Tab选择时，字体比未选中大了一号，自带的Api中tabTextAppearance（文字样式）已经不能满足了。需要自定义Tab

如果不是很熟悉TabLayout的，可以参考TabLayout属性详解

---

2.实现效果前的准备

Design库：Design库地址 | V7包：V7包地址

---

3.效果展示 

仿京东商品详情效果

---

4.源码实现

4.1-主页面布局

主界面布局

由于默认的Toolbar只能显示文字和图标，需要使用TabLayout需要向上图的方式嵌入到Toolbar中，LinearLayout是为了让TabLayout居中而添加的，这样虽说实现了效果可是增加了布局的层次。接下来就是一个普通了ViewPager。

4.2-初始化控件

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

初始化寻找控件

初始化ViewPager

初始化ViewPager

在ViewPager页面改动的时候，设置TabLayout的联动：

tlTitle.getTabAt(paramInt).select();

初始化toolbar和TabLayout

初始化toolbar和TabLayout

设置TabLayout的监听

设置TabLayout的监听

在Tab选中的时候，设置ViewPager的联动：

vpProductDetails.setCurrentItem(paramTab.getPosition());

---

5.其他源码

ViewPager的适配器：

ViewPager适配器

这里需要注意的是需要手动写入getPageTitle(0方法.

---

6.后记

TabLayout还可以实现很多样式，等着我们去慢慢发掘。