Run_基础Android技术知识Android知识

使用ViewPager与ActionBar.Tab

2016-10-23  本文已影响430人  RunHuaOil

前言:


上面动图中滑动切换页面就是用到 VIewPager,也可以当作演示幻灯片,制作使用引导。而最上面的标签就是用到 ActionBar 的 Tab,与 ViewPager 关联后可以点击切换页面,最下面的控件是 PagerTitleStrip,用来显示当前页面所在的标签名。
由于Google官方建议用 Toolbar 代替 Actionbar,Toolbar也确实比 ActionBar好用,所以ActionBar 的Tab就不好用了,取而代之的是 support design 里的 TabLayout,怎么用呢,看我这个帖子:TabLayout ViewPager快速实现滑动切换页面及对应标签

学习使用 ViewPager:


首先直接在主布局中写入:

ViewPager布局好了,那接下来怎么用呢, ViewPager 划动的页面其实是一个个的 Fragment ,所以 ViewPager 需要和 Fragment 建立关联,那谁来处理 ViewPager 和 Fragment 的关联呢,使用 PagerAdapter ,最后调用 ViewPager 的 setAdapter()方法 ,设置关联。

官方提供了两个 PagerAdapter :

这里我们因为只显示几个,选择继承 FragmentPagerAdapter,在实现适配器之前我们先把 Fragment 写好:

我们使用同一个 Fragment,但是new Fragment 时通过 Bundle 来设置每一个 Fragment 的TextView显示当前是第几个 Fragment,接下来实现我们的 FragmentPagerAdapter,新建 MyFragmentAdapter 继承 FragmentPagerAdapter,并且实现其中几个重要方法:


适配器通过 getCount 返回的数来确定调用 getItem() 的次数,这里返回 3 (这里写死了,实际可以灵活控制),代表新建三个 Fragment,ViewPager的 pages 也就是三个,getPageTitle()方法也是重要的一个方法,在后面讲到的 PagerTitleStrip 就是使用这个函数来确定 tab 的文本。 实现了 MyFragmentAdapter 后我们就可以开始建立关联了。

回到 Activity 的 onCreate() 方法:

到这 ViewPager 的基本用法就学完了,效果如下:

ActionBar.Tab 与 ViewPager关联:


思路就是这样,然而这样的 Tab 点击并没有反映,因为我们还没实现Tab的点击事件,通过 ActionBar.TabListener 实现点击事件,代码如下:

到这里我们的 Tab 就可以显示且点击切换页面了,效果如下:

但是问题又来了,滑动 ViewPager 可以切换 Item,但是上面的 Tab 却不会自动跳转到相应的 Tab标签下,这里是需要监听 ViewPager 切换页面的动作,通过 ViewPager.OnPageChangeListener(),代码如下:

到这里我们ActionBar Tab 和 ViewPager的关联就完成了,最后再讲一个 PagerTitleStrip

PagerTitleStrip 的简单使用:


使用 PagerTitleStrip 非常简单,直接在 ViewPager 的布局中加入:

效果图:

通过设置在 ViewPager 布局中,就完成 PagerTitleStrip 和 ViewPager 的绑定,会发现 PagerTitleStrip 自动显示标签名,这是回调了我们 MyFragmentAdapter 重写的 getPageTitle(int position) 方法来获取相应的标签名。

到这里就结束了,如果对你有帮助请点击 喜欢 哦,也欢迎到我 GitHub 点 star

Demo地址:


GitHub地址:https://github.com/RunHuaOil/AndroidPractice/tree/master/ViewPagerTest

上一篇 下一篇

猜你喜欢

热点阅读