Android Viewpager 顶部或底部tab滑动效果，不是viewpager滑动效果

随着业务发展，对一些细节的要求逐渐严格，比如Viewpager滑动时顶部或底部tab的一些效果，现在网上有不少viewpager滑动的效果，tab的效果比较少；今天主要整理了

4点tab效果：tab字体大小缩放（ScaleAnimation）、tab字体颜色渐变（Alpha）、tab底部线（图片）位移渐变（TranslationAnimation）和tab底部线（图片）颜色渐变（AlphaAnimation）。

之前的效果都是viewpager滑动结束后，tab字体颜色或背景图片在改变，现在时随着滑动逐渐改变以上状态，主要区别在于调用更改状态的方法不同，之前的是onPagerSelected()，现在时onPagerScrolled();

由于涉及的动画比较多，所以例子中有两套控制方向的代码，首先复写dispatchTouchEvent();

public boolean dispatchTouchEvent(MotionEvent event) {

if (event.getAction() == MotionEvent.ACTION_DOWN) {

curX = event.getRawX();

}

if (event.getAction() == MotionEvent.ACTION_MOVE

|| event.getAction() == MotionEvent.ACTION_UP) {

// Log.d("appallcat", "mCurrIndex=" + " curX=" + curX

// + " event.getRawx()=" + event.getRawX() + " offset="

// + (curX - event.getX()));

if (event.getRawX() - curX > 0) {

// Log.d(TAG, "moveToRight");

// 向右滑动

moveToRight = true;

moveToLeft = false;

} else if (curX - event.getRawX() > 0) {

// 向左滑动

// Log.d(TAG, "moveToLeft");

moveToRight = false;

moveToLeft = true;

} else {

// Log.d(TAG, "NOTHING");

moveToRight = false;

moveToLeft = false;

}

}

return super.dispatchTouchEvent(event);

}

还得在onPageScrolled()加以判断

public void onPageScrolled(int index, float percent, int pixel) {

// TODO Auto-generated method stub

// index:当前view的index，percent:滑动的百分比，pixel滑动的像素

if (pixel - lastValue > 0) {

moveToLeftViewPager = true;

moveToRightViewPager = false;

} else if (pixel - lastValue < 0) {

moveToRightViewPager = true;

moveToLeftViewPager = false;

}

// else {

// moveToRight = false;

// moveToLeft = false;

// }

mCurrIndex = index;

lastValue = pixel;

if (percent > 0 && percent < 1) {

moveToTabImage(index, percent);

} else {

curScaleLeft = 0.0f;

curScaleRight = 1.0f;

moveToRightViewPager = false;

moveToLeftViewPager = false;

}

}

所有的动画效果都在moveToImage（）方法里面

protected void moveToTabImage(int index, float percent) {

nextPosition = (int) (mTabImageWidth * percent) + mTabImageWidth

* (mCurrIndex);

AnimationSet animationSet = new AnimationSet(true);

// 位移动画

Animation animation = new TranslateAnimation(currentPosition,

nextPosition, 0, 0);

currentPosition = nextPosition;

animation.setFillAfter(true);// True:固定滑动后的位置

animation.setDuration(1);

// 缩放动画

Animation scaleLargeAnimation = null;

Animation scaleNormalAnimation = null;

if (moveToLeft) {

// 缩放扩大0.2倍

scaleLargeAnimation = new ScaleAnimation(

1.0f + curScaleLeft * 0.2f, 1.0f + percent * 0.2f,

1.0f + curScaleLeft * 0.2f, 1.0f + percent * 0.2f,

Animation.RELATIVE_TO_SELF, 0.5f,

Animation.RELATIVE_TO_SELF, 0.5f);

scaleLargeAnimation.setFillAfter(true);

scaleLargeAnimation.setDuration(1);

scaleNormalAnimation = new ScaleAnimation(

1.2f - curScaleLeft * 0.2f, 1.2f - percent * 0.2f,

1.2f - curScaleLeft * 0.2f, 1.2f - percent * 0.2f,

Animation.RELATIVE_TO_SELF, 0.5f,

Animation.RELATIVE_TO_SELF, 0.5f);

scaleNormalAnimation.setFillAfter(true);

scaleNormalAnimation.setDuration(1);

list.get(mCurrIndex).startAnimation(scaleNormalAnimation);

list.get(mCurrIndex + 1).startAnimation(scaleLargeAnimation);

curScaleLeft = percent;

} else if (moveToRight) {

scaleLargeAnimation = new ScaleAnimation(

1.0f + (1 - curScaleRight) * 0.2f,

1.0f + (1 - percent) * 0.2f,

1.0f + (1 - curScaleRight) * 0.2f,

1.0f + (1 - percent) * 0.2f, Animation.RELATIVE_TO_SELF,

0.5f, Animation.RELATIVE_TO_SELF, 0.5f);

scaleLargeAnimation.setFillAfter(true);

scaleLargeAnimation.setDuration(1);

scaleNormalAnimation = new ScaleAnimation(

1.2f - (1 - curScaleRight) * 0.2f,

1.2f - (1 - percent) * 0.2f,

1.2f - (1 - curScaleRight) * 0.2f,

1.2f - (1 - percent) * 0.2f, Animation.RELATIVE_TO_SELF,

0.5f, Animation.RELATIVE_TO_SELF, 0.5f);

scaleNormalAnimation.setFillAfter(true);

scaleNormalAnimation.setDuration(1);

list.get(mCurrIndex).startAnimation(scaleLargeAnimation);

list.get(mCurrIndex + 1).startAnimation(scaleNormalAnimation);

curScaleRight = percent;

}

/* 通过 alpha 来设置 每个画笔的透明度，从而实现现实的效果 */

if (1 - percent < 0.2) {

// 最低设为0.2

list.get(mCurrIndex).setAlpha(0.2f);

} else {

list.get(mCurrIndex).setAlpha(1 - percent);

}

if (percent >= 0.2) {

list.get(mCurrIndex + 1).setAlpha(percent);

} else {

list.get(mCurrIndex + 1).setAlpha(0.2f);

}

Animation alpha = null;

// alpha当特别慢的滑动时，会出现抖动现象;

// (该问题已解决，主要是在onPageScrolled方法中，当特别慢的滑动时或者滑动过程中静止，更改moveToLeft、moveToRight状态所致)

if (moveToLeftViewPager) {

// selectbar_select_bg.setAlpha(percent);

alpha = new AlphaAnimation(curPercent + 0.0f, percent + 0.0f);

} else if (moveToRightViewPager) {

// Log.d(TAG, "curPercent=" + curPercent + " percent=" + percent);

alpha = new AlphaAnimation(1 - curPercent + 0.0f,

1 - percent + 0.0f);

// selectbar_select_bg.setAlpha(1-percent);

}

// selectbar_select_bg.setAlpha(percent);

if (alpha != null) {

curPercent = percent;

alpha.setFillAfter(true);

alpha.setDuration(1);

animationSet.addAnimation(alpha);

}

animationSet.addAnimation(animation);

animationSet.setFillAfter(true);

selectbar_select_bg.startAnimation(animationSet);

}

有问题可以私下讨论

源码地址 http://download.csdn.net/detail/zhangyaobin_1989/8702709