详解Android ViewPager动画与切换效果实现-优快云博客

首先看到了，大神写的ActionBarSharlock，还有ViewpagerIndicator，对于这样一个只是，感觉到的是大神的牛逼之处，可以有很多的adapter,动画渲染效果，还有很多工作原理，可以下载这个代码看！
很有用！

代码结构

最终实现的功能如连接所示：
http://www.cnblogs.com/dwinter/archive/2012/02/27/AndroidViewPager%E5%A4%9A%E9%A1%B5%E9%9D%A2%E6%BB%91%E5%8A%A8%E5%88%87%E6%8D%A2%E4%BB%A5%E5%8F%8A%E5%8A%A8%E7%94%BB%E6%95%88%E6%9E%9C.html
主要用到的是viewpager，下面是代码

MainActivity.java




package com.example.viewpapertest;

import java.util.ArrayList;
import java.util.List;

import android.app.Activity;
import android.graphics.BitmapFactory;
import android.graphics.Matrix;
import android.os.Bundle;
import android.support.v4.view.ViewPager;
import android.support.v4.view.PagerAdapter; 
import android.support.v4.view.ViewPager.OnPageChangeListener; 
import android.util.DisplayMetrics;
import android.view.LayoutInflater;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup;
import android.view.animation.Animation;
import android.view.animation.TranslateAnimation;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.Toast;

public class MainActivity extends Activity{

      private ViewPager viewPager;//页卡内容  
        private ImageView imageView;// 动画图片  
        private TextView textView1,textView2,textView3;  
        private List<View> views;// Tab页面列表  
        private int offset = 0;// 动画图片偏移量  
        private int currIndex = 0;// 当前页卡编号  
        private int bmpW;// 动画图片宽度  
        private View view1,view2,view3;//各个页卡  
        @Override  
        protected void onCreate(Bundle savedInstanceState) {  
            super.onCreate(savedInstanceState);  
            setContentView(R.layout.activity_main);  
            InitImageView();  
            InitTextView();  
            InitViewPager();  
        }  

        private void InitViewPager() {  
            viewPager=(ViewPager) findViewById(R.id.vPager);  
            views=new ArrayList<View>();  
            LayoutInflater inflater=getLayoutInflater();  
            view1=inflater.inflate(R.layout.lay1, null);  
            view2=inflater.inflate(R.layout.lay2, null);  
            view3=inflater.inflate(R.layout.lay3, null);  
            views.add(view1);  
            views.add(view2);  
            views.add(view3);  
            viewPager.setAdapter(new MyViewPagerAdapter(views));  
            viewPager.setCurrentItem(0);  
            viewPager.setOnPageChangeListener(new MyOnPageChangeListener());  
        }  
         /** 
          *  初始化头标 
          */  

        private void InitTextView() {  
            textView1 = (TextView) findViewById(R.id.text1);  
            textView2 = (TextView) findViewById(R.id.text2);  
            textView3 = (TextView) findViewById(R.id.text3);  

            textView1.setOnClickListener(new MyOnClickListener(0));  
            textView2.setOnClickListener(new MyOnClickListener(1));  
            textView3.setOnClickListener(new MyOnClickListener(2));  
        }  

        /** 
         2      * 初始化动画，这个就是页卡滑动时，下面的横线也滑动的效果，在这里需要计算一些数据 
         3 */  

        private void InitImageView() {  
            imageView= (ImageView) findViewById(R.id.cursor);  
            bmpW = BitmapFactory.decodeResource(getResources(), R.drawable.time).getWidth();// 获取图片宽度  
            DisplayMetrics dm = new DisplayMetrics();  
            getWindowManager().getDefaultDisplay().getMetrics(dm);  
            int screenW = dm.widthPixels;// 获取分辨率宽度  
            offset = (screenW / 3 - bmpW) / 2;// 计算偏移量  
            Matrix matrix = new Matrix();  
            matrix.postTranslate(offset, 0);  
            imageView.setImageMatrix(matrix);// 设置动画初始位置  
        }  

        /**  
         *      
         * 头标点击监听 3 */  
        private class MyOnClickListener implements OnClickListener{  
            private int index=0;  
            public MyOnClickListener(int i){  
                index=i;  
            }  
            public void onClick(View v) {  
                viewPager.setCurrentItem(index);              
            }  

        }  

        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;  
            }  
        }  

        public class MyOnPageChangeListener implements OnPageChangeListener{  

            int one = offset * 2 + bmpW;// 页卡1 -> 页卡2 偏移量  
            int two = one * 2;// 页卡1 -> 页卡3 偏移量  
            public void onPageScrollStateChanged(int arg0) {  


            }  

            public void onPageScrolled(int arg0, float arg1, int arg2) {  


            }  

            public void onPageSelected(int arg0) {  
                /*两种方法，这个是一种，下面还有一种，显然这个比较麻烦 
                Animation animation = null; 
                switch (arg0) { 
                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; 

                } 
                */  
                Animation animation = new TranslateAnimation(one*currIndex, one*arg0, 0, 0);//显然这个比较简洁，只有一行代码。  
                currIndex = arg0;  
                animation.setFillAfter(true);// True:图片停在动画结束位置  
                animation.setDuration(300);  
                imageView.startAnimation(animation);  
                Toast.makeText(MainActivity.this, "您选择了"+ viewPager.getCurrentItem()+"页卡", Toast.LENGTH_SHORT).show();  
            }  

        }  
}

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:umadsdk="http://schemas.android.com/apk/res/com.LoveBus"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <LinearLayout
        android:id="@+id/linearLayout1"
        android:layout_width="fill_parent"
        android:layout_height="100.0dip"
        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="22.0dip" />

        <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="22.0dip" />

        <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="22.0dip" />
    </LinearLayout>

    <ImageView
        android:id="@+id/cursor"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:scaleType="matrix"
        android:src="@drawable/time" />

    <android.support.v4.view.ViewPager
        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"
        android:persistentDrawingCache="animation" />

</LinearLayout>

三个文件lay1.xml,lay2.xml,lay3.xml，区别只是改一下颜色

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

我喜欢这个颜色

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

和这个颜色

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