使用ViewPager进行页面滑动切换

android上边需要滑动切换的地方太频繁了，一般引导页，主框架用得都比较多，

而使用ViewPager可以很方便的实现

一：实现一个简单的滑动切换需要3个东东

1:页面增加一个android.support.v4.view.ViewPager布局

<?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.support.v4.view.ViewPager  
        android:id="@+id/page"  
        android:layout_width="wrap_content"  
        android:layout_height="wrap_content"  
        android:layout_gravity="center" >  
                           
    </android.support.v4.view.ViewPager>
</LinearLayout>

2: 实现一个PagerAdapter

    PagerAdapter主要是用来管理需要切换的页面的，比如有多少个需要切换的页面，

    更新清除页面等

class MyPagerAdapter extends PagerAdapter
{  
		List<View> views;  
		public MyPagerAdapter(List<View> v) {  
		  super();  
		  // TODO Auto-generated constructor stub  
		  views = v;  
		}  
		  
		@Override  
		public void destroyItem(View v, int pos, Object arg2) {  
		   // TODO Auto-generated method stub  
		   ((ViewPager) v).removeView(views.get(pos));  
		 }  
		  
		 @Override  
		 public void finishUpdate(View arg0) {  
		   // TODO Auto-generated method stub  
		  
		  }  
		  
		  @Override  
		 public int getCount() {  
		    // TODO Auto-generated method stub  
		    return views.size();  
		  }  
		  
		  @Override  
		 public Object instantiateItem(View v, int pos) {  
		   // TODO Auto-generated method stub  
		   ((ViewPager) v).addView(views.get(pos));  
		   return views.get(pos);  
		  }  
		  
		@Override  
		public boolean isViewFromObject(View arg0, Object arg1) {  
			// TODO Auto-generated method stub  
		    return arg0==arg1;  
		}  						
		  
		@Override  
		public void restoreState(Parcelable arg0, ClassLoader arg1) {  
		    // TODO Auto-generated method stub  
		      
		}  
		  
		@Override  
		public Parcelable saveState() {  
		    // TODO Auto-generated method stub  
		    return null;  
		}  
		  
		@Override  
		public void startUpdate(View arg0) {  
		    // TODO Auto-generated method stub  
		      
		}      
  }  

3:给ViewPager添加刚刚实现的PagerAdapter

               给 PagerAdapter构造函数添加的List<View>就是你要进行滑动切换的页面

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		// TODO Auto-generated method stub
		super.onCreate(savedInstanceState);
		setContentView(R.layout.view_page);
		
		 myviewpage = (ViewPager)findViewById(R.id.page);  
		 		
		LayoutInflater inflater = getLayoutInflater(); 
		List<View> listviews  = new ArrayList<View>();
		listviews.add(inflater.inflate(R.layout.fragment1, null)); 
		listviews.add(inflater.inflate(R.layout.fragment2, null)); 
		listviews.add(inflater.inflate(R.layout.fragment1, null)); 
			     
		 MyPagerAdapter mypagetadapter = new MyPagerAdapter(listviews);  
	     myviewpage.setAdapter(mypagetadapter);  	    	  
	}

好现在就可以进行添加页面的滑动切换了

二：实现一个带指示器的滑动切换

  只需要在上一个的基础上加一点东西，用来指示当前是第几页，

  需要使用到2点

  1：viewpage的setOnPageChangeListener事件可以知道得到是第几页

  2：使用TranslateAnimation动画进行指示图片的位置变化即可

        TranslateAnimation的简单介绍http://blog.csdn.net/aojiancc2/article/details/18664819

  

  增加后的布局文件，就多了一个按钮和指示图片

<?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" >
    
    
    <LinearLayout android:id="@+id/nav"  
        android:layout_width="fill_parent"  
        android:layout_height="50dp"  
        android:background="#efefef">  
        <TextView  
            android:id="@+id/tab1"  
            android:layout_width="fill_parent"  
            android:layout_height="fill_parent"  
            android:layout_weight="1.0"  
            android:gravity="center"  
            android:textColor="#000000"  
            android:text="页片1" />  
        <TextView  
            android:id="@+id/tab2"  
            android:layout_width="fill_parent"  
            android:layout_height="fill_parent"  
            android:layout_weight="1.0"  
            android:gravity="center"  
            android:textColor="#000000"  
            android:text="页片2" />  
        <TextView  
            android:id="@+id/tab3"  
            android:layout_width="fill_parent"  
            android:layout_height="fill_parent"  
            android:layout_weight="1.0"  
            android:gravity="center"  
            android:textColor="#000000"  
            android:text="页片3" />  
     </LinearLayout>  
     
    <ImageView android:id="@+id/cursor"  
         android:layout_width="fill_parent"  
         android:layout_height="wrap_content"  
         android:scaleType="matrix"  
         android:src="@drawable/img_cursor"/>  
    
     <android.support.v4.view.ViewPager  
        android:id="@+id/page"  
        android:layout_width="wrap_content"  
        android:layout_height="wrap_content"  
        android:layout_gravity="center" >  
                           
    </android.support.v4.view.ViewPager>
</LinearLayout>

      主类：  

public class MyViewPage extends Activity{

	
	private ViewPager myviewpage;  
	private ImageView cursor; //图片游标  
	private int offset=0;  //动画图片偏移量  
	private int currIndex=0; //当前卡片编号  
	private int bmgW; //动画图片宽度 
	
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		// TODO Auto-generated method stub
		super.onCreate(savedInstanceState);
		setContentView(R.layout.view_page);
		
		 initAnima();
		 myviewpage = (ViewPager)findViewById(R.id.page);  
		 		
		LayoutInflater inflater = getLayoutInflater(); 
		List<View> listviews  = new ArrayList<View>();
		listviews.add(inflater.inflate(R.layout.fragment1, null)); 
		listviews.add(inflater.inflate(R.layout.fragment2, null)); 
		listviews.add(inflater.inflate(R.layout.fragment1, null)); 
			     
		 MyPagerAdapter mypagetadapter = new MyPagerAdapter(listviews);  
	     myviewpage.setAdapter(mypagetadapter);  
	     
	     addPoint();
	}
	
	//初始化动画  
	private void initAnima(){  
	    cursor = (ImageView)findViewById(R.id.cursor);  //初始化游标图片  
	    bmgW = BitmapFactory.decodeResource(getResources(), R.drawable.img_cursor).getWidth(); //得到游标的宽度  
	    
	    DisplayMetrics dm = new DisplayMetrics();   
	    getWindowManager().getDefaultDisplay().getMetrics(dm);  
	    int screenW = dm.widthPixels; //屏幕宽度  
	    offset=(screenW/3-bmgW)/2; //游标偏移量 ,可以正好让图片在中间
	    Matrix matrix=new Matrix();   
	    matrix.postTranslate(offset,0);   
	    cursor.setImageMatrix(matrix); //游标初始位置  
	}  
	
	private void addPoint()
	{
		myviewpage.setOnPageChangeListener(new OnPageChangeListener(){

			 int one = offset*2+bmgW; //页片1->页片2 偏移量  
	    	 int two=one*2; //页片1->页片3偏移量 ,主要是晓得现在距离左边多少位置 
			@Override
			public void onPageScrollStateChanged(int arg0) {
				// TODO Auto-generated method stub
				
			}

			@Override
			public void onPageScrolled(int arg0, float arg1, int arg2) {
				// TODO Auto-generated method stub
				
			}

			
			//表示当前是那个页面选中,在来计算图片的位置			
			@Override
			public void onPageSelected(int pos) {
				// TODO Auto-generated method stub
								

				
				  Animation animation = null;  
		    	     switch (pos) {  
		    	     case 0:  
		    	         if(currIndex==1){  
		    	             animation=new TranslateAnimation(one, 0, 0, 0);  
		    	         }else if(currIndex==2){  
		    	             animation=new TranslateAnimation(two, 0, 0, 0);  
		    	         }  
		    	         break;  
		    	     case 1:  
		    	         if(currIndex==0){  
		    	             animation=new TranslateAnimation(offset, one, 0, 0);  
		    	         }else if(currIndex==2){  
		    	             animation=new TranslateAnimation(two, one, 0, 0); 
		    	         }  
		    	         break;  
		    	     case 2:  
		    	         if(currIndex==1){  
		    	             animation=new TranslateAnimation(one, two, 0, 0);  
		    	         }else if(currIndex==0){  
		    	             animation=new TranslateAnimation(offset, two, 0, 0);  
		    	         }  
		    	         break;  
		    	     default:  
		    	         break;  
		    	     }  
		    	     currIndex=pos;  
		    	     animation.setFillAfter(true);  
		    	     animation.setDuration(300);  
		    	     cursor.setAnimation(animation);  
			}});
	}
}



//其实就是用来管理ViewPager的
class MyPagerAdapter extends PagerAdapter
{  
		List<View> views;  
		public MyPagerAdapter(List<View> v) {  
		  super();  
		  // TODO Auto-generated constructor stub  
		  views = v;  
		}  
		  
		@Override  
		public void destroyItem(View v, int pos, Object arg2) {  
		   // TODO Auto-generated method stub  
		   ((ViewPager) v).removeView(views.get(pos));  
		 }  
		  
		 @Override  
		 public void finishUpdate(View arg0) {  
		   // TODO Auto-generated method stub  
		  
		  }  
		  
		  @Override  
		 public int getCount() {  
		    // TODO Auto-generated method stub  
		    return views.size();  
		  }  
		  
		  @Override  
		 public Object instantiateItem(View v, int pos) {  
		   // TODO Auto-generated method stub  
		   ((ViewPager) v).addView(views.get(pos));  
		   return views.get(pos);  
		  }  
		  
		@Override  
		public boolean isViewFromObject(View arg0, Object arg1) {  
			// TODO Auto-generated method stub  
		    return arg0==arg1;  
		}  						
		  
		@Override  
		public void restoreState(Parcelable arg0, ClassLoader arg1) {  
		    // TODO Auto-generated method stub  
		      
		}  
		  
		@Override  
		public Parcelable saveState() {  
		    // TODO Auto-generated method stub  
		    return null;  
		}  
		  
		@Override  
		public void startUpdate(View arg0) {  
		    // TODO Auto-generated method stub  
		      
		}      
  }  

  下载http://acapekbhng.l18.yunpan.cn/lk/Qh5RCcjJkMvhy  a271

注意:添加到viewpager的view不能是已经添加到布局文件中的控件了，可以再后台用实例化先的方式去添加

例如添加一张图片

ImageView imageView = new ImageView(this);
imageView.setBackgroundResource(R.drawable.item03);
listviews.add(imageView);