1.京东的商品详情Tab样式
京东商品详情
上图中可以看到它大致的样式，不过还是不够清晰，下面我们用放大它:
京东商品详情Tab
简单分析一下需求：
1.需要一个TabLayout来展示“商品”，“详情”，“评价”三个页面，需要利用TabLayout和ViewPager，Fragment来实现
2.TabLayout位于Toolbar中，需要用Toolbar来包裹TabLayout实现
3.TabLayout的Tab选择时，字体比未选中大了一号，自带的Api中tabTextAppearance（文字样式）已经不能满足了。需要自定义Tab
如果不是很熟悉TabLayout的，可以参考TabLayout属性详解
2.实现效果前的准备
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还可以实现很多样式，等着我们去慢慢发掘。
网友评论