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

人已赞赏
Android文章

Android百度地图TextureMapView

2020-4-8 14:50:50

Android文章

android 检测字符串是否为合法域名

2020-4-8 17:48:05

个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
有新消息 消息中心
搜索