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还可以实现很多样式,等着我们去慢慢发掘。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容