ViewPager+Fragment一步步打造頂部導航介面滑動效果

在許多應用中，我們常常用到這麼一個效果：

可以看到，由於現在的應用資料經常需要涉及到多個模組，所以常常需要使用滑動標籤在多個頁面之間跳轉，實現這樣的效果有很多種方式（比如系統自帶的tabhost控制元件），但android-support-v4包中還為我們提供了另外一個專門實現滑動頁面的控制元件——ViewPager,ViewPager中提供了很多介面，能讓我們用很少的程式碼就能實現分屏頁面滑動，本文也將分享如何一步一步實現ViewPager+fragment組合來輕鬆實現分頁滑動效果，先上最終效果圖（由於gif總是錄製失敗，此處使用靜態圖）：

實現這樣一個效果，主要分為以下幾步： 1.建立一個FragmentActivity作為主頁面，並設計好對應的佈局檔案 2.建立幾個fragment作為每個子頁面的容器，並建立對應的佈局檔案 3.為ViewPager新增一個Adapter，將所有fragment新增進去 4.實現ViewPager的OnPageChangeListener監聽事件，重寫onPageSelected()方法，實現左右滑動頁面 5.實現每個標題的onClick事件，點選跳轉到相應頁面 6.新增指示標籤塊，也就是標題欄下面那個紅色的指示，計算指示標籤的位移，使其與標題同步變化

工程目錄如下：

接下來我們開始一步一步實現這個效果：

1.建立一個FragmentActivity作為主頁面，並設計好對應的佈局檔案

先來看一下佈局檔案activity_main.xml:

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. <LinearLayout

7. android:id="@+id/bottomlinear"

8. android:layout_width="fill_parent"

9. android:layout_height="0dp"

10. android:layout_weight="1"

11. android:orientation="horizontal"

12. android:background="#DCDCDC">

13. <Button

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

15. android:layout_width="0dp"

16. android:layout_height="fill_parent"

17. android:layout_weight="1"

18. android:padding="-5dp"

19. android:textSize="14sp"

20. android:text="最新"

21. />

22. <Button

23. android:id="@+id/btn_second"

24. android:layout_width="0dp"

25. android:layout_height="fill_parent"

26. android:layout_weight="1"

27. android:textSize="14sp"

28. android:text="前端"/>

29. <Button

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

31. android:layout_width="0dp"

32. android:layout_height="fill_parent"

33. android:layout_weight="1.5"

34. android:textSize="14sp"

35. android:text="移動開發"/>

36. <Button

37. android:id="@+id/btn_four"

38. android:layout_width="0dp"

39. android:layout_height="fill_parent"

40. android:layout_weight="1"

41. android:textSize="14sp"

42. android:text="語言"/>

43. <Button

44. android:id="@+id/btn_fifth"

45. android:layout_width="0dp"

46. android:layout_height="fill_parent"

47. android:layout_weight="1.5"

48. android:textSize="14sp"

49. android:text="遊戲&影象"/>

50. </LinearLayout>

51. <LinearLayout

52. android:id="@+id/cursorarea"

53. android:layout_width="fill_parent"

54. android:background="#CDCDCD"

55. android:orientation="horizontal"

56. android:layout_height="2dp">

57. <ImageView

58. android:id="@+id/cursor_btn"

59. android:layout_width="fill_parent"

60. android:layout_height="fill_parent">

61. </ImageView>

62. </LinearLayout>

63. <android.support.v4.view.ViewPager

64. android:id="@+id/myviewpager"

65. android:layout_width="fill_parent"

66. android:layout_height="0dp"

67. android:layout_weight="12">

68. </android.support.v4.view.ViewPager>

69. </LinearLayout>

其中，建立了五個按鈕作為標題欄的5個標題，建立一個ImageView作為指示標籤，再匯入一個ViewPager位於標題欄下面

MainActivity.java（注意是繼承自FragmentActivity類）：

1. public class MainActivity extends FragmentActivity{

2. private ViewPager myviewpager;

3. //選項卡中的按鈕

4. private Button btn_first;

5. private Button btn_second;

6. private Button btn_third;

7. private Button btn_four;

8. private Button btn_fifth;

9. //作為指示標籤的按鈕

10. private ImageView cursor;

11. //標誌指示標籤的橫座標

12. float cursorX = 0;

13. //所有按鈕的寬度的陣列

14. private int[] widthArgs;

15. //所有標題按鈕的陣列

16. private Button[] btnArgs;

17. @Override

18. protected void onCreate(Bundle savedInstanceState) {

19. super.onCreate(savedInstanceState);

20. setContentView(R.layout.activity_main);

21. initView();

22. }

23. //初始化佈局

24. public void initView(){

25. myviewpager = (ViewPager)this.findViewById(R.id.myviewpager);

26. btn_first = (Button)this.findViewById(R.id.btn_first);

27. btn_second = (Button)this.findViewById(R.id.btn_second);

28. btn_third = (Button)this.findViewById(R.id.btn_third);

29. btn_four = (Button)this.findViewById(R.id.btn_four);

30. btn_fifth = (Button)this.findViewById(R.id.btn_fifth);

31. //初始化按鈕陣列

32. btnArgs = new Button[]{btn_first,btn_second,btn_third,btn_four,btn_fifth};

33. //指示標籤設定為紅色

34. cursor = (ImageView)this.findViewById(R.id.cursor_btn);

35. cursor.setBackgroundColor(Color.RED);

36. btn_first.setOnClickListener(this);

37. btn_second.setOnClickListener(this);

38. btn_third.setOnClickListener(this);

39. btn_four.setOnClickListener(this);

40. btn_fifth.setOnClickListener(this);

41. //先重置所有按鈕顏色

42. resetButtonColor();

43. //再將第一個按鈕字型設定為紅色，表示預設選中第一個

44. btn_first.setTextColor(Color.RED);

45. }

46. //重置所有按鈕的顏色

47. public void resetButtonColor(){

48. btn_first.setBackgroundColor(Color.parseColor("#DCDCDC"));

49. btn_second.setBackgroundColor(Color.parseColor("#DCDCDC"));

50. btn_third.setBackgroundColor(Color.parseColor("#DCDCDC"));

51. btn_four.setBackgroundColor(Color.parseColor("#DCDCDC"));

52. btn_fifth.setBackgroundColor(Color.parseColor("#DCDCDC"));

53. btn_first.setTextColor(Color.BLACK);

54. btn_second.setTextColor(Color.BLACK);

55. btn_third.setTextColor(Color.BLACK);

56. btn_four.setTextColor(Color.BLACK);

57. btn_fifth.setTextColor(Color.BLACK);

58. }

59. }

2.建立幾個fragment作為每個子頁面的容器，並建立對應的佈局檔案

layout_first.xml:

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. <TextView

7. android:layout_width="fill_parent"

8. android:layout_height="fill_parent"

9. android:gravity="center"

10. android:layout_gravity="center"

11. android:text="這是第一個Fragment"/>

12. </LinearLayout>

FirstFragment.java:

1. public class FirstFragment extends Fragment{

2. @Override

3. public View onCreateView(LayoutInflater inflater,ViewGroup container,Bundle savedInstanceState) {

4. // TODO Auto-generated method stub

5. View v = inflater.inflate(R.layout.layout_first, container,false);

6. return v;

7. }

8. }

layout_second.xml:

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. <TextView

7. android:layout_width="fill_parent"

8. android:layout_height="fill_parent"

9. android:gravity="center"

10. android:layout_gravity="center"

11. android:text="這是第二個Fragment"/>

12. </LinearLayout>

SecondFragment.java:

1. public class SecondFragment extends Fragment{

2. @Override

3. public View onCreateView(LayoutInflater inflater,ViewGroup container,Bundle savedInstanceState) {

4. // TODO Auto-generated method stub

5. View v = inflater.inflate(R.layout.layout_second, container,false);

6. return v;

7. }

8. }

layout_thrid.xml:

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. <TextView

7. android:layout_width="fill_parent"

8. android:layout_height="fill_parent"

9. android:gravity="center"

10. android:layout_gravity="center"

11. android:text="這是第三個Fragment"/>

12. </LinearLayout>

ThridFragment.java:

1. public class ThridFragment extends Fragment{

2. @Override

3. public View onCreateView(LayoutInflater inflater,ViewGroup container,Bundle savedInstanceState) {

4. // TODO Auto-generated method stub

5. View v = inflater.inflate(R.layout.layout_thrid, container,false);

6. return v;

7. }

8. }

layout_four.xml:

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. <TextView

7. android:layout_width="fill_parent"

8. android:layout_height="fill_parent"

9. android:gravity="center"

10. android:layout_gravity="center"

11. android:text="這是第四個Fragment"/>

12. </LinearLayout>

FourFragment.java:

1. public class FourFragment extends Fragment{

2. @Override

3. public View onCreateView(LayoutInflater inflater,ViewGroup container,Bundle savedInstanceState) {

4. // TODO Auto-generated method stub

5. View v = inflater.inflate(R.layout.layout_four, container,false);

6. return v;

7. }

8. }

layout_fifth.xml:

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. <TextView

7. android:layout_width="fill_parent"

8. android:layout_height="fill_parent"

9. android:gravity="center"

10. android:layout_gravity="center"

11. android:text="這是第五個Fragment"/>

12. </LinearLayout>

FifthFragment.java:

1. public class FifthFragment extends Fragment{

2. @Override

3. public View onCreateView(LayoutInflater inflater,ViewGroup container,Bundle savedInstanceState) {

4. // TODO Auto-generated method stub

5. View v = inflater.inflate(R.layout.layout_fifth, container,false);

6. return v;

7. }

8. }

每個Fragment的內容佈局基本一致，這裡只是簡單地用一個TextView來表示當前頁面是哪個頁面，在onCreateView中使用inflate載入對應的佈局檔案

3.為ViewPager新增一個Adapter，將所有fragment新增進去

上面已經建立好了每個子頁面對應的fragment，接下來要做的便是將這些fragment裝載到ViewPager中去，android.support.v4.app包為我們提供了一個特別的迭代器——FragmentPagerAdapter，我們重寫它的getItem()和getCount()方法，分別返回第幾個fragment以及fragment的數量，可以這麼理解：此步相當於讓ViewPager能夠控制管理我們的fragment MyFragmentPagerAdapter.java:

1. public class MyFragmentPagerAdapter extends FragmentPagerAdapter{

2. //儲存所有的fragment

3. private List<Fragment> list;

4. public MyFragmentPagerAdapter(FragmentManager fm, ArrayList<Fragment> list){

5. super(fm);

6. this.list = list;

7. }

8. @Override

9. public Fragment getItem(int arg0) {

10. // TODO Auto-generated method stub

11. return list.get(arg0);

12. }

13. @Override

14. public int getCount() {

15. // TODO Auto-generated method stub

16. return list.size();

17. }

18. }

建立完adapter後，我們還要在MainActivity中將所有fragment新增到一個list並作為構造引數傳到adapter中去：

1. //fragment的集合，對應每個子頁面

2. private ArrayList<Fragment> fragments;

3. fragments = new ArrayList<Fragment>();

4. fragments.add(new FirstFragment());

5. fragments.add(new SecondFragment());

6. fragments.add(new ThridFragment());

7. fragments.add(new FourFragment());

8. fragments.add(new FifthFragment());

9. MyFragmentPagerAdapter adapter = new MyFragmentPagerAdapter(getSupportFragmentManager(),fragments);

將裝載了資料的adapter設定給viewpager

myviewpager.setAdapter(adapter);

4.實現ViewPager的OnPageChangeListener監聽事件，重寫onPageSelected()方法，實現左右滑動頁面

讓Activity實現監聽介面：

為myviewpager註冊監聽：

myviewpager.setOnPageChangeListener(this);

實現三個介面方法，這裡關鍵在於重寫onPageSelected方法，onPageSelected會在每次滑動ViewPager的時候觸發，所以所有滑動時的變化都可以在這裡面定義，比如標題按鈕的顏色隨著滑動的變化等

1. @Override

2. public void onPageScrollStateChanged(int arg0) {

3. // TODO Auto-generated method stub

4. }

5. @Override

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

7. // TODO Auto-generated method stub

8. }

9. @Override

10. public void onPageSelected(int arg0) {

11. // TODO Auto-generated method stub

12. //每次滑動首先重置所有按鈕的顏色

13. resetButtonColor();

14. //將滑動到的當前按鈕顏色設定為紅色

15. btnArgs[arg0].setTextColor(Color.RED);

16. }

5.實現每個標題的onClick事件，點選跳轉到相應頁面

在上一步，已經實現了左右滑動切換頁面效果，但發現點選標題欄並無響應，所以我們需要為每個button新增一個點選事件： 讓Activity實現監聽介面：

為所有標題按鈕註冊監聽：

1. btn_first.setOnClickListener(this);

2. btn_second.setOnClickListener(this);

3. btn_third.setOnClickListener(this);

4. btn_four.setOnClickListener(this);

5. btn_fifth.setOnClickListener(this);

重寫onclick：

1. @Override

2. public void onClick(View whichbtn) {

3. // TODO Auto-generated method stub

4. switch (whichbtn.getId()) {

5. case R.id.btn_first:

6. myviewpager.setCurrentItem(0);

7. break;

8. case R.id.btn_second:

9. myviewpager.setCurrentItem(1);

10. break;

11. case R.id.btn_third:

12. myviewpager.setCurrentItem(2);

13. break;

14. case R.id.btn_four:

15. myviewpager.setCurrentItem(3);

16. break;

17. case R.id.btn_fifth:

18. myviewpager.setCurrentItem(4);

19. break;

20. }

21. }

可以看到，只是一句簡單的setCurrentItem方法的呼叫，就能實現跳轉到對應的子頁面，所以才說ViewPager非常的方便

6.新增指示標籤塊，也就是標題欄下面那個紅色的指示，計算指示標籤的位移，使其與標題同步變化

上面的步驟其實已經實現了大部分功能，但為了讓我們的介面更加友好一些，需要再新增一個指示器，用來指示當前處於哪個頁面，要實現這種功能，要注意以下幾點：【在滑動到某個子頁面時，指示器需要橫向跳到相應的位置】 【在滑動到某個子頁面時，指示器需要變化到與當前標題一樣的大小】 如圖：

首先建立兩個陣列，便於根據下標得到某個按鈕以及對應的寬度：

1. //所有按鈕的寬度的集合

2. private int[] widthArgs;

3. //所有按鈕的集合

4. private Button[] btnArgs;

注意兩個陣列例項化的位置不同，btnArgs是像平常一樣在onCreate方法中例項化，而widthArgs在滑動的時候再例項化，因為在onCreate方法中獲取不了所有按鈕的寬度，因為系統還未測量它們的寬度 btnArgs的例項化：

btnArgs = new Button[]{btn_first,btn_second,btn_third,btn_four,btn_fifth};

widthArgs的例項化：

初始化指示器位置和大小：

1. btn_first.post(new Runnable(){

2. @Override

3. public void run() {

4. LinearLayout.LayoutParams lp = (LinearLayout.LayoutParams)cursor.getLayoutParams();

5. //減去邊距*2，以對齊標題欄文字

6. lp.width = btn_first.getWidth()-btn_first.getPaddingLeft()*2;

7. cursor.setLayoutParams(lp);

8. cursor.setX(btn_first.getPaddingLeft());

9. }

10. });

這裡需要解釋一下，為什麼不直接cursor.setWidth()和cursor.setX()？因為Android系統繪製原理是隻有全部遍歷測量之後才會佈局，只有在整個佈局繪製完畢後，檢視才能得到自身的高和寬。所以在正常情況下，在OnCreate()方法中直接獲取控制元件的寬度和高度取得值是0。而我們此處設定指示器的大小和位置都需要用到第一個按鈕的大小作為參考值，所以可以通過post將一個runnable投遞到訊息佇列的尾部，然後等待UI執行緒Looper呼叫此runnable的時候，view也已經初始化好了。這個時候就能成功獲取控制元件的寬高。

指示器的動態變化方法如下，註釋得已經很清楚：

1. //指示器的跳轉，傳入當前所處的頁面的下標

2. public void cursorAnim(int curItem){

3. //每次呼叫，就將指示器的橫座標設定為0，即開始的位置

4. cursorX = 0;

5. //再根據當前的curItem來設定指示器的寬度

6. LinearLayout.LayoutParams lp = (LinearLayout.LayoutParams)cursor.getLayoutParams();

7. //減去邊距*2，以對齊標題欄文字

8. lp.width = widthArgs[curItem]-btnArgs[0].getPaddingLeft()*2;

9. cursor.setLayoutParams(lp);

10. //迴圈獲取當前頁之前的所有頁面的寬度

11. for(int i=0; i<curItem; i++){

12. cursorX = cursorX + btnArgs[i].getWidth();

13. }

14. //再加上當前頁面的左邊距，即為指示器當前應處的位置

15. cursor.setX(cursorX+btnArgs[curItem].getPaddingLeft());

16. }

接下來只需要在剛才的那些onClick以及onPageSelected方法中呼叫它就可以了：

好了，總算完成所要的效果，完整的MainActivity程式碼如下：

1. public class MainActivity extends FragmentActivity implements OnClickListener, OnPageChangeListener{

2. private ViewPager myviewpager;

3. //fragment的集合，對應每個子頁面

4. private ArrayList<Fragment> fragments;

5. //選項卡中的按鈕

6. private Button btn_first;

7. private Button btn_second;

8. private Button btn_third;

9. private Button btn_four;

10. private Button btn_fifth;

11. //作為指示標籤的按鈕

12. private ImageView cursor;

13. //標誌指示標籤的橫座標

14. float cursorX = 0;

15. //所有按鈕的寬度的集合

16. private int[] widthArgs;

17. //所有按鈕的集合

18. private Button[] btnArgs;

19. @Override

20. protected void onCreate(Bundle savedInstanceState) {

21. super.onCreate(savedInstanceState);

22. setContentView(R.layout.activity_main);

23. initView();

24. }

25. public void initView(){

26. myviewpager = (ViewPager)this.findViewById(R.id.myviewpager);

27. btn_first = (Button)this.findViewById(R.id.btn_first);

28. btn_second = (Button)this.findViewById(R.id.btn_second);

29. btn_third = (Button)this.findViewById(R.id.btn_third);

30. btn_four = (Button)this.findViewById(R.id.btn_four);

31. btn_fifth = (Button)this.findViewById(R.id.btn_fifth);

32. btnArgs = new Button[]{btn_first,btn_second,btn_third,btn_four,btn_fifth};

33. cursor = (ImageView)this.findViewById(R.id.cursor_btn);

34. cursor.setBackgroundColor(Color.RED);

35. myviewpager.setOnPageChangeListener(this);

36. btn_first.setOnClickListener(this);

37. btn_second.setOnClickListener(this);

38. btn_third.setOnClickListener(this);

39. btn_four.setOnClickListener(this);

40. btn_fifth.setOnClickListener(this);

41. fragments = new ArrayList<Fragment>();

42. fragments.add(new FirstFragment());

43. fragments.add(new SecondFragment());

44. fragments.add(new ThridFragment());

45. fragments.add(new FourFragment());

46. fragments.add(new FifthFragment());

47. MyFragmentPagerAdapter adapter = new MyFragmentPagerAdapter(getSupportFragmentManager(),fragments);

48. myviewpager.setAdapter(adapter);

49. resetButtonColor();

50. btn_first.setTextColor(Color.RED);

51. }

52. //重置所有按鈕的顏色

53. public void resetButtonColor(){

54. btn_first.setBackgroundColor(Color.parseColor("#DCDCDC"));

55. btn_second.setBackgroundColor(Color.parseColor("#DCDCDC"));

56. btn_third.setBackgroundColor(Color.parseColor("#DCDCDC"));

57. btn_four.setBackgroundColor(Color.parseColor("#DCDCDC"));

58. btn_fifth.setBackgroundColor(Color.parseColor("#DCDCDC"));

59. btn_first.setTextColor(Color.BLACK);

60. btn_second.setTextColor(Color.BLACK);

61. btn_third.setTextColor(Color.BLACK);

62. btn_four.setTextColor(Color.BLACK);

63. btn_fifth.setTextColor(Color.BLACK);

64. }

65. @Override

66. public void onClick(View whichbtn) {

67. // TODO Auto-generated method stub

68. switch (whichbtn.getId()) {

69. case R.id.btn_first:

70. myviewpager.setCurrentItem(0);

71. cursorAnim(0);

72. break;

73. case R.id.btn_second:

74. myviewpager.setCurrentItem(1);

75. cursorAnim(1);

76. break;

77. case R.id.btn_third:

78. myviewpager.setCurrentItem(2);

79. cursorAnim(2);

80. break;

81. case R.id.btn_four:

82. myviewpager.setCurrentItem(3);

83. cursorAnim(3);

84. break;

85. case R.id.btn_fifth:

86. myviewpager.setCurrentItem(4);

87. cursorAnim(4);

88. break;

89. }

90. }

91. @Override

92. public void onPageScrollStateChanged(int arg0) {

93. // TODO Auto-generated method stub

94. }

95. @Override

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

97. // TODO Auto-generated method stub

98. }

99. @Override

100. public void onPageSelected(int arg0) {

101. // TODO Auto-generated method stub

102. if(widthArgs==null){

103. widthArgs = new int[]{btn_first.getWidth(),

104. btn_second.getWidth(),

105. btn_third.getWidth(),

106. btn_four.getWidth(),

107. btn_fifth.getWidth()};

108. }

109. //每次滑動首先重置所有按鈕的顏色

110. resetButtonColor();

111. //將滑動到的當前按鈕顏色設定為紅色

112. btnArgs[arg0].setTextColor(Color.RED);

113. cursorAnim(arg0);

114. }

115. //指示器的跳轉，傳入當前所處的頁面的下標

116. public void cursorAnim(int curItem){

117. //每次呼叫，就將指示器的橫座標設定為0，即開始的位置

118. cursorX = 0;

119. //再根據當前的curItem來設定指示器的寬度

120. LinearLayout.LayoutParams lp = (LinearLayout.LayoutParams)cursor.getLayoutParams();

121. //減去邊距*2，以對齊標題欄文字

122. lp.width = widthArgs[curItem]-btnArgs[0].getPaddingLeft()*2;

123. cursor.setLayoutParams(lp);

124. //迴圈獲取當前頁之前的所有頁面的寬度

125. for(int i=0; i<curItem; i++){

126. cursorX = cursorX + btnArgs[i].getWidth();

127. }

128. //再加上當前頁面的左邊距，即為指示器當前應處的位置

129. cursor.setX(cursorX+btnArgs[curItem].getPaddingLeft());

130. }

131. }