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

来源:互联网 发布:理发软件 编辑:程序博客网 时间:2024/06/05 09:17


    随着业务发展,对一些细节的要求逐渐严格,比如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

  

 

0 0
原创粉丝点击