Android 应用开发---6.ViewPager+Fragment的基本使用

ViewPager+Fragment的基本使用

 

利用ViewPager+Fragment简单实现页面的切换

项目的大概组成：

以下是代码的实现，首先在activity_main.xml新建菜单栏和ViewPager控件：

 

1. <LinearLayout 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. android:orientation="vertical"

6. tools:context="com.itman.viewpagerdemo.MainActivity" >

7.  

8. <LinearLayout

9. android:layout_width="match_parent"

10. android:layout_height="wrap_content"

11. android:orientation="horizontal" >

12.  

13. <TextView

14. android:id="@+id/tv_item_one"

15. android:layout_width="wrap_content"

16. android:layout_height="wrap_content"

17. android:layout_weight="1"

18. android:gravity="center_horizontal"

19. android:text="菜单一" />

20.  

21. <TextView

22. android:id="@+id/tv_item_two"

23. android:layout_width="wrap_content"

24. android:layout_height="wrap_content"

25. android:layout_weight="1"

26. android:gravity="center_horizontal"

27. android:text="菜单二" />

28.  

29. <TextView

30. android:id="@+id/tv_item_three"

31. android:layout_width="wrap_content"

32. android:layout_height="wrap_content"

33. android:layout_weight="1"

34. android:gravity="center_horizontal"

35. android:text="菜单三" />

36. </LinearLayout>

37.  

38. <android.support.v4.view.ViewPager

39. android:id="@+id/myViewPager"

40. android:layout_width="match_parent"

41. android:layout_height="match_parent"

42. android:layout_weight="1" />

43.  

44. </LinearLayout>

 

 

接下来就新建三个Fragment页面做好准备，Fragment的布局文件：

 

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.  

6. <TextView

7. android:layout_width="match_parent"

8. android:layout_height="match_parent"

9. android:gravity="center"

10. android:text="我是菜单一"

11. android:textSize="30sp" />

12.  

13. </RelativeLayout>

 

Fragment的Java文件：

 

1. package com.itman.viewpagerdemo;

2.  

3. import android.os.Bundle;

4. import android.support.annotation.Nullable;

5. import android.support.v4.app.Fragment;

6. import android.view.LayoutInflater;

7. import android.view.View;

8. import android.view.ViewGroup;

9.  

10. public class OneFragment extends Fragment{

11.  

12. @Override

13. public View onCreateView(LayoutInflater inflater,

14. ViewGroup container, Bundle savedInstanceState) {

15. View view = inflater.inflate(R.layout.fragment_one, null);

16. return view;

17. }

18.  

19. }

 

三个fragment页面都一样的，就不全部贴出来了，接下来就准备添加Fragment的适配器TabFragmentPagerAdapter：

 

1. package com.itman.viewpagerdemo;

2.  

3. import java.util.List;

4. import android.support.v4.app.Fragment;

5. import android.support.v4.app.FragmentManager;

6. import android.support.v4.app.FragmentPagerAdapter;

7.  

8. public class TabFragmentPagerAdapter extends FragmentPagerAdapter {

9. private FragmentManager mfragmentManager;

10. private List<Fragment> mlist;

11.  

12. public TabFragmentPagerAdapter(FragmentManager fm, List<Fragment> list) {

13. super(fm);

14. this.mlist = list;

15. }

16.  

17. @Override

18. public Fragment getItem(int arg0) {

19. return mlist.get(arg0);//显示第几个页面

20. }

21.  

22. @Override

23. public int getCount() {

24. return mlist.size();//有几个页面

25. }

26. }

 

准备工作完成，接下来是MainActivit.Java的代码实现：

 

1. package com.itman.viewpagerdemo;

2.  

3. import java.util.ArrayList;

4. import java.util.List;

5. import android.graphics.Color;

6. import android.os.Bundle;

7. import android.support.v4.app.Fragment;

8. import android.support.v4.view.ViewPager;

9. import android.support.v4.view.ViewPager.OnPageChangeListener;

10. import android.support.v7.app.ActionBarActivity;

11. import android.view.View;

12. import android.view.View.OnClickListener;

13. import android.widget.TextView;

14.  

15. public class MainActivity extends ActionBarActivity implements OnClickListener {

16.  

17. private TextView tv_item_one;

18. private TextView tv_item_two;

19. private TextView tv_item_three;

20. private ViewPager myViewPager;

21. private List<Fragment> list;

22. private TabFragmentPagerAdapter adapter;

23.  

24. @Override

25. protected void onCreate(Bundle savedInstanceState) {

26. super.onCreate(savedInstanceState);

27. setContentView(R.layout.activity_main);

28. InitView();

29.  

30. // 设置菜单栏的点击事件

31. tv_item_one.setOnClickListener(this);

32. tv_item_two.setOnClickListener(this);

33. tv_item_three.setOnClickListener(this);

34. myViewPager.setOnPageChangeListener(new MyPagerChangeListener());

35.  

36. //把Fragment添加到List集合里面

37. list = new ArrayList<>();

38. list.add(new OneFragment());

39. list.add(new TwoFragment());

40. list.add(new ThreeFragment());

41. adapter = new TabFragmentPagerAdapter(getSupportFragmentManager(), list);

42. myViewPager.setAdapter(adapter);

43. myViewPager.setCurrentItem(0); //初始化显示第一个页面

44. tv_item_one.setBackgroundColor(Color.RED);//被选中就为红色

45. }

46.  

47. /**

48. * 初始化控件

49. */

50. private void InitView() {

51. tv_item_one = (TextView) findViewById(R.id.tv_item_one);

52. tv_item_two = (TextView) findViewById(R.id.tv_item_two);

53. tv_item_three = (TextView) findViewById(R.id.tv_item_three);

54. myViewPager = (ViewPager) findViewById(R.id.myViewPager);

55. }

56.  

57. /**

58. * 点击事件

59. */

60. @Override

61. public void onClick(View v) {

62. switch (v.getId()) {

63. case R.id.tv_item_one:

64. myViewPager.setCurrentItem(0);

65. tv_item_one.setBackgroundColor(Color.RED);

66. tv_item_two.setBackgroundColor(Color.WHITE);

67. tv_item_three.setBackgroundColor(Color.WHITE);

68. break;

69. case R.id.tv_item_two:

70. myViewPager.setCurrentItem(1);

71. tv_item_one.setBackgroundColor(Color.WHITE);

72. tv_item_two.setBackgroundColor(Color.RED);

73. tv_item_three.setBackgroundColor(Color.WHITE);

74. break;

75. case R.id.tv_item_three:

76. myViewPager.setCurrentItem(2);

77. tv_item_one.setBackgroundColor(Color.WHITE);

78. tv_item_two.setBackgroundColor(Color.WHITE);

79. tv_item_three.setBackgroundColor(Color.RED);

80. break;

81. }

82. }

83.  

84. /**

85. * 设置一个ViewPager的侦听事件，当左右滑动ViewPager时菜单栏被选中状态跟着改变

86. *

87. */

88. public class MyPagerChangeListener implements OnPageChangeListener {

89.  

90. @Override

91. public void onPageScrollStateChanged(int arg0) {

92. }

93.  

94. @Override

95. public void onPageScrolled(int arg0, float arg1, int arg2) {

96. }

97.  

98. @Override

99. public void onPageSelected(int arg0) {

100. switch (arg0) {

101. case 0:

102. tv_item_one.setBackgroundColor(Color.RED);

103. tv_item_two.setBackgroundColor(Color.WHITE);

104. tv_item_three.setBackgroundColor(Color.WHITE);

105. break;

106. case 1:

107. tv_item_one.setBackgroundColor(Color.WHITE);

108. tv_item_two.setBackgroundColor(Color.RED);

109. tv_item_three.setBackgroundColor(Color.WHITE);

110. break;

111. case 2:

112. tv_item_one.setBackgroundColor(Color.WHITE);

113. tv_item_two.setBackgroundColor(Color.WHITE);

114. tv_item_three.setBackgroundColor(Color.RED);

115. break;

116. }

117. }

118. }

119.  

120. }