前言:
上面动图中滑动切换页面就是用到 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:适合切换的pages较少的
- FragmentStatePagerAdapter:适合未知pages多少,用户切换到其他 pages 时,会destroy对应的Fragment减少内存占用
这里我们因为只显示几个,选择继承 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 的 id。
- 实例化我们的 MyFragmentAdapter ,getSupportFragmentManager()传入FragmentManager。
- viewPager 设置适配器为我们的 MyFragmentAdapter
到这 ViewPager 的基本用法就学完了,效果如下:
ActionBar.Tab 与 ViewPager关联:
- ActionBar actionBar = getSupportActionBar();获取 ActionBar对象
- actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS); 设置渲染 Tabs
- 通过 actionBar.newTab() .setIcon().setText() 方法获取 tab实例,然后 actionBar.addTab(tab) 把 tab 加入 ActionBar,addTab几个,就加入几个标签。
思路就是这样,然而这样的 Tab 点击并没有反映,因为我们还没实现Tab的点击事件,通过 ActionBar.TabListener 实现点击事件,代码如下:
- 在 onTabSelected() 事件中,点击第几个 Tab 我们就通过 viewPager.setCurrentItem(tab.getPosition()) 方法切换到第几个 Item(Fragment)。
- 在 for 循环中以 我们的 MyFragmentAdapter 适配器里的 getCount() 方法返回的数来确定 add 入几个 Tab,且在 ActionBar.newTab 方法中设置监听器。
到这里我们的 Tab 就可以显示且点击切换页面了,效果如下:
但是问题又来了,滑动 ViewPager 可以切换 Item,但是上面的 Tab 却不会自动跳转到相应的 Tab标签下,这里是需要监听 ViewPager 切换页面的动作,通过 ViewPager.OnPageChangeListener(),代码如下:
- 在 onPageSelected() 方法中设置 Item 所对应的 ActionBar.Tab,参数 position 对于 ActionBar.Tab 和 我们 ViewPager 的 Item 都是一一对应的,因为 Tab , Item 都为三个。
到这里我们ActionBar Tab 和 ViewPager的关联就完成了,最后再讲一个 PagerTitleStrip
PagerTitleStrip 的简单使用:
使用 PagerTitleStrip 非常简单,直接在 ViewPager 的布局中加入:
- android:layout_gravity="bottom" 设置显示在底部
效果图:
通过设置在 ViewPager 布局中,就完成 PagerTitleStrip 和 ViewPager 的绑定,会发现 PagerTitleStrip 自动显示标签名,这是回调了我们 MyFragmentAdapter 重写的 getPageTitle(int position) 方法来获取相应的标签名。
到这里就结束了,如果对你有帮助请点击 喜欢 哦,也欢迎到我 GitHub 点 star
Demo地址:
GitHub地址:https://github.com/RunHuaOil/AndroidPractice/tree/master/ViewPagerTest