【Android】ViewPager+TabLayout实现商城APP底部栏

简述

在这里,用一个如图的商城APP的界面的例子,来简单地介绍一下如何用ViewPager搭配TabLayout来实现这样常见的可滑动栏


一、ViewPager部分

ViewPager是android扩展包v4包中的类,这个类可以让用户左右滑动切换当前的view

  1. ViewPager类直接继承了ViewGroup类,所有它是一个容器类,可以在其中添加其他的view类。
  2. ViewPager类需要一个PagerAdapter适配器类给它提供数据。
  3. ViewPager经常和Fragment一起使用,并且提供了专门的FragmentPagerAdapter和FragmentStatePagerAdapter类供Fragment中的ViewPager使用。

由于我们使用ViewPager一般搭配Fragment,所以先把几个简单的显示文字的Fragment给实现出来。
只需要如下面代码一样简单地实现即可

准备好三个界面的Fragment以后,我们开始学习使用ViewPager
我们在这里使用了一个Fragment的List来保存要添加到ViewPager的Fragment。
然后将三个Fragment都添加到这个List中

然后配置ViewPager的Adapter,将Fragment都对应上即可。

值得注意的是,在FragmentStatePagerAdapter的构造方法中,需要将FragmentManager传入,所以要先获取到对应的FragmentManager。由于我们用到的Fragment是v4包中的Fragment,所以要用到getSupportFragmentManager()方法来获取FragmentManager

这样,就可以在ViewPager上左右滑动以显示不同的页面了。

关于ViewPager的更多使用,可以参考这篇文章ViewPager 全面剖析及使用详解


二、TabLayout部分

然后我们需要配置TabLayout,以使得ViewPager的滑动可以关联底部Tab的滑动。

下面是ViewPager与TabLayout的布局代码

可以看到。我们在TabLayout中加入了三个TabItem,分别对应了三个Fragment,并且设置了对应的图片资源,然后将TabLayout的颜色属性进行了更改。
关于TabLayout的具体使用,可以参考这篇文章Material Design 之 TabLayout 的使用

TabLayout的效果如图:

之后,我们就要对TabLayout与ViewPager进行关联,这里TabLayout为这样的功能设计了对应的Listener,只用分别对TabLayout和ViewPager设置对应的Listener即可:

代码如下:

就这样,我们的ViewPager+TabLayout实现网上商城底部栏的demo就实现了,效果如图:

评 论 区

  1. 还没有任何评论,你来说两句吧

发表评论

%d 博主赞过: