ViewPager与PagerAdapter实现页面滑动效果

 样例：

 
      
 

1  主要的Activity 实现 

 

/**
 * ViewPager 的使用
 */
public class ViewPagerActivity extends Activity {
	
	    private ViewPager mPager;  
	    private List<View> listViews;   
	    private ImageView cursor;  
	    private TextView t1, t2, t3;  
	    private int offset = 0;//移动条图片的偏移量  
	    private int currIndex = 0;//当前页面的编号  
	    private int bmpWidth;// 移动条图片的长度  
	      
	      
	    @Override  
	    protected void onCreate(Bundle savedInstanceState) {  
	        super.onCreate(savedInstanceState);  
	        setContentView(R.layout.activity_view_pager);  
	        initCursorPos();  
	        initView();       
	    }  
	      
	    //完成View组件的初始化,并将三个view动态地添加到Adapter对象中  
	    //然后调用setAdapter将view集合与ViewPager绑定,设置进去的页面  
	    //指向第一个页面setCurrentItem(0),最后设置onclick和onPageChange监听器  
	    public void initView()  
	    {  
	        mPager = (ViewPager) findViewById(R.id.vPager);  
	        t1 = (TextView) findViewById(R.id.text1);  
	        t2 = (TextView) findViewById(R.id.text2);  
	        t3 = (TextView) findViewById(R.id.text3);     
	          
	        listViews = new ArrayList<View>();  
	        LayoutInflater mInflater = getLayoutInflater();  
	        listViews.add(mInflater.inflate(R.layout.activity_view_pager2, null));  
	        listViews.add(mInflater.inflate(R.layout.activity_view_pager3, null));  
	        listViews.add(mInflater.inflate(R.layout.activity_view_pager4, null));  
	        
	        mPager.setAdapter(new MyPageAdapter(listViews));  
	        mPager.setCurrentItem(0);  
	          
	          
	        t1.setOnClickListener(new MyClickListener(0));  
	        t2.setOnClickListener(new MyClickListener(1));  
	        t3.setOnClickListener(new MyClickListener(2));  
	        mPager.setOnPageChangeListener(new MyOnPageChangeListener());  
	    }  
	      
	    //初始化指示器的位置,就是下面那个移动条一开始放的地方  
	    public void initCursorPos() {   
	        cursor = (ImageView) findViewById(R.id.cursor);  
	        bmpWidth = BitmapFactory.decodeResource(getResources(), R.drawable.gdt)  
	                .getWidth();// 获取图片宽度  
	        DisplayMetrics dm = new DisplayMetrics();  
	        getWindowManager().getDefaultDisplay().getMetrics(dm);  
	        int screenW = dm.widthPixels;// 获取分辨率宽度  
	        offset = (screenW / 3 - bmpWidth) / 2;// 计算偏移量  
	        Matrix matrix = new Matrix();  
	        matrix.postTranslate(offset, 0);  
	        cursor.setImageMatrix(matrix);// 设置动画初始位置  
	    }    
	      
	    //设置点击事件,点击上面文字切换页面的  
	    public class MyClickListener implements OnClickListener  
	    {  
	        private int index = 0;  
	        public MyClickListener(int i)  
	        {  
	            index = i;  
	        }  
	          
	        @Override  
	        public void onClick(View arg0) {  
	            mPager.setCurrentItem(index);             
	        }  
	          
	    }  
	      
	      
	    //监听页面切换时间,主要做的是动画处理,就是移动条的移动  
	    public class MyOnPageChangeListener implements OnPageChangeListener {  
	        int one = offset * 2 + bmpWidth;// 移动一页的偏移量,比如1->2,或者2->3  (这个数值等于一个导航条的宽度)
	        int two = one * 2;// 移动两页的偏移量,比如1直接跳3  
	  
	        @Override  
	        public void onPageSelected(int index) {  
	            Animation animation = null;  
	            //index为当前选择的是哪个页面  
	            switch (index) {  
	            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 == 0) {  
	                    animation = new TranslateAnimation(offset, two, 0, 0);  
	                } else if (currIndex == 1) {  
	                    animation = new TranslateAnimation(one, two, 0, 0);  
	                }  
	                break;  
	            }  
	            currIndex = index;  
	            animation.setFillAfter(true);// true表示图片停在动画结束位置  
	            animation.setDuration(300); //设置动画时间为300毫秒  
	            cursor.startAnimation(animation);//开始动画  
	        }  
	  
	        @Override  
	        public void onPageScrollStateChanged(int arg0) {}  
	  
	        @Override  
	        public void onPageScrolled(int arg0, float arg1, int arg2) {}  
	      
	    } 
}

 

2  PagerAdapter 类

public class MyPageAdapter extends PagerAdapter {  
  
    private List<View> viewLists;      
  
    public MyPageAdapter() {}     
    public MyPageAdapter(List<View> viewLists)  
    {  
        super();  
        this.viewLists = viewLists;  
    }  
      
     //获得viewpager中有多少个view
    @Override  
    public int getCount() {       
        return viewLists.size();  
    }  
    
    /**
     * 通常这么写就可以了
     */
    @Override  
    public boolean isViewFromObject(View view, Object object) {  
        return view == object;  
    }  
     
    /**
     *     ①将给定位置的view添加到ViewGroup(容器)中,创建并显示出来
     *     ②返回一个代表新增页面的Object(key),通常都是直接返回view本身就可以了,
     */
    @Override  
    public Object instantiateItem(ViewGroup container, int position) {  
        container.addView(viewLists.get(position));  
        return viewLists.get(position);  
    }  
  
    //移除一个给定位置的页面。
    @Override  
    public void destroyItem(ViewGroup container, int position, Object object) {  
        container.removeView(viewLists.get(position));  
    }  
}

 3 xml 

   

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
    xmlns:tools="http://schemas.android.com/tools"  
    android:id="@+id/LinearLayout1"  
    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="60dp"  
        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="红色" />  
  
        <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="蓝色"/>  
  
        <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="黄色" />  
    </LinearLayout>  
  
    <ImageView  
        android:id="@+id/cursor"  
        android:layout_width="fill_parent"  
        android:layout_height="wrap_content"  
        android:scaleType="matrix"  
        android:src="@drawable/gdt" />  
  
    <android.support.v4.view.ViewPager  
        android:id="@+id/vPager"  
        android:layout_width="wrap_content"  
        android:layout_height="0dp"  
        android:layout_gravity="center"  
        android:layout_weight="1.0"  
        android:flipInterval="30"  
        android:persistentDrawingCache="animation" />  
  
</LinearLayout> 

 4 每一个pager中的4个xml都差不多一样，只贴一个

  

<?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:gravity="center"   
    android:background="#FF6666">      
    <TextView   
        android:layout_width="wrap_content"  
        android:layout_height="wrap_content"  
        android:text="第一个Page"      
    />  
</LinearLayout>