之前在网上看到一篇viewpager简单使用的例子程序，主要采用了上部标签button+中间指示作用的imageview+下部viewpager的结构，点击上部标签，或者滑动viewpager，均可以使中间的imageview产生滑动效果，但是由于程序不够完善，当改变imageview背景等时，不能够正确的显示我们期望的UI效果，因此我对此进行了优化，同时去掉原示例中使用的animation，转而采用valueanimator+imageview的matrix方法进行编码，解决了之前UI中体现的BUG,当然远远不能说满意，权当是对viewpager、valueanimator理解的入门示例。
注：以下编码对网上的示例程序多有借鉴，但是出处找不到了
package com.example.testandroidviewpager; import java.util.ArrayList;
import java.util.List; import android.animation.ValueAnimator;
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.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.animation.AccelerateInterpolator;
import android.view.animation.Animation;
import android.view.animation.BounceInterpolator;
import android.view.animation.TranslateAnimation;
import android.widget.ImageView;
import android.widget.TextView; public class MainActivity 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 prevIndex = 0;// 移动前页卡编号
private int bmpW;// 动画图片宽度
private int screenW;//屏幕宽度，由于只是示例因此简单起见，直接使用屏幕宽度
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
InitTextView();
InitImageView();
InitViewPager();
} /**
* 初始化头标
*/
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));
} /**
* 头标点击监听
*/
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.page0, null));
listViews.add(mInflater.inflate(R.layout.page1, null));
listViews.add(mInflater.inflate(R.layout.page2, 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;
} @Override
public void destroyItem(View arg0, int arg1, Object arg2) {
((ViewPager) arg0).removeView(mListViews.get(arg1));
} @Override
public void finishUpdate(View arg0) {
} @Override
public int getCount() {
return mListViews.size();
} @Override
public Object instantiateItem(View arg0, int arg1) {
((ViewPager) arg0).addView(mListViews.get(arg1), 0);
return mListViews.get(arg1);
} @Override
public boolean isViewFromObject(View arg0, Object arg1) {
Log.d("1202","view pager isViewFromObject --> return " + (arg0 == arg1));
return arg0 == arg1;
} @Override
public void restoreState(Parcelable arg0, ClassLoader arg1) {
} @Override
public Parcelable saveState() {
return null;
} @Override
public void startUpdate(View arg0) {
}
} /**
* 初始化动画
*/
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);
screenW = dm.widthPixels;// 获取分辨率宽度
offset = (screenW / 3 - bmpW) / 2;// 计算偏移量
Matrix matrix = new Matrix();
matrix.postTranslate(offset, 0);
cursor.setImageMatrix(matrix);// 设置动画初始位置
} /**
* 页卡切换监听
*/
public class MyOnPageChangeListener implements OnPageChangeListener { int one = screenW / 3;// 页卡1 -> 页卡2 偏移量//==screenw/3
int two = one * 2;// 页卡1 -> 页卡3 偏移量 @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(0, one, 0, 0);
} else if (currIndex == 2) {
animation = new TranslateAnimation(two, one, 0, 0);
}
break;
case 2:
if (currIndex == 0) {
animation = new TranslateAnimation(0, two, 0, 0);
} else if (currIndex == 1) {
animation = new TranslateAnimation(one, two, 0, 0);
}
break;
}
final Matrix matrix = new Matrix();
prevIndex = currIndex;
currIndex = arg0; ValueAnimator animator0 = ValueAnimator.ofFloat(0f, 1f);
animator0.setDuration(300);
// animator0.setInterpolator(new BounceInterpolator());
animator0.setInterpolator(new AccelerateInterpolator(2));
animator0.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() { @Override
public void onAnimationUpdate(ValueAnimator animation) {
Object o = animation.getAnimatedValue();
if(o != null){
float f = (Float)o;
Log.d("1201", "onAnimationUpdate f is " + f);
//prevIndex --> currIndex
matrix.reset();
int prevX = offset + one * prevIndex;
int currX = offset + one * currIndex;
int nowValue = (int) (prevX + f * (currX - prevX));
matrix.postTranslate(nowValue, 0);
cursor.setImageMatrix(matrix);
}
}
});
animator0.start(); cursor.setImageMatrix(matrix);// 设置动画初始位置 // animation.setFillAfter(true);// True:图片停在动画结束位置
// animation.setDuration(300);
// cursor.startAnimation(animation);
} @Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
} @Override
public void onPageScrollStateChanged(int arg0) {
}
} }
layout：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:background="#333333"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:scaleType="matrix"
android:src="@drawable/ic_launcher" /> <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>
page0.xml
1 <?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:background="#330000"
android:orientation="vertical" > </LinearLayout>
page1.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:background="#003300"
android:orientation="vertical" > </LinearLayout>
page2.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:background="#000033"
android:orientation="vertical" > </LinearLayout>
注意：位于界面中间的imageview，其scaletype一定要设置成为matrix。
原理：主要是使用valueanimator对matrix的
postTranslate()函数的参数进行了设置，然后不断更新imageview，使其具有动画效果。