利用ViewPager实现可左右滑动的Action Tab

灰太狼 2024-02-17 15:56 2阅读 0赞

### 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 页面的左右滑动 功能正好可以解决这个问题，提供更加方便的交互。

![1352207555_7148.png][]

### 3. 原理说明： ###

整个应用可以分为如图所示的几个模块：

![1352279494_4088.jpg][]

*  主界面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 出现，这就表示导入成功了！如下图所示：

![1352261175_6088.png][]

#### 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 plain][] [copy][view plain]
    
    1.  **public****class** Fragment1 **extends** Fragment \{ 
    2.  
    3.  @Override
    4.  **public** View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) \{ 
    5.  **return** inflateAndSetupView(inflater, container, savedInstanceState, R.layout.fragment1); 
    6.   \} 
    7.  
    8.  **private** View inflateAndSetupView(LayoutInflater inflater, ViewGroup container, 
    9.   Bundle savedInstanceState, **int** layoutResourceId) \{ 
    10.  View layout = inflater.inflate(layoutResourceId, container, **false**); 
    11. 
    12. **return** layout; 
    13.  \} 
    14. \} 
    
      
      
    
 *  fragment1.xml 主要定义一个带有红色背景的的LinearLayout：
 *  **\[html\]** [view plain][] [copy][view plain]
    
    1.  **<?****xml**version="1.0"encoding="utf-8"**?>**
    2.  **<****LinearLayout**xmlns:android="http://schemas.android.com/apk/res/android"
    3.  android:layout\_width="match\_parent"
    4.  android:layout\_height="match\_parent"
    5.  android:orientation="vertical"
    6.  android:background="\#FF0000"**>**
    7.  
    8.  **<****TextView**
    9.  android:layout\_width="match\_parent"
    10. android:layout\_height="match\_parent"
    11. android:layout\_gravity="center"
    12. android:gravity="center"
    13. android:text="@string/frag\_1"
    14. android:textSize="30dp"
    15. android:textStyle="bold"
    16. android:textColor="\#FFFFFF"**/>**
    17. 
    18. **</****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 plain][] [copy][view plain]
    
    1.  **public****class** ActionTabWithSlippingFragmentActivity **extends** FragmentActivity 
    2.  **implements** ActionBar.TabListener\{ 
    3.  
    4.  **private** Fragment1 mFragment1 = **new** Fragment1(); 
    5.  **private** Fragment2 mFragment2 = **new** Fragment2(); 
    6.  **private** Fragment3 mFragment3 = **new** Fragment3(); 
    7.  
    8.  **private****static****final****int** TAB\_INDEX\_COUNT = 3; 
    9.  
    10. **private****static****final****int** TAB\_INDEX\_ONE = 0; 
    11. **private****static****final****int** TAB\_INDEX\_TWO = 1; 
    12. **private****static****final****int** TAB\_INDEX\_THREE = 2; 
    13. 
    14. **private** ViewPager mViewPager; 
    15. **private** ViewPagerAdapter mViewPagerAdapter; 
    16. 
    17. /\*\* Called when the activity is first created. \*/
    18. @Override
    19. **public****void** onCreate(Bundle savedInstanceState) \{ 
    20. **super**.onCreate(savedInstanceState); 
    21.  setContentView(R.layout.main); 
    22. 
    23.  setUpActionBar(); 
    24.  setUpViewPager(); 
    25.  setUpTabs(); 
    26.  \} 
    27. 
    28. **private****void** setUpActionBar() \{ 
    29. **final** ActionBar actionBar = getActionBar(); 
    30.  actionBar.setHomeButtonEnabled(**false**); 
    31.  actionBar.setNavigationMode(ActionBar.NAVIGATION\_MODE\_TABS); 
    32.  actionBar.setDisplayShowTitleEnabled(**false**); 
    33.  actionBar.setDisplayShowHomeEnabled(**false**); 
    34.  \} 
    35. 
    36. **private****void** setUpViewPager() \{ 
    37.  mViewPagerAdapter = **new** ViewPagerAdapter(getSupportFragmentManager()); 
    38. 
    39.  mViewPager = (ViewPager)findViewById(R.id.pager); 
    40.  mViewPager.setAdapter(mViewPagerAdapter); 
    41.  mViewPager.setOnPageChangeListener(**new** ViewPager.SimpleOnPageChangeListener() \{ 
    42. @Override
    43. **public****void** onPageSelected(**int** position) \{ 
    44. **final** ActionBar actionBar = getActionBar(); 
    45.  actionBar.setSelectedNavigationItem(position); 
    46.  \} 
    47. 
    48. @Override
    49. **public****void** onPageScrollStateChanged(**int** state) \{ 
    50. **switch**(state) \{ 
    51. **case** ViewPager.SCROLL\_STATE\_IDLE: 
    52. //TODO
    53. **break**; 
    54. **case** ViewPager.SCROLL\_STATE\_DRAGGING: 
    55. //TODO
    56. **break**; 
    57. **case** ViewPager.SCROLL\_STATE\_SETTLING: 
    58. //TODO
    59. **break**; 
    60. **default**: 
    61. //TODO
    62. **break**; 
    63.  \} 
    64.  \} 
    65.  \}); 
    66.  \} 
    67. 
    68. **private****void** setUpTabs() \{ 
    69. **final** ActionBar actionBar = getActionBar(); 
    70. **for** (**int** i = 0; i < mViewPagerAdapter.getCount(); ++i) \{ 
    71.  actionBar.addTab(actionBar.newTab() 
    72.  .setText(mViewPagerAdapter.getPageTitle(i)) 
    73.  .setTabListener(**this**)); 
    74.  \} 
    75.  \} 
    76. 
    77. @Override
    78. **protected****void** onDestroy() \{ 
    79. **super**.onDestroy(); 
    80.  \} 
    81. 
    82. **public****class** ViewPagerAdapter **extends** FragmentPagerAdapter \{ 
    83. 
    84. **public** ViewPagerAdapter(FragmentManager fm) \{ 
    85. **super**(fm); 
    86. // TODO Auto-generated constructor stub
    87.  \} 
    88. 
    89. @Override
    90. **public** Fragment getItem(**int** position) \{ 
    91. // TODO Auto-generated method stub
    92. **switch** (position) \{ 
    93. **case** TAB\_INDEX\_ONE: 
    94. **return** mFragment1; 
    95. **case** TAB\_INDEX\_TWO: 
    96. **return** mFragment2; 
    97. **case** TAB\_INDEX\_THREE: 
    98. **return** mFragment3; 
    99.  \} 
    100. **throw****new** IllegalStateException("No fragment at position " \+ position); 
    101.  \} 
    102. 
    103. @Override
    104. **public****int** getCount() \{ 
    105. // TODO Auto-generated method stub
    106. **return** TAB\_INDEX\_COUNT; 
    107.  \} 
    108. 
    109. @Override
    110. **public** CharSequence getPageTitle(**int** position) \{ 
    111.  String tabLabel = **null**; 
    112. **switch** (position) \{ 
    113. **case** TAB\_INDEX\_ONE: 
    114.  tabLabel = getString(R.string.tab\_1); 
    115. **break**; 
    116. **case** TAB\_INDEX\_TWO: 
    117.  tabLabel = getString(R.string.tab\_2); 
    118. **break**; 
    119. **case** TAB\_INDEX\_THREE: 
    120.  tabLabel = getString(R.string.tab\_3); 
    121. **break**; 
    122.  \} 
    123. **return** tabLabel; 
    124.  \} 
    125.  \} 
    126. 
    127. @Override
    128. **public****void** onTabReselected(Tab tab, FragmentTransaction ft) \{ 
    129. // TODO Auto-generated method stub
    130. 
    131.  \} 
    132. 
    133. @Override
    134. **public****void** onTabSelected(Tab tab, FragmentTransaction ft) \{ 
    135. // TODO Auto-generated method stub
    136.  mViewPager.setCurrentItem(tab.getPosition()); 
    137.  \} 
    138. 
    139. @Override
    140. **public****void** onTabUnselected(Tab tab, FragmentTransaction ft) \{ 
    141. // TODO Auto-generated method stub
    142. 
    143.  \} 
    144. \} 
    
      
    
 *  main.xml 的实现部分：
 *  **\[html\]** [view plain][] [copy][view plain]
    
    1.  **<?****xml**version="1.0"encoding="utf-8"**?>**
    2.  **<****RelativeLayout**xmlns:android="http://schemas.android.com/apk/res/android"
    3.  android:layout\_width="fill\_parent"
    4.  android:layout\_height="fill\_parent"**>**
    5.  
    6.  **<****android.support.v4.view.ViewPager**
    7.  android:id="@+id/pager"
    8.  android:layout\_width="match\_parent"
    9.  android:layout\_height="match\_parent"**>**
    10. **</****android.support.v4.view.ViewPager****>**
    11. **</****RelativeLayout****>**

#### 4.4 结束语： ####

*  关于 ViewPager 结合ActionBar 和 Fragment 实现页面滑动式 tab 功能在 google 的官方开发文档中也有说明，本例相关原理亦以此作为参考，详情请查阅：[http://developer.android.com/reference/android/support/v4/view/ViewPager.html][http_developer.android.com_reference_android_support_v4_view_ViewPager.html]
 *  源代码供开放，无需积分：

### 1. ViewPager要点： ###

### 2. 实现功能： ###

本例实现的功能效果如下图所示：

![1352207555_7148.png][]

### 3. 原理说明： ###

整个应用可以分为如图所示的几个模块：

![1352279494_4088.jpg][]

### 4. 具体步骤： ###

#### 4.1 新建工程并导入android-support-v4.jar扩展包： ####

![1352261175_6088.png][]

#### 4.2 创建三个 Fragment 类作为可滑动的 Tab 页（view），并由 ViewPager来管理（manager）： ####

#### 4.3 创建主界面 Activity：ActionTabWithSlippingFragmentActivity，及其对应的布局文件：main.xml： ####

#### 4.4 结束语： ####

[1352207555_7148.png]: https://img-my.csdn.net/uploads/201211/06/1352207555_7148.png
[1352279494_4088.jpg]: https://img-my.csdn.net/uploads/201211/07/1352279494_4088.jpg
[1352261175_6088.png]: https://img-my.csdn.net/uploads/201211/07/1352261175_6088.png
[view plain]: http://blog.csdn.net/ixiaobu/article/details/8154007#
[http_developer.android.com_reference_android_support_v4_view_ViewPager.html]: http://developer.android.com/reference/android/support/v4/view/ViewPager.html
[http_download.csdn.net_detail_onceing_8873813]: http://download.csdn.net/detail/onceing/8873813