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

现在的位置: 首页 > 综合 > 正文

RSS

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

2019年11月14日 ⁄ 综合 ⁄ 共 17172字 ⁄ 字号小中大 ⁄ 评论关闭

转载：原博地址找不到了，不好意思～～

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
plain copy
1. public class Fragment1 extends Fragment {
3. @Override
4. public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
5. return inflateAndSetupView(inflater, container, savedInstanceState, R.layout.fragment1);
6. }
8. private View inflateAndSetupView(LayoutInflater inflater, ViewGroup container,
9. Bundle savedInstanceState, int layoutResourceId) {
10. View layout = inflater.inflate(layoutResourceId, container, false);
12. return layout;
13. }
14. }
fragment1.xml 主要定义一个带有红色背景的的LinearLayout：
[html] view
plain copy
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" >
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" />
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
1. public class ActionTabWithSlippingFragmentActivity extends FragmentActivity
2. implements ActionBar.TabListener{
4. private Fragment1 mFragment1 = new Fragment1();
5. private Fragment2 mFragment2 = new Fragment2();
6. private Fragment3 mFragment3 = new Fragment3();
8. private static final int TAB_INDEX_COUNT = 3;
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;
14. private ViewPager mViewPager;
15. private ViewPagerAdapter mViewPagerAdapter;
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);
23. setUpActionBar();
24. setUpViewPager();
25. setUpTabs();
26. }
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. }
36. private void setUpViewPager() {
37. mViewPagerAdapter = new ViewPagerAdapter(getSupportFragmentManager());
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. }
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. }
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. }
77. @Override
78. protected void onDestroy() {
79. super.onDestroy();
80. }
82. public class ViewPagerAdapter extends FragmentPagerAdapter {
84. public ViewPagerAdapter(FragmentManager fm) {
85. super(fm);
86. // TODO Auto-generated constructor stub
87. }
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. }
103. @Override
104. public int getCount() {
105. // TODO Auto-generated method stub
106. return TAB_INDEX_COUNT;
107. }
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. }
127. @Override
128. public void onTabReselected(Tab tab, FragmentTransaction ft) {
129. // TODO Auto-generated method stub
131. }
133. @Override
134. public void onTabSelected(Tab tab, FragmentTransaction ft) {
135. // TODO Auto-generated method stub
136. mViewPager.setCurrentItem(tab.getPosition());
137. }
139. @Override
140. public void onTabUnselected(Tab tab, FragmentTransaction ft) {
141. // TODO Auto-generated method stub
143. }
144. }
main.xml 的实现部分：
[html] view
plain copy
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" >
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://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. 实现功能：

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

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
plain copy
1. public class Fragment1 extends Fragment {
3. @Override
4. public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
5. return inflateAndSetupView(inflater, container, savedInstanceState, R.layout.fragment1);
6. }
8. private View inflateAndSetupView(LayoutInflater inflater, ViewGroup container,
9. Bundle savedInstanceState, int layoutResourceId) {
10. View layout = inflater.inflate(layoutResourceId, container, false);
12. return layout;
13. }
14. }
fragment1.xml 主要定义一个带有红色背景的的LinearLayout：
[html] view
plain copy
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" >
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" />
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
1. public class ActionTabWithSlippingFragmentActivity extends FragmentActivity
2. implements ActionBar.TabListener{
4. private Fragment1 mFragment1 = new Fragment1();
5. private Fragment2 mFragment2 = new Fragment2();
6. private Fragment3 mFragment3 = new Fragment3();
8. private static final int TAB_INDEX_COUNT = 3;
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;
14. private ViewPager mViewPager;
15. private ViewPagerAdapter mViewPagerAdapter;
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);
23. setUpActionBar();
24. setUpViewPager();
25. setUpTabs();
26. }
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. }
36. private void setUpViewPager() {
37. mViewPagerAdapter = new ViewPagerAdapter(getSupportFragmentManager());
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. }
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. }
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. }
77. @Override
78. protected void onDestroy() {
79. super.onDestroy();
80. }
82. public class ViewPagerAdapter extends FragmentPagerAdapter {
84. public ViewPagerAdapter(FragmentManager fm) {
85. super(fm);
86. // TODO Auto-generated constructor stub
87. }
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. }
103. @Override
104. public int getCount() {
105. // TODO Auto-generated method stub
106. return TAB_INDEX_COUNT;
107. }
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. }
127. @Override
128. public void onTabReselected(Tab tab, FragmentTransaction ft) {
129. // TODO Auto-generated method stub
131. }
133. @Override
134. public void onTabSelected(Tab tab, FragmentTransaction ft) {
135. // TODO Auto-generated method stub
136. mViewPager.setCurrentItem(tab.getPosition());
137. }
139. @Override
140. public void onTabUnselected(Tab tab, FragmentTransaction ft) {
141. // TODO Auto-generated method stub
143. }
144. }
main.xml 的实现部分：
[html] view
plain copy
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" >
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://download.csdn.net/detail/ixiaobu/4743378

【上篇】Linux系统用户账号和用户组的管理
【下篇】socket阻塞式和非阻塞式通信

作者: zjjscjl

该日志由 zjjscjl 于4年前发表在综合分类下，最后更新于 2019年11月14日.
转载请注明: 利用ViewPager+Fragment+actionbar实现可左右滑动的Action Tab | 学步园 +复制链接

抱歉!评论已关闭.

学步园

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

转载：原博地址找不到了，不好意思～～

1. ViewPager要点：

2. 实现功能：

3. 原理说明：

4. 具体步骤：

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

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

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

4.4 结束语：

2. 实现功能：

3. 原理说明：

4. 具体步骤：

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

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

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

4.4 结束语：

作者: zjjscjl

书签

最新文章New

本站推荐

返回首页