android仿京东底部tab,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还可以实现很多样式，等着我们去慢慢发掘。