先看下原版:
可以看到上图在点击红米3S的时候 只有上面的image走了一个缩放动画,但是下面的文字没有发生变化,这样的点击效果看上去舒服多了。
在看下我们最后实现的样式:
那么这是如何实现的呢?
我先创建一个容器来放置这个图片和文字。很容易观察出来这应该是一个LinearLayout ,那么我创建一个ScaleLinearLayout 来继承LinearLayout。
public class ScaleLinearlayout extends LinearLayout{
public ScaleLinearlayout(Context context) {
this(context,null);
}
public ScaleLinearlayout(Context context, AttributeSet attrs) {
this(context, attrs,0);
}
public ScaleLinearlayout(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
}
只需要修改他的ontouchEvent事件,让里面的图片可以在点击的时候产生缩放效果。
float x=0,y=0;
AnimatorSet setDown, setMove, setUp;
@Override
public boolean onTouchEvent(MotionEvent event) {
switch (event.getAction()){
case MotionEvent.ACTION_DOWN:
for(int i=0;i
我们在按下的时候将布局里的ImageView都找出来,然后用属性动画进行收缩,松开的时候让缩放动画在恢复到原样即可。
可是问题来了 如果是用户在上面发生了移动怎么办 都移除控件了 但是还没有松开,难道也一直让它处于收缩状态吗?我试过小米商城的按压效果,发现它果然在移动的时候恢复原状了,那么我们也加上去吧。
case MotionEvent.ACTION_MOVE:
if(Math.hypot(Math.abs(event.getX()-x),Math.abs(event.getY()-y))>ViewConfiguration.get(getContext()).getScaledTouchSlop()){
for(int i=0;i
好了 现在又有新的问题了,我移动后确实是恢复原状了,但是我在手指松开的时候,代码会继续走ACTION_UP,又会再次走缩放动画,看上去丑爆了有没有?所以还需要加个判断让代码在移动后就不要在走ACTION_UP了。
float x=0,y=0;
boolean canMove=true;
AnimatorSet setDown, setMove, setUp;
@Override
public boolean onTouchEvent(MotionEvent event) {
switch (event.getAction()){
case MotionEvent.ACTION_DOWN:
canMove=true;
x=event.getX();
y=event.getY();
for(int i=0;iViewConfiguration.get(getContext()).getScaledTouchSlop()){
canMove=false;
for(int i=0;i
恩,看上去应该大功告成了,赶紧给布局的ScaleLinearLayout加上点击事件,居然有动画效果了,却没有响应点击事件,蛋碎。。
因为我们重写了ScaleLinearLayout的onTouchEvent事件,所以确实响应不到点击事件了,那么我们得加上去,修改ACTION_UP的代码即可,我们在动画结束后给他加一个点击事件。注意要结束动画哦,不然没有恢复原状的效果就会直接跳到下一个activity那就丑爆了。。
case MotionEvent.ACTION_UP:
if(canMove){
for(int i=0;i
这次真的就大功告成了。
ps:
- 如果只是想让某一个ImageView发生变化的效果,个人建议将该ImageView 也重新继承。然后给一个名字比如ScaleImageView,然后在找子控件的时候去把这个ScaleImageView找出即可。
贴一下最终的代码。
public class ScaleLinearlayout extends LinearLayout {
public ScaleLinearlayout(Context context) {
this(context, null);
}
public ScaleLinearlayout(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public ScaleLinearlayout(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
float x = 0, y = 0;
boolean canMove = true;
AnimatorSet setDown, setMove, setUp;
@Override
public boolean onTouchEvent(MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
canMove = true;
x = event.getX();
y = event.getY();
for (int i = 0; i < getChildCount(); i++) {
if (getChildAt(i) instanceof ImageView) {
ImageView imageView = (ImageView) getChildAt(i);
ObjectAnimator animX = ObjectAnimator.ofFloat(imageView, "scaleX", 1, 1 * 0.85f);
ObjectAnimator animY = ObjectAnimator.ofFloat(imageView, "scaleY", 1, 1 * 0.85f);
setDown = new AnimatorSet();
setDown.play(animX).with(animY);
setDown.setDuration(300);
setDown.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationStart(Animator animation) {
super.onAnimationStart(animation);
if (setMove != null && setMove.isRunning()) {
setMove.cancel();
setMove = null;
}
if (setUp != null && setUp.isRunning()) {
setUp.cancel();
setUp = null;
}
}
});
setDown.start();
}
}
break;
case MotionEvent.ACTION_MOVE:
if (canMove && Math.hypot(Math.abs(event.getX() - x), Math.abs(event.getY() - y)) > ViewConfiguration.get(getContext()).getScaledTouchSlop()) {
canMove = false;
for (int i = 0; i < getChildCount(); i++) {
if (getChildAt(i) instanceof ImageView) {
ImageView imageView = (ImageView) getChildAt(i);
ObjectAnimator animX = ObjectAnimator.ofFloat(imageView, "scaleX", 0.85f, 1f);
ObjectAnimator animY = ObjectAnimator.ofFloat(imageView, "scaleY", 0.85f, 1f);
setMove = new AnimatorSet();
setMove.play(animX).with(animY);
setMove.setDuration(100);
setMove.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationStart(Animator animation) {
super.onAnimationStart(animation);
if (setDown != null && setDown.isRunning()) {
setDown.cancel();
setDown = null;
}
}
});
setMove.start();
}
}
}
break;
case MotionEvent.ACTION_UP:
if (canMove) {
for (int i = 0; i < getChildCount(); i++) {
if (getChildAt(i) instanceof ImageView) {
ImageView imageView = (ImageView) getChildAt(i);
ObjectAnimator animX = ObjectAnimator.ofFloat(imageView, "scaleX", 0.85f, 1f);
ObjectAnimator animY = ObjectAnimator.ofFloat(imageView, "scaleY", 0.85f, 1f);
setUp = new AnimatorSet();
setUp.play(animX).with(animY);
setUp.setDuration(100);
setUp.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
super.onAnimationEnd(animation);
performClick();
}
@Override
public void onAnimationStart(Animator animation) {
super.onAnimationStart(animation);
if (setDown != null && setDown.isRunning()) {
setDown.cancel();
setDown = null;
}
}
});
setUp.start();
}
}
}
break;
}
return true;
}
}