使用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>就是你要进行滑动切换的页面

@Overrideprotected void onCreate(Bundle savedInstanceState) {// TODO Auto-generated method stubsuper.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; //动画图片宽度 @Overrideprotected void onCreate(Bundle savedInstanceState) {// TODO Auto-generated method stubsuper.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偏移量 ,主要是晓得现在距离左边多少位置 @Overridepublic void onPageScrollStateChanged(int arg0) {// TODO Auto-generated method stub}@Overridepublic void onPageScrolled(int arg0, float arg1, int arg2) {// TODO Auto-generated method stub}//表示当前是那个页面选中,在来计算图片的位置@Overridepublic 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);