ViewPager和Fragment的组合使用

一时失言乱红尘 2024-02-17 17:01 7阅读 0赞

![SouthEast][] ![SouthEast 1][]

支持手指滑动切换页面，也支持点击导航按钮切换页面。

页面布局文件：

**\[html\]** [view plain][] [copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  **<****RelativeLayout**xmlns:android="http://schemas.android.com/apk/res/android"
2.  xmlns:tools="http://schemas.android.com/tools"
3.  android:layout\_width="match\_parent"
4.  android:layout\_height="match\_parent"
5.  tools:context=".MainActivity"**>**
6.  
7.  
8.  **<****LinearLayout**
9.  android:id="@+id/ll\_tabs"
10. android:layout\_width="match\_parent"
11. android:layout\_height="50dp"
12. android:layout\_alignParentBottom="true"
13. android:orientation="horizontal"
14. **>**
15. 
16. **<****Button**
17. android:id="@+id/btn\_one"
18. android:layout\_width="0dp"
19. android:layout\_height="match\_parent"
20. android:layout\_weight="1"
21. android:text="One"
22. android:background="\#009eff"
23. android:textColor="\#fff"
24. **/>**
25. **<****Button**
26. android:id="@+id/btn\_two"
27. android:layout\_width="0dp"
28. android:layout\_height="match\_parent"
29. android:layout\_weight="1"
30. android:text="Two"
31. android:background="\#009e00"
32. android:textColor="\#fff"
33. **/>**
34. **<****Button**
35. android:id="@+id/btn\_three"
36. android:layout\_width="0dp"
37. android:layout\_height="match\_parent"
38. android:layout\_weight="1"
39. android:text="Three"
40. android:background="\#009eff"
41. android:textColor="\#fff"
42. **/>**
43. **<****Button**
44. android:id="@+id/btn\_four"
45. android:layout\_width="0dp"
46. android:layout\_height="match\_parent"
47. android:layout\_weight="1"
48. android:text="Four"
49. android:background="\#009e00"
50. android:textColor="\#fff"
51. **/>**
52. 
53. **</****LinearLayout****>**
54. 
55. 
56. **<****ImageView**
57. android:id="@+id/imgv\_overtab"
58. android:layout\_width="60dp"
59. android:layout\_height="50dp"
60. android:background="@drawable/red"
61. android:layout\_alignParentBottom="true"
62. **/>**
63. 
64. 
65. **<****View**
66. android:layout\_width="match\_parent"
67. android:layout\_height="2dp"
68. android:background="\#f00"
69. android:layout\_above="@id/ll\_tabs"
70. **/>**
71. 
72.  
84. **<****android.support.v4.view.ViewPager**
85. android:id="@+id/viewpager"
86. android:layout\_above="@id/ll\_tabs"
87. android:layout\_marginBottom="2dp"
88. android:layout\_width="match\_parent"
89. android:layout\_height="match\_parent"**/>**
90. 
91. 
92. **</****RelativeLayout****>**

下面是具体的代码，由于代码比较少，很容易看明白，就不做多的讲述了：

**\[java\]** [view plain][] [copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  **package** com.example.switchfragment; 
2.  
3.  **import** java.util.ArrayList; 
4.  **import** java.util.List; 
5.  **import** android.os.Bundle; 
6.  **import** android.support.v4.app.Fragment; 
7.  **import** android.support.v4.app.FragmentActivity; 
8.  **import** android.support.v4.app.FragmentManager; 
9.  **import** android.support.v4.app.FragmentStatePagerAdapter; 
10. **import** android.support.v4.view.ViewPager; 
11. **import** android.view.View; 
12. **import** android.view.ViewGroup; 
13. **import** android.view.View.OnClickListener; 
14. **import** android.view.animation.TranslateAnimation; 
15. **import** android.widget.Button; 
16. **import** android.widget.ImageView; 
17. **import** android.widget.RelativeLayout; 
18. 
19. **public****class** MainActivity **extends** FragmentActivity **implements** OnClickListener\{ 
20. 
21. /\*\*
22.  \* 四个导航按钮
23.  \*/
24.  Button buttonOne; 
25.  Button buttonTwo; 
26.  Button buttonThree; 
27.  Button buttonFour; 
28. 
29. /\*\*
30.  \* 作为页面容器的ViewPager
31.  \*/
32.  ViewPager mViewPager; 
33. /\*\*
34.  \* 页面集合
35.  \*/
36.  List<Fragment> fragmentList; 
37. 
38. /\*\*
39.  \* 四个Fragment（页面）
40.  \*/
41.  OneFragment oneFragment; 
42.  TwoFragment twoFragment; 
43.  ThreeFragment threeFragment; 
44.  FourFragment fourFragment; 
45. 
46. //覆盖层
47.  ImageView imageviewOvertab; 
48. 
49. //屏幕宽度
50. **int** screenWidth; 
51. //当前选中的项
52. **int** currenttab=-1; 
53. 
54. @Override
55. **protected****void** onCreate(Bundle savedInstanceState) \{ 
56. **super**.onCreate(savedInstanceState); 
57.  setContentView(R.layout.activity\_main); 
58.  buttonOne=(Button)findViewById(R.id.btn\_one); 
59.  buttonTwo=(Button)findViewById(R.id.btn\_two); 
60.  buttonThree=(Button)findViewById(R.id.btn\_three); 
61.  buttonFour=(Button)findViewById(R.id.btn\_four); 
62. 
63.  buttonOne.setOnClickListener(**this**); 
64.  buttonTwo.setOnClickListener(**this**); 
65.  buttonThree.setOnClickListener(**this**); 
66.  buttonFour.setOnClickListener(**this**); 
67. 
68.  mViewPager=(ViewPager) findViewById(R.id.viewpager); 
69. 
70.  fragmentList=**new** ArrayList<Fragment>(); 
71.  oneFragment=**new** OneFragment(); 
72.  twoFragment=**new** TwoFragment(); 
73.  threeFragment=**new** ThreeFragment(); 
74.  fourFragment=**new** FourFragment(); 
75. 
76.  fragmentList.add(oneFragment); 
77.  fragmentList.add(twoFragment); 
78.  fragmentList.add(threeFragment); 
79.  fragmentList.add(fourFragment); 
80. 
81.  screenWidth=getResources().getDisplayMetrics().widthPixels; 
82. 
83.  buttonTwo.measure(0, 0); 
84.  imageviewOvertab=(ImageView) findViewById(R.id.imgv\_overtab); 
85.  RelativeLayout.LayoutParams imageParams=**new** RelativeLayout.LayoutParams(screenWidth/4, buttonTwo.getMeasuredHeight()); 
86.  imageParams.addRule(RelativeLayout.ALIGN\_PARENT\_BOTTOM); 
87.  imageviewOvertab.setLayoutParams(imageParams); 
88. 
89.  mViewPager.setAdapter(**new** MyFrageStatePagerAdapter(getSupportFragmentManager())); 
90.  \} 
91. 
92. /\*\*
93.  \* 定义自己的ViewPager适配器。
94.  \* 也可以使用FragmentPagerAdapter。关于这两者之间的区别，可以自己去搜一下。
95.  \*/
96. **class** MyFrageStatePagerAdapter **extends** FragmentStatePagerAdapter 
97.  \{ 
98. 
99. **public** MyFrageStatePagerAdapter(FragmentManager fm) 
100.  \{ 
101. **super**(fm); 
102.  \} 
103. 
104. @Override
105. **public** Fragment getItem(**int** position) \{ 
106. **return** fragmentList.get(position); 
107.  \} 
108. 
109. @Override
110. **public****int** getCount() \{ 
111. **return** fragmentList.size(); 
112.  \} 
113. 
114. /\*\*
115.  \* 每次更新完成ViewPager的内容后，调用该接口，此处复写主要是为了让导航按钮上层的覆盖层能够动态的移动
116.  \*/
117. @Override
118. **public****void** finishUpdate(ViewGroup container) 
119.  \{ 
120. **super**.finishUpdate(container);//这句话要放在最前面，否则会报错
121. //获取当前的视图是位于ViewGroup的第几个位置，用来更新对应的覆盖层所在的位置
122. **int** currentItem=mViewPager.getCurrentItem(); 
123. **if** (currentItem==currenttab) 
124.  \{ 
125. **return** ; 
126.  \} 
127.  imageMove(mViewPager.getCurrentItem()); 
128.  currenttab=mViewPager.getCurrentItem(); 
129.  \} 
130. 
131.  \} 
132. 
133. /\*\*
134.  \* 移动覆盖层
135.  \* @param moveToTab 目标Tab，也就是要移动到的导航选项按钮的位置
136.  \* 第一个导航按钮对应0，第二个对应1，以此类推
137.  \*/
138. **private****void** imageMove(**int** moveToTab) 
139.  \{ 
140. **int** startPosition=0; 
141. **int** movetoPosition=0; 
142. 
143.  startPosition=currenttab\*(screenWidth/4); 
144.  movetoPosition=moveToTab\*(screenWidth/4); 
145. //平移动画
146.  TranslateAnimation translateAnimation=**new** TranslateAnimation(startPosition,movetoPosition, 0, 0); 
147.  translateAnimation.setFillAfter(**true**); 
148.  translateAnimation.setDuration(200); 
149.  imageviewOvertab.startAnimation(translateAnimation); 
150.  \} 
151. 
152. 
153. @Override
154. **public****void** onClick(View v) 
155.  \{ 
156. **switch** (v.getId()) 
157.  \{ 
158. **case** R.id.btn\_one: 
159.  changeView(0); 
160. **break**; 
161. **case** R.id.btn\_two: 
162.  changeView(1); 
163. **break**; 
164. **case** R.id.btn\_three: 
165.  changeView(2); 
166. **break**; 
167. **case** R.id.btn\_four: 
168.  changeView(3); 
169. **break**; 
170. **default**: 
171. **break**; 
172.  \} 
173.  \} 
174. //手动设置ViewPager要显示的视图
175. **private****void** changeView(**int** desTab) 
176.  \{ 
177.  mViewPager.setCurrentItem(desTab, **true**); 
178.  \} 
179. 
180. \}

#### 注释写的很详细了，就不多说了。其实也没什么深的技术，就是对ViewPager的使用。 ####

里面还有其他的布局文件以及java文件没有贴出来，有意向的可以到这个地址下载哦，免积分哦！

[源码下载][Link 1]

[SouthEast]: https://img-blog.csdn.net/20140610154201265?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMzc1ODczNA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast
[SouthEast 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/30/bc049e48c3414a68a3b9a09470c185c8.png
[view plain]: http://blog.csdn.net/u013758734/article/details/29848117#
[CODE]: https://code.csdn.net/assets/CODE_ico.png
[CODE_CODE]: https://code.csdn.net/snippets/385654
[ico_fork.svg]: https://code.csdn.net/assets/ico_fork.svg
[ico_fork.svg 1]: https://code.csdn.net/snippets/385654/fork
[Link 1]: http://download.csdn.net/detail/onceing/9448242