利用ViewPager+Fragment+actionbar实现可左右滑动的Action Tab
转载:原博地址找不到了,不好意思~~
1. ViewPager要点:
- ViewPager 是一个布局管理类(layout manager),用于提供页面的左右滑动功能,类似于ListView,也有为ViewPager提供 数据(Fragment)的 adapter 控制类(FragmentPagerAdapter, FragmentStatePagerAdapter)。
- ViewPager 经常和 Fragment 一起使用,结合ActionBar 的 Tab,实现 tab 页面的左右滑动。
- ViewPager 属于 android sdk 扩展包,若要使用 ViewPager,需要外部导入扩展包:android-support-v4.jar
2. 实现功能:
本例实现的功能效果如下图所示:
实现 tab 页的左右滑动的好处是,由于我们经常习惯单手操作手机,而单手切换 tab 页是非常困难的,而 tab 页面的左右滑动 功能正好可以解决这个问题,提供更加方便的交互。

3. 原理说明:
整个应用可以分为如图所示的几个模块:

- 主界面Activity 主要由一个 ViewPager 组成,里面装载了三个 Fragment 页面,进行左右滑动;
- 主界面Activity 的ActionBar 中创建三个 Tab 按键(Tab Button);
- ActionBar 与 ViewPager 之间的交互关系如下:ViewPager 带动其装载的三个 Fragment 左右切换的同时,控制其相对应的Action Tab Button 的左右切换;反过来,当用户手动切换三个 Tab Button 时,控制 ViewPager 中相对应的 Fragment 的切换。
4. 具体步骤:
4.1 新建工程并导入android-support-v4.jar扩展包:
- 新建一个名为ActionTabWithSlippingFragment。
- 导入android-support-v4.jar扩展包:网上很多导入方法都表示要通过 “Project - Properties - Java Build Path - Add External JARs” 进行导入,这样可以保证编译通过,但是运行的时候会出错!这里我用的导入方法如下:
- 首先在工程目录下新建一个文件夹 libs,然后从 "android sdk目录\extras\android\compatibility\v4" 下将 android-support-v4.jar 手动拷贝到新建的 libs 目录下,最后右击工程选择 “Refresh” 刷新即可,这时可以看到 libs 目录和 Android Dependencies 目录下均有 android-support-v4.jar 出现,这就表示导入成功了!如下图所示:

4.2 创建三个 Fragment 类作为可滑动的 Tab 页(view),并由 ViewPager来管理(manager):
- 创建三个 Fragement 类:Fragment1.java,Fragment2.java,Fragment3.java,同时为其各自创建布局视图文件:fragment1.xml,fragment2.xml,fragment3.xml,分别设置红(R)、绿(G)、蓝(B)背景。
- Fragment1.java创建如下,关键实现其 onCreateView 方法,设置其布局:
-
- publicclassextends
- public return private int false return }
- fragment1.xml 主要定义一个带有红色背景的的LinearLayout:
-
- <?xml= =?> <LinearLayout=
- =
- =
- =
- = > <TextView =
- =
- =
- =
- =
- =
- =
- = /> </LinearLayout>
4.3 创建主界面 Activity:ActionTabWithSlippingFragmentActivity,及其对应的布局文件:main.xml:
- 设置 ActionBar 的样式,如:无回退按键、无标题等——setUpActionBar()
- 初始化并设置 ViewPager,两个要点:首先要定义并设置 ViewPager 所需要的数据控制类 ViewPagerAdapter,ViewPagerAdapter 必须实现如何返回对应位置的 Fragment、页数、页标题;其次,要实现 ViewPager 的翻页监听接口(OnPageChangeListener),主要是实现当前页面被切换时需要导航到对应位置的action tab button,必要的时候,还需要实现在页面翻动的各个状态下(正在翻动、翻动即将停止、翻动完全停止)的相应处理——setUpViewPager()
- 然后需要创建三个 tab button,并实现 tab 的监听接口:主要是当选择相应 tab 时,如何切换 ViewPager 的相应页面——setUpTabs()
- ActionTabWithSlippingFragmentActivity.java 的实现部分
-
- publicclassextends implements privatenew privatenew privatenew privatestaticfinalint;
- privatestaticfinalint;
- privatestaticfinalint;
- privatestaticfinalint;
- private private
- publicvoid super privatevoid final false false false privatevoid new new
- publicvoidint final
- publicvoidint switch case
- break case
- break case
- break default
- break privatevoid final forint; i < mViewPagerAdapter.getCount(); ++i) {
- this
- protectedvoid super publicclassextends public super
- publicint
- switch case return case return case return thrownew
- publicint
- return
- publicint null switch case break case break case break return
- publicvoid
- publicvoid
- publicvoid
- }
- main.xml 的实现部分:
-
- <?xml= =?> <RelativeLayout=
- =
- = > <android.support.v4.view.ViewPager =
- =
- = > </android.support.v4.view.ViewPager> </RelativeLayout>
4.4 结束语:
- 关于 ViewPager 结合ActionBar 和 Fragment 实现页面滑动式 tab 功能在 google 的官方开发文档中也有说明,本例相关原理亦以此作为参考,详情请查阅:http://developer.android.com/reference/android/support/v4/view/ViewPager.html
- 源代码供开放,无需积分:http://download.csdn.net/detail/ixiaobu/4743378
1. ViewPager要点:
- ViewPager 是一个布局管理类(layout manager),用于提供页面的左右滑动功能,类似于ListView,也有为ViewPager提供 数据(Fragment)的 adapter 控制类(FragmentPagerAdapter, FragmentStatePagerAdapter)。
- ViewPager 经常和 Fragment 一起使用,结合ActionBar 的 Tab,实现 tab 页面的左右滑动。
- ViewPager 属于 android sdk 扩展包,若要使用 ViewPager,需要外部导入扩展包:android-support-v4.jar
2. 实现功能:
本例实现的功能效果如下图所示:
实现 tab 页的左右滑动的好处是,由于我们经常习惯单手操作手机,而单手切换 tab 页是非常困难的,而 tab 页面的左右滑动 功能正好可以解决这个问题,提供更加方便的交互。

3. 原理说明:
整个应用可以分为如图所示的几个模块:

- 主界面Activity 主要由一个 ViewPager 组成,里面装载了三个 Fragment 页面,进行左右滑动;
- 主界面Activity 的ActionBar 中创建三个 Tab 按键(Tab Button);
- ActionBar 与 ViewPager 之间的交互关系如下:ViewPager 带动其装载的三个 Fragment 左右切换的同时,控制其相对应的Action Tab Button 的左右切换;反过来,当用户手动切换三个 Tab Button 时,控制 ViewPager 中相对应的 Fragment 的切换。
4. 具体步骤:
4.1 新建工程并导入android-support-v4.jar扩展包:
- 新建一个名为ActionTabWithSlippingFragment。
- 导入android-support-v4.jar扩展包:网上很多导入方法都表示要通过 “Project - Properties - Java Build Path - Add External JARs” 进行导入,这样可以保证编译通过,但是运行的时候会出错!这里我用的导入方法如下:
- 首先在工程目录下新建一个文件夹 libs,然后从 "android sdk目录\extras\android\compatibility\v4" 下将 android-support-v4.jar 手动拷贝到新建的 libs 目录下,最后右击工程选择 “Refresh” 刷新即可,这时可以看到 libs 目录和 Android Dependencies 目录下均有 android-support-v4.jar 出现,这就表示导入成功了!如下图所示:

4.2 创建三个 Fragment 类作为可滑动的 Tab 页(view),并由 ViewPager来管理(manager):
- 创建三个 Fragement 类:Fragment1.java,Fragment2.java,Fragment3.java,同时为其各自创建布局视图文件:fragment1.xml,fragment2.xml,fragment3.xml,分别设置红(R)、绿(G)、蓝(B)背景。
- Fragment1.java创建如下,关键实现其 onCreateView 方法,设置其布局:
-
- publicclassextends
- public return private int false return }
- fragment1.xml 主要定义一个带有红色背景的的LinearLayout:
-
- <?xml= =?> <LinearLayout=
- =
- =
- =
- = > <TextView =
- =
- =
- =
- =
- =
- =
- = /> </LinearLayout>
4.3 创建主界面 Activity:ActionTabWithSlippingFragmentActivity,及其对应的布局文件:main.xml:
- 设置 ActionBar 的样式,如:无回退按键、无标题等——setUpActionBar()
- 初始化并设置 ViewPager,两个要点:首先要定义并设置 ViewPager 所需要的数据控制类 ViewPagerAdapter,ViewPagerAdapter 必须实现如何返回对应位置的 Fragment、页数、页标题;其次,要实现 ViewPager 的翻页监听接口(OnPageChangeListener),主要是实现当前页面被切换时需要导航到对应位置的action tab button,必要的时候,还需要实现在页面翻动的各个状态下(正在翻动、翻动即将停止、翻动完全停止)的相应处理——setUpViewPager()
- 然后需要创建三个 tab button,并实现 tab 的监听接口:主要是当选择相应 tab 时,如何切换 ViewPager 的相应页面——setUpTabs()
- ActionTabWithSlippingFragmentActivity.java 的实现部分
-
- publicclassextends implements privatenew privatenew privatenew privatestaticfinalint;
- privatestaticfinalint;
- privatestaticfinalint;
- privatestaticfinalint;
- private private
- publicvoid super privatevoid final false false false privatevoid new new
- publicvoidint final
- publicvoidint switch case
- break case
- break case
- break default
- break privatevoid final forint; i < mViewPagerAdapter.getCount(); ++i) {
- this
- protectedvoid super publicclassextends public super
- publicint
- switch case return case return case return thrownew
- publicint
- return
- publicint null switch case break case break case break return
- publicvoid
- publicvoid
- publicvoid
- }
- main.xml 的实现部分:
-
- <?xml= =?> <RelativeLayout=
- =
- = > <android.support.v4.view.ViewPager =
- =
- = > </android.support.v4.view.ViewPager> </RelativeLayout>
4.4 结束语:
- 关于 ViewPager 结合ActionBar 和 Fragment 实现页面滑动式 tab 功能在 google 的官方开发文档中也有说明,本例相关原理亦以此作为参考,详情请查阅:http://developer.android.com/reference/android/support/v4/view/ViewPager.html
- 源代码供开放,无需积分:http://download.csdn.net/detail/ixiaobu/4743378

浙公网安备 33010602011771号