利用Viewpager制作滚动游标效果

由之前几篇文章的了解，我懂得了图片的各种变换效果，和动画的效果，因此我做了下面的游标效果

 

 

 

 

附上代码：

activity:

package com.example.ui;

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.os.Parcelable;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.util.DisplayMetrics;
import android.view.KeyEvent;
import android.view.LayoutInflater;
import android.view.MotionEvent;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.TranslateAnimation;
import android.widget.ImageView;
import android.widget.TextView;

import com.example.testforrun.R;
import com.example.testforrun.R.drawable;
import com.example.testforrun.R.id;
import com.example.testforrun.R.layout;

public class SimpleViewPagerActivity extends Activity{
    private ViewPager mPager;//页卡内容
    private List<View> listViews; // Tab页面列表
    private ImageView cursor;// 动画图片
    private TextView t1, t2, t3;// 页卡头标
    private int offset = 0;// 动画图片偏移量
    private int currIndex = 0;// 当前页卡编号
    private int bmpW;// 动画图片宽度
    
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        // TODO Auto-generated method stub
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_viewpager);
        InitTextView();
        InitImageView();
        InitViewPager();
//        initEvent();    
        
    }
    private void initEvent() {
        cursor.setOnClickListener(new View.OnClickListener() {
            
            @Override
            public void onClick(View v) {
                
            }
        });
        cursor.setOnTouchListener(new View.OnTouchListener() {
            
            @Override
            public boolean onTouch(View v, MotionEvent event) {
                
                return false;
            }
        });
        cursor.setOnKeyListener(new View.OnKeyListener() {
            
            @Override
            public boolean onKey(View v, int keyCode, KeyEvent event) {
                switch (keyCode) {
                case KeyEvent.ACTION_DOWN:
                    
                    break;
                case KeyEvent.ACTION_UP:
                    
                    break;
                case KeyEvent.ACTION_MULTIPLE:
                    
                    break;
                default:
                    break;
                }
                return false;
            }
        });
    }
    /**
     * 初始化头标
*/
    private void InitTextView() {
        t1 = (TextView) findViewById(R.id.text1);
        t2 = (TextView) findViewById(R.id.text2);
        t3 = (TextView) findViewById(R.id.text3);

        t1.setOnClickListener(new MyOnClickListener(0));
        t2.setOnClickListener(new MyOnClickListener(1));
        t3.setOnClickListener(new MyOnClickListener(2));
    }
    /**
     *初始化动画
     */
    private void InitImageView() {
        cursor = (ImageView) findViewById(R.id.cursor);
        //获取图片宽度
        bmpW = BitmapFactory.decodeResource(getResources(), R.drawable.ic_launcher)
                .getWidth();
        //手机的外观机构工具，外观度量工具
        DisplayMetrics dm = new DisplayMetrics();
        getWindowManager().getDefaultDisplay().getMetrics(dm);
        //
        int screenW = dm.widthPixels;// 获取分辨率宽度
        offset = (screenW / 3 - bmpW) / 2;// 计算偏移量
        //3*3矩阵类
        Matrix matrix = new Matrix();
        matrix.postTranslate(offset, 0);
        cursor.setImageMatrix(matrix);// 设置动画初始位置
    }
    /**
     * 头标点击监听
     */
    public class MyOnClickListener implements View.OnClickListener {
        private int index = 0;

        public MyOnClickListener(int i) {
            index = i;
        }

        @Override
        public void onClick(View v) {
            mPager.setCurrentItem(index);
        }
    };
    /**
     * 初始化ViewPager
*/
    private void InitViewPager() {
        mPager = (ViewPager) findViewById(R.id.vPager);
        listViews = new ArrayList<View>();
        LayoutInflater mInflater = getLayoutInflater();
        listViews.add(mInflater.inflate(R.layout.activity_test1, null));
        listViews.add(mInflater.inflate(R.layout.activity_test2, null));
        listViews.add(mInflater.inflate(R.layout.activity_test3, null));
        mPager.setAdapter(new MyPagerAdapter(listViews));
        mPager.setCurrentItem(0);
        mPager.setOnPageChangeListener(new MyOnPageChangeListener());
    }
    
    /**
     * ViewPager适配器
     */
    public class MyPagerAdapter extends PagerAdapter {
        public List<View> mListViews;

        public MyPagerAdapter(List<View> mListViews) {
            this.mListViews = mListViews;
        }
        /**
         * 将page的view从父viewgroup中丢弃,参数分别为父view、要丢弃的子view在page中的position、子view
         */
        @Override
        public void destroyItem(View arg0, int arg1, Object arg2) {
            ((ViewPager) arg0).removeView(mListViews.get(arg1));
        }
        /**
         * 当全部page的view初始化完毕，即instantiateItem（）执行完
         */
        @Override
        public void finishUpdate(View arg0) {
        }
        /**
         * viewpager的页数
         */
        @Override
        public int getCount() {
            return mListViews.size();
        }
        /**
         * 适配器中核心的方法，将每个page的view加到viewgroup中，该方法在finishUpdate(View container)方法执行前必须全部完成。
         */
        @Override
        public Object instantiateItem(View arg0, int arg1) {
            ((ViewPager) arg0).addView(mListViews.get(arg1), 0);
            return mListViews.get(arg1);
        }
        /**
         * 将每页与一个特殊的key联系起来。通过instantiateItem(View arg0, int arg1)返回的对象与当页的view进行比较
         * Determines whether a page View is associated with a specific key object
         * as returned by {@link #instantiateItem(ViewGroup, int)}. This method is
         * required for a PagerAdapter to function properly.
         */
        @Override
        public boolean isViewFromObject(View arg0, Object arg1) {
            return arg0 == (arg1);
        }

        /**
         * Restore any instance state associated with this adapter and its pages
         * that was previously saved by {@link #saveState()}.
         *    恢复任何 通过saveState()方法存下状态信息并且与此适配器及其相关页面有关的实例
         * @param state State previously saved by a call to {@link #saveState()}
         * @param loader A ClassLoader that should be used to instantiate any restored objects
         */
        @Override
        public void restoreState(Parcelable arg0, ClassLoader arg1) {
        }

        /**
         * Save any instance state associated with this adapter and its pages that should be
         * restored if the current UI state needs to be reconstructed.
         */
        @Override
        public Parcelable saveState() {
            return null;
        }

        @Override
        public void startUpdate(View arg0) {
        }
    }
    
    
    /**
     * 页卡切换监听
     */
    public class MyOnPageChangeListener implements OnPageChangeListener {

        int one = offset * 2 + bmpW;// 第一页到第二页的偏移量
        int two = one * 2;// 第一页到第三页的偏移量

        @Override
        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;
            }
            currIndex = arg0;
            animation.setFillAfter(true);//图片停在动画结束位置
            animation.setDuration(300);
            cursor.startAnimation(animation);//imageView的各种动画的方法都需要参考开始点，开始点就是imageView初始化完的位置
        }

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

        @Override
        public void onPageScrollStateChanged(int arg0) {
        }
    }
}

布局文件：

三个基本一样的文件，viewgroup的颜色不同而已。

仅贴上activity_test1.xml

<RelativeLayout 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:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin">

   <LinearLayout 
       android:layout_width="fill_parent"
       android:layout_height="fill_parent"
       android:background="#123123"
       ></LinearLayout>

</RelativeLayout>

 

其中关于偏移量的图示：