Android ViewPager 的使用總結(jié)

2019-12-12 05:14:04

字體：大中小

供稿：網(wǎng)友

在一個(gè)窗口里面添加tab便簽，完成便簽切換來實(shí)現(xiàn)頁面的切換，這樣的好處是可以在同一個(gè)窗口里面有多個(gè)頁面，這些頁面共享同一個(gè)窗口的資源，同使用多個(gè)窗口來實(shí)現(xiàn)這個(gè)功能來得更加流暢！！

主要產(chǎn)生的類文件有activity，n個(gè)view，adapter，自定義的ViewPager，n+1個(gè)布局文件

demo所用到文件

步驟：

創(chuàng)建activity

package com.example.myviewpager;import java.util.ArrayList;import java.util.List;import android.app.Activity;import android.content.Context;import android.graphics.Color;import android.os.Bundle;import android.support.v4.view.ViewPager;import android.view.View;import android.view.View.OnClickListener;import android.widget.TextView;/** * 主窗口 * @author cgx * */public class MainActivity extends Activity implements OnClickListener { private Context mContext; private MyViewPager mPager;// 頁面內(nèi)容 private MyViewPagerAdapter pagerAdapter = null; private TextView t1, t2, t3;// 頁卡頭標(biāo) private List<View> pageList = new ArrayList<View>(); private View1 mView1; private View2 mView2; private View3 mView3; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); mContext = this; initViews(); initEvents(); initViewPager(); } private void initViews() { // TODO Auto-generated method stub  t1 = (TextView) findViewById(R.id.text1); t2 = (TextView) findViewById(R.id.text2); t3 = (TextView) findViewById(R.id.text3); mPager = (MyViewPager) findViewById(R.id.vPager); // 設(shè)置ViewPager不允許滑動(dòng) //mPager.setCanScroll(false); //一開始進(jìn)入窗口的時(shí)候，默認(rèn)第一個(gè)便簽被選中 t1.setBackgroundColor(Color.parseColor("#FFFF00")); t2.setBackgroundColor(Color.parseColor("#FFFFFF")); t3.setBackgroundColor(Color.parseColor("#FFFFFF")); } private void initEvents() { // TODO Auto-generated method stub t1.setOnClickListener(this); t2.setOnClickListener(this); t3.setOnClickListener(this); } private void initViewPager() { // TODO Auto-generated method stub pageList.clear(); if (mView1 == null) {  mView1 = new View1(mContext); } if (mView2 == null) {  mView2 = new View2(mContext); } if (mView3 == null) {  mView3 = new View3(mContext); } pageList.add(mView1.getView()); pageList.add(mView2.getView()); pageList.add(mView3.getView()); pagerAdapter = new MyViewPagerAdapter(pageList); // 緩存頁面，如果想全部都緩存的話，參數(shù)等于頁卡數(shù)減一,系統(tǒng)默認(rèn)參數(shù)為1，保存兩個(gè) mPager.setOffscreenPageLimit(2); mPager.setAdapter(pagerAdapter); // 設(shè)置Page改變監(jiān)聽器 mPager.setOnPageChangeListener(onPageChangeListener); } /** * SimpleOnPageChangeListener.該監(jiān)聽是當(dāng)我們的viewpager頁面切換的時(shí)候會(huì)觸發(fā) 在里面我們會(huì)去改變 tab的聚焦情況 * 。 因?yàn)閷?shí)現(xiàn)上viewpager與actionbar是獨(dú)立的，需要我們手動(dòng)同步 。 */ ViewPager.SimpleOnPageChangeListener onPageChangeListener = new ViewPager.SimpleOnPageChangeListener() { @Override public void onPageSelected(int position) {  /**  * setSelectedNavigationItem 方法用于設(shè)置ActionBar的聚焦tab .  * 在接下來我們判斷了SLidingMenu的手勢(shì)力模式， 如果ViewPager已經(jīng)滑到了最左邊，則我們把手勢(shì)設(shè)置成全屏的，  * 這樣更往左滑動(dòng)的時(shí)候，就會(huì)打開Menu .  */  initTab(position); } // 初始化便簽顏色 private void initTab(int position) {  // TODO Auto-generated method stub  if (position == 0) {  t1.setBackgroundColor(Color.parseColor("#FFFF00"));  t2.setBackgroundColor(Color.parseColor("#FFFFFF"));  t3.setBackgroundColor(Color.parseColor("#FFFFFF"));  } else if (position == 1) {  t1.setBackgroundColor(Color.parseColor("#FFFFFF"));  t2.setBackgroundColor(Color.parseColor("#FFFF00"));  t3.setBackgroundColor(Color.parseColor("#FFFFFF"));  } else {  t1.setBackgroundColor(Color.parseColor("#FFFFFF"));  t2.setBackgroundColor(Color.parseColor("#FFFFFF"));  t3.setBackgroundColor(Color.parseColor("#FFFF00"));  } } }; @Override public void onClick(View v) { // TODO Auto-generated method stub switch (v.getId()) { case R.id.text1:// 點(diǎn)擊第一個(gè)便簽  mPager.setCurrentItem(0, false);  break; case R.id.text2:// 點(diǎn)擊第二個(gè)便簽  mPager.setCurrentItem(1, false);  break; case R.id.text3:// 點(diǎn)擊第三個(gè)便簽  mPager.setCurrentItem(2, false);  break; default:  break; } }}

自定義MyViewPager

package com.example.myviewpager;import android.content.Context;import android.support.v4.view.ViewPager;import android.util.AttributeSet;import android.view.MotionEvent;/** * 自定義滑動(dòng)翻頁可控，可通過設(shè)置isCanScroll參數(shù)來控制是否允許滑動(dòng)切換頁面 */public class MyViewPager extends ViewPager { /** 是否允許滑動(dòng)翻頁 ,默認(rèn)可滑動(dòng)*/ private boolean isCanScroll = true; public MyViewPager(Context context, AttributeSet attrs) { super(context, attrs); } public MyViewPager(Context context) { super(context); } public boolean isCanScroll() { return isCanScroll; } /** 設(shè)置是否可以滑動(dòng)翻頁 */ public void setCanScroll(boolean isCanScroll) { this.isCanScroll = isCanScroll; } @Override public void scrollTo(int x, int y) { super.scrollTo(x, y); } // 設(shè)置禁止滑動(dòng)的關(guān)鍵 @Override public boolean onTouchEvent(MotionEvent arg0) { if (!isCanScroll)  return true; return super.onTouchEvent(arg0); } @Override public boolean onInterceptTouchEvent(MotionEvent arg0) { return super.onInterceptTouchEvent(arg0); } @Override public void setCurrentItem(int item, boolean smoothScroll) { super.setCurrentItem(item, smoothScroll); } @Override public void setCurrentItem(int item) { super.setCurrentItem(item); }}

適配器：

package com.example.myviewpager;import java.util.List;import android.support.v4.view.PagerAdapter;import android.view.View;import android.view.ViewGroup;/** * viewpager適配器 * */public class MyViewPagerAdapter extends PagerAdapter{   private List<View> mListViews;     public MyViewPagerAdapter(List<View> mListViews) {     this.mListViews = mListViews;//構(gòu)造方法，參數(shù)是我們的頁卡，這樣比較方便   }    @Override   public void destroyItem(ViewGroup container, int position, Object object)  {       container.removeView(mListViews.get(position));//刪除頁卡   }   @Override   public Object instantiateItem(ViewGroup container, int position) { //這個(gè)方法用來實(shí)例化頁卡    container.addView(mListViews.get(position), 0);//添加頁卡     return mListViews.get(position);  }    @Override   public int getCount() {          return mListViews.size();//返回頁卡的數(shù)目   }        @Override   public boolean isViewFromObject(View arg0, Object arg1) {           return arg0==arg1;//官方提示這樣寫  }}

第一個(gè)view

package com.example.myviewpager;import android.content.Context;import android.view.LayoutInflater;import android.view.View;/** * 第一個(gè) * @author cgx * */public class View1 { private Context mContext; private View rootView; public View1(Context mContext) { // TODO Auto-generated constructor stub this.mContext=mContext; //加載布局 rootView = LayoutInflater.from(mContext).inflate(  R.layout.view1_layout, null); }  public View getView(){ return rootView; } }

activity布局文件

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  xmlns:tools="http://schemas.android.com/tools"  android:layout_width="match_parent"  android:layout_height="match_parent"  android:orientation="vertical"  > <LinearLayout    android:id="@+id/linearLayout1"    android:layout_width="fill_parent"    android:layout_height="wrap_content"    android:background="#FFFFFF" >    <TextView      android:id="@+id/text1"      android:layout_width="fill_parent"      android:layout_height="fill_parent"      android:layout_weight="1.0"      android:gravity="center"      android:text="頁卡1"      android:textColor="#000000"      android:textSize="20sp" />    <TextView      android:id="@+id/text2"      android:layout_width="fill_parent"      android:layout_height="fill_parent"      android:layout_weight="1.0"      android:gravity="center"      android:text="頁卡2"      android:textColor="#000000"      android:textSize="20sp" />    <TextView      android:id="@+id/text3"      android:layout_width="fill_parent"      android:layout_height="fill_parent"      android:layout_weight="1.0"      android:gravity="center"      android:text="頁卡3"      android:textColor="#000000"      android:textSize="20sp" />  </LinearLayout>   <com.example.myviewpager.MyViewPager    android:id="@+id/vPager"    android:layout_width="wrap_content"    android:layout_height="wrap_content"    android:layout_gravity="center"    android:layout_weight="1.0"    android:background="#000000"    android:flipInterval="30"     /> </LinearLayout>

View1的布局

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  android:layout_width="match_parent"  android:layout_height="match_parent"  android:orientation="vertical"  android:background="#123456" ></LinearLayout>

由于用于演示，所以view的布局只是用不同的背景色來區(qū)分，開發(fā)中具體要展示的布局可以直接在view的布局文件里面改。demo中的view都是參考第一個(gè)來寫的，類似

總結(jié)。

實(shí)際開發(fā)中，雖然官方提供了很多api，真正等到要自己用的時(shí)候，還是自己在依照習(xí)慣再包裝一層，成為自己的工具，這樣以后就可以直接用了，上面的例子是我在實(shí)習(xí)期間總結(jié)的，鄙陋之處敬請(qǐng)?jiān)彛矚g迎大家指出，一起學(xué)習(xí)(^_^)

代碼鏈接：http://pan.baidu.com/s/1pJAF6Gz

以上就是對(duì)Android ViewPager 的資料整理，后續(xù)繼續(xù)補(bǔ)充相關(guān)資料，謝謝大家對(duì)本站的支持！

上一篇：Android布局居中的幾種做法

下一篇：Android自定義進(jìn)度條的圓角橫向進(jìn)度條實(shí)例詳解