利用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 方法,设置其布局:
  • [java] view plaincopy
     
    1. publicclassextends   
    2. public return private int false return }  


  • fragment1.xml 主要定义一个带有红色背景的的LinearLayout:
  • [html] view plaincopy
     
    1. <?xml= =?> <LinearLayout=  
    2. =  
    3. =  
    4. =  
    5. = > <TextView =  
    6. =  
    7. =  
    8. =  
    9. =  
    10. =  
    11. =  
    12. = /> </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 的实现部分 
  • [java] view plaincopy
     
    1. publicclassextends implements privatenew privatenew privatenew privatestaticfinalint;  
    2. privatestaticfinalint;  
    3. privatestaticfinalint;  
    4. privatestaticfinalint;  
    5. private private   
    6.   
    7. publicvoid super privatevoid final false false false privatevoid new new   
    8. publicvoidint final   
    9. publicvoidint switch case   
    10. break case   
    11. break case   
    12. break default   
    13. break privatevoid final forint; i < mViewPagerAdapter.getCount(); ++i) {  
    14. this   
    15. protectedvoid super publicclassextends public super   
    16.   
    17. publicint   
    18. switch case return case return case return thrownew   
    19. publicint   
    20. return   
    21. publicint null switch case break case break case break return   
    22. publicvoid   
    23.   
    24. publicvoid   
    25.   
    26. publicvoid   
    27. }  

     
  • main.xml 的实现部分:
  • [html] view plaincopy
     
    1. <?xml= =?> <RelativeLayout=  
    2. =  
    3. = > <android.support.v4.view.ViewPager =  
    4. =  
    5. = > </android.support.v4.view.ViewPager> </RelativeLayout>  



4.4 结束语:

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 方法,设置其布局:
  • [java] view plaincopy
     
    1. publicclassextends   
    2. public return private int false return }  


  • fragment1.xml 主要定义一个带有红色背景的的LinearLayout:
  • [html] view plaincopy
     
    1. <?xml= =?> <LinearLayout=  
    2. =  
    3. =  
    4. =  
    5. = > <TextView =  
    6. =  
    7. =  
    8. =  
    9. =  
    10. =  
    11. =  
    12. = /> </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 的实现部分 
  • [java] view plaincopy
     
    1. publicclassextends implements privatenew privatenew privatenew privatestaticfinalint;  
    2. privatestaticfinalint;  
    3. privatestaticfinalint;  
    4. privatestaticfinalint;  
    5. private private   
    6.   
    7. publicvoid super privatevoid final false false false privatevoid new new   
    8. publicvoidint final   
    9. publicvoidint switch case   
    10. break case   
    11. break case   
    12. break default   
    13. break privatevoid final forint; i < mViewPagerAdapter.getCount(); ++i) {  
    14. this   
    15. protectedvoid super publicclassextends public super   
    16.   
    17. publicint   
    18. switch case return case return case return thrownew   
    19. publicint   
    20. return   
    21. publicint null switch case break case break case break return   
    22. publicvoid   
    23.   
    24. publicvoid   
    25.   
    26. publicvoid   
    27. }  

     
  • main.xml 的实现部分:
  • [html] view plaincopy
     
    1. <?xml= =?> <RelativeLayout=  
    2. =  
    3. = > <android.support.v4.view.ViewPager =  
    4. =  
    5. = > </android.support.v4.view.ViewPager> </RelativeLayout>  



4.4 结束语:

posted @ 2016-11-05 11:36  天涯海角路  阅读(325)  评论(0)    收藏  举报