Android ViewPager 的使用总结-原创手记-慕课网

在一个窗口里面添加tab便签，完成便签切换来实现页面的切换，这样的好处是可以在同一个窗口里面有多个页面，这些页面共享同一个窗口的资源，同使用多个窗口来实现这个功能来得更加流畅！！

主要产生的类文件有activity，n个view，adapter，自定义的ViewPager，n+1个布局文件

demo所用到文件

Android ViewPager的使用

步骤：

创建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;// 页面内容
	private MyViewPagerAdapter pagerAdapter = null;	private TextView t1, t2, t3;// 页卡头标
	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);		// 设置ViewPager不允许滑动
		//mPager.setCanScroll(false);
		//一开始进入窗口的时候，默认第一个便签被选中
		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);		// 缓存页面，如果想全部都缓存的话，参数等于页卡数减一,系统默认参数为1，保存两个
		mPager.setOffscreenPageLimit(2);
		mPager.setAdapter(pagerAdapter);		// 设置Page改变监听器
		mPager.setOnPageChangeListener(onPageChangeListener);
	}	/**
	 * SimpleOnPageChangeListener.该监听是当我们的viewpager页面切换的时候会触发 在里面我们会去改变 tab的聚焦情况
	 * 。 因为实现上viewpager与actionbar是独立的，需要我们手动同步 。
	 */
	ViewPager.SimpleOnPageChangeListener onPageChangeListener = new ViewPager.SimpleOnPageChangeListener() {		@Override
		public void onPageSelected(int position) {			/**
			 * setSelectedNavigationItem 方法用于设置ActionBar的聚焦tab .
			 * 在接下来我们判断了SLidingMenu的手势力模式， 如果ViewPager已经滑到了最左边，则我们把手势设置成全屏的，
			 * 这样更往左滑动的时候，就会打开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:// 点击第一个便签
			mPager.setCurrentItem(0, false);			break;		case R.id.text2:// 点击第二个便签
			mPager.setCurrentItem(1, false);			break;		case R.id.text3:// 点击第三个便签
			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;/**
 * 自定义滑动翻页可控，可通过设置isCanScroll参数来控制是否允许滑动切换页面
 */public class MyViewPager extends ViewPager {	/** 是否允许滑动翻页 ,默认可滑动*/
	private boolean isCanScroll = true;	public MyViewPager(Context context, AttributeSet attrs) {		super(context, attrs);
	}	public MyViewPager(Context context) {		super(context);
	}	public boolean isCanScroll() {		return isCanScroll;
	}	/** 设置是否可以滑动翻页 */
	public void setCanScroll(boolean isCanScroll) {		this.isCanScroll = isCanScroll;
	}	@Override
	public void scrollTo(int x, int y) {		super.scrollTo(x, y);
	}	// 设置禁止滑动的关键
	@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;//构造方法，参数是我们的页卡，这样比较方便     }

    @Override  
    public void destroyItem(ViewGroup container, int position, Object object)   {     
        container.removeView(mListViews.get(position));//删除页卡      }  

    @Override  
    public Object instantiateItem(ViewGroup container, int position) {  //这个方法用来实例化页卡        container.addView(mListViews.get(position), 0);//添加页卡          return mListViews.get(position);
    }  

    @Override  
    public int getCount() {           
        return  mListViews.size();//返回页卡的数目     }  

    @Override  
    public boolean isViewFromObject(View arg0, Object arg1) {             
        return arg0==arg1;//官方提示这样写    }

}

第一个view

package com.example.myviewpager;import android.content.Context;import android.view.LayoutInflater;import android.view.View;/**
 * 第一个
 * @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的布局只是用不同的背景色来区分，开发中具体要展示的布局可以直接在view的布局文件里面改。demo中的view都是参考第一个来写的，类似

总结

实际开发中，虽然官方提供了很多api，真正等到要自己用的时候，还是自己在依照习惯再包装一层，成为自己的工具，这样以后就可以直接用了，上面的例子是我在实习期间总结的，鄙陋之处敬请原谅，也欢迎大家指出，一起学习(^_^)

代码链接：http://pan.baidu.com/s/1pJAF6Gz

原文链接：http://www.codeceo.com/article/android-viewpager-usage.html