? ? ? 我們?nèi)粘Ｉ钪杏玫降奈⒉?#xff0c;QQ，微信等app在進(jìn)行頁(yè)面左右滑動(dòng)的時(shí)候，很多都可以用ViewPager來(lái)實(shí)現(xiàn)。可以說(shuō)，ViewPager在android開(kāi)發(fā)中十分常見(jiàn)并且特別實(shí)用。

Viewpager在android.support.v4.view這個(gè)軟件包中， android.support.v4.view.jar是谷歌官方給我們提供的一個(gè)兼容低版本安卓設(shè)備的軟件包，里面包囊了只有在安卓3.0以上可以使用的api。所以低版本開(kāi)發(fā)時(shí)必須加入android-support-v4.jar，并且在XML文件使用ViewPager使用時(shí)以android.support.v4.view.ViewPager加入ViewPager。同時(shí)，該軟件包還提供了一個(gè)PagerTitleStrip來(lái)顯示每一個(gè)頁(yè)卡的標(biāo)題。

使用ViewPager實(shí)現(xiàn)頁(yè)面滑動(dòng)切換的方法和ListView差不多，同樣也需要一個(gè)適配器，PagerAdapter，并且同樣的也要重寫其中的方法來(lái)實(shí)現(xiàn)。接下來(lái)我來(lái)說(shuō)一下具體實(shí)現(xiàn)ViewPager的步驟。

1，在XML布局文件中加入ViewPager，以及它相對(duì)的標(biāo)題PagerTitleStrip。

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 <!--這里一定要注意通過(guò)android.support.v4.view包來(lái)使用ViewPager和PagerTitleStrip--> 6 <android.support.v4.view.ViewPager 7 android:id="@+id/viewrpager" 8 android:layout_width="wrap_content" 9 android:layout_height="wrap_content" 10 android:layout_gravity="center" > 11 12 <android.support.v4.view.PagerTitleStrip 13 android:id="@+id/pagertitle" 14 android:layout_width="wrap_content" 15 android:layout_height="wrap_content" 16 android:layout_gravity="top" 17 android:background="#00000000" > 18 </android.support.v4.view.PagerTitleStrip> 19 </android.support.v4.view.ViewPager> 20 21 </RelativeLayout>

2，接下來(lái)我們要添加三個(gè)頁(yè)卡布局文件。具體內(nèi)容可以自己添加，我為了方便每張頁(yè)卡上只是用了一張圖片作為背景。

3，為ViewPager添加一個(gè)適配器，這里我寫了一個(gè)子類繼承PagerAdapter。在子類中我們最重要的是要重寫以下四個(gè)方法：

• instantiateItem(ViewGroup, int)
• destroyItem(ViewGroup, int, Object)
• getCount()
• isViewFromObject(View, Object)

當(dāng)然，如果想要更多更具體的功能，我們還可以重寫其中的其他方法，但是以上四個(gè)方法是最必要的也是必須要重寫實(shí)現(xiàn)的。

以下是該部分代碼：

1 package com.example.android_viewpage; 2 3 import java.util.List; 4 5 import android.content.Context; 6 import android.support.v4.view.PagerAdapter; 7 import android.support.v4.view.ViewPager; 8 import android.view.View; 9 10 public class MyAdapter extends PagerAdapter { 11 private List<View> list; 12 private List<String> titlelist; 13 14 public MyAdapter(List<String> titlelist, List<View> list) { 15 this.titlelist = titlelist; 16 this.list = list; 17 } 18 //這里獲得當(dāng)前頁(yè)卡的標(biāo)題 19 @Override 20 public CharSequence getPageTitle(int position) { 21 return titlelist.get(position); 22 } 23 @Override 24 public Object instantiateItem(View container, int position) { 25 ((ViewPager) container).addView(list.get(position)); 26 return list.get(position); 27 } 28 //銷毀頁(yè)卡 29 @Override 30 public void destroyItem(View container, int position, Object object) { 31 ((ViewPager) container).removeView(list.get(position)); 32 } 33 //得到所有頁(yè)卡的個(gè)數(shù) 34 @Override 35 public int getCount() { 36 return list.size(); 37 } 38 //判斷當(dāng)前顯示頁(yè)卡是否匹配 39 @Override 40 public boolean isViewFromObject(View arg0, Object arg1) { 41 return arg0 == arg1; 42 } 43 44 }

4，最后在MainActivity中將你想要的頁(yè)卡和標(biāo)題分別存放在List中，然后將定義好的適配器供ViewPager使用就可以了。

以下是該部分代碼：

1 package com.example.android_viewpage; 2 3 import java.util.ArrayList; 4 import java.util.List; 5 import android.app.Activity; 6 import android.os.Bundle; 7 import android.support.v4.view.PagerTabStrip; 8 import android.support.v4.view.PagerTitleStrip; 9 import android.support.v4.view.ViewPager; 10 import android.view.LayoutInflater; 11 import android.view.View; 12 13 public class MainActivity extends Activity { 14 private ViewPager viewPager; 15 private PagerTitleStrip pagerTitleStrip; 16 private MyAdapter adapter; 17 private List<View> list; 18 private List<String> titlelist; 19 20 @Override 21 protected void onCreate(Bundle savedInstanceState) { 22 super.onCreate(savedInstanceState); 23 setContentView(R.layout.activity_main); 24 viewPager = (ViewPager) findViewById(R.id.viewrpager); 25 pagerTitleStrip = (PagerTitleStrip) findViewById(R.id.pagertitle); 26 list = new ArrayList<View>(); 27 list.add(LayoutInflater.from(this).inflate(R.layout.view1, null)); 28 list.add(LayoutInflater.from(this).inflate(R.layout.view2, null)); 29 list.add(LayoutInflater.from(this).inflate(R.layout.view3, null)); 30 titlelist = new ArrayList<String>(); 31 titlelist.add("第一頁(yè)"); 32 titlelist.add("第二頁(yè)"); 33 titlelist.add("第三頁(yè)"); 34 adapter = new MyAdapter(titlelist, list); 35 viewPager.setAdapter(adapter); 36 } 37 38 }

這樣就簡(jiǎn)單的實(shí)現(xiàn)了頁(yè)面滑動(dòng)切換的功能了。簡(jiǎn)要效果圖如下：

但是我發(fā)現(xiàn)當(dāng)我在滑動(dòng)的時(shí)候標(biāo)題的位置也跟著在一起移動(dòng)，我想讓頁(yè)面在滑動(dòng)的時(shí)候，標(biāo)題不移動(dòng)，但是要顯示出不同的狀態(tài)來(lái)。這里我簡(jiǎn)要的弄了一個(gè)類似微信的切換風(fēng)格，在頁(yè)卡滑動(dòng)的時(shí)候讓下方的按鈕標(biāo)題不同但顯示出當(dāng)前的狀態(tài)，同時(shí)要求在點(diǎn)擊下方的按鈕時(shí)，也讓頁(yè)面切換到相對(duì)的狀態(tài)下。

相比上面那個(gè)程序，這個(gè)主要的是設(shè)置了按鈕的監(jiān)聽(tīng)事件和頁(yè)面滑動(dòng)的監(jiān)聽(tīng)事件。

其中頁(yè)面滑動(dòng)的監(jiān)聽(tīng)事件是setOnPageChangeListener（）。它有onPageSelected（），onPageScrolled（），onPageScrollStateChanged（）三個(gè)方法，我這里只是對(duì)onPageSelected（）方法進(jìn)行了重寫。

以下是MainActivity部分的代碼：

1 package com.example.viewpagertest; 2 3 import java.util.ArrayList; 4 import java.util.List; 5 6 import android.R.integer; 7 import android.app.Activity; 8 import android.os.Bundle; 9 import android.support.v4.view.ViewPager; 10 import android.support.v4.view.ViewPager.OnPageChangeListener; 11 import android.view.LayoutInflater; 12 import android.view.View; 13 import android.view.View.OnClickListener; 14 import android.view.Window; 15 import android.widget.ImageButton; 16 import android.widget.LinearLayout; 17 18 public class MainActivity extends Activity implements OnClickListener { 19 20 private List<View> mPage; 21 private MyPagerAdapter adapter; 22 private ViewPager viewPager; 23 24 private ImageButton weixinImg; 25 private ImageButton friendImg; 26 private ImageButton addressImg; 27 private ImageButton settingImg; 28 private LinearLayout weixin; 29 private LinearLayout friend; 30 private LinearLayout address; 31 private LinearLayout setting; 32 33 private static final int WEIXIN_STATE = 0; 34 private static final int FRIEND_STATE = 1; 35 private static final int ADDRESS_STATE = 2; 36 private static final int SETTING_STATE = 3; 37 38 @Override 39 protected void onCreate(Bundle savedInstanceState) { 40 super.onCreate(savedInstanceState); 41 requestWindowFeature(Window.FEATURE_NO_TITLE); 42 setContentView(R.layout.activity_main); 43 intiView(); 44 getClickEvent(); 45 } 46 47 48 49 private void intiView() { 50 51 // 呈現(xiàn)頁(yè)面滑動(dòng)效果 52 viewPager = (ViewPager) findViewById(R.id.viewpage); 53 mPage = new ArrayList<View>(); 54 mPage.add(LayoutInflater.from(this).inflate(R.layout.pageone, null)); 55 mPage.add(LayoutInflater.from(this).inflate(R.layout.pagetwo, null)); 56 mPage.add(LayoutInflater.from(this).inflate(R.layout.pagethree, null)); 57 mPage.add(LayoutInflater.from(this).inflate(R.layout.pagefour, null)); 58 adapter = new MyPagerAdapter(mPage); 59 viewPager.setAdapter(adapter); 60 61 //加載控件 62 weixinImg = (ImageButton) findViewById(R.id.id_weixin_img); 63 friendImg = (ImageButton) findViewById(R.id.id_frd_img); 64 addressImg = (ImageButton) findViewById(R.id.id_address_img); 65 settingImg = (ImageButton) findViewById(R.id.id_settint_img); 66 67 weixin = (LinearLayout) findViewById(R.id.id_weixin); 68 friend = (LinearLayout) findViewById(R.id.id_frd); 69 address = (LinearLayout) findViewById(R.id.id_address); 70 setting = (LinearLayout) findViewById(R.id.id_setting); 71 72 } 73 /** 74 * 按鈕的點(diǎn)擊事件：當(dāng)點(diǎn)擊按鈕時(shí)，先讓所有的按鈕變成暗色， 75 * 然后將所點(diǎn)擊的按鈕設(shè)置成亮色，并轉(zhuǎn)到按鈕所屬頁(yè)面 76 */ 77 @Override 78 public void onClick(View v) { 79 setImg(); 80 switch (v.getId()) { 81 case R.id.id_weixin: 82 viewPager.setCurrentItem(WEIXIN_STATE); 83 weixinImg.setImageResource(R.drawable.tab_weixin_pressed); 84 break; 85 86 case R.id.id_frd: 87 viewPager.setCurrentItem(FRIEND_STATE); 88 friendImg.setImageResource(R.drawable.tab_find_frd_pressed); 89 break; 90 91 case R.id.id_address: 92 viewPager.setCurrentItem(ADDRESS_STATE); 93 addressImg.setImageResource(R.drawable.tab_address_pressed); 94 break; 95 96 case R.id.id_setting: 97 viewPager.setCurrentItem(SETTING_STATE); 98 settingImg.setImageResource(R.drawable.tab_settings_pressed); 99 break; 100 101 } 102 103 } 104 private void getClickEvent() { 105 weixin.setOnClickListener(this); 106 friend.setOnClickListener(this); 107 address.setOnClickListener(this); 108 setting.setOnClickListener(this); 109 /** 110 * 頁(yè)面滑動(dòng)的監(jiān)聽(tīng)事件：滑動(dòng)頁(yè)面時(shí)，先將所有按鈕變成暗色 111 * 再把頁(yè)面所屬的按鈕變成亮色，表示所屬頁(yè)面 112 */ 113 viewPager.setOnPageChangeListener(new OnPageChangeListener() { 114 115 @Override 116 public void onPageSelected(int arg0) { 117 setImg(); 118 switch (arg0) { 119 case WEIXIN_STATE: 120 weixinImg.setImageResource(R.drawable.tab_weixin_pressed); 121 break; 122 case FRIEND_STATE: 123 friendImg.setImageResource(R.drawable.tab_find_frd_pressed); 124 break; 125 case ADDRESS_STATE: 126 addressImg.setImageResource(R.drawable.tab_address_pressed); 127 break; 128 case SETTING_STATE: 129 settingImg 130 .setImageResource(R.drawable.tab_settings_pressed); 131 break; 132 133 } 134 } 135 136 @Override 137 public void onPageScrolled(int arg0, float arg1, int arg2) { 138 139 } 140 141 @Override 142 public void onPageScrollStateChanged(int arg0) { 143 144 } 145 }); 146 147 } 148 //在點(diǎn)擊按鈕或者活動(dòng)頁(yè)面的時(shí)候，讓所有按鈕變成暗色 149 private void setImg() { 150 weixinImg.setImageResource(R.drawable.tab_weixin_normal); 151 friendImg.setImageResource(R.drawable.tab_find_frd_normal); 152 addressImg.setImageResource(R.drawable.tab_address_normal); 153 settingImg.setImageResource(R.drawable.tab_settings_normal); 154 155 } 156 157 }

這樣就基本完成了想要的效果，以下是效果圖：

總結(jié)

以上是生活随笔為你收集整理的android ViewPager页面左右滑动切换的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。