Android 仿小米商城 点击图片缩放

先看下原版:


实例GIF

可以看到上图在点击红米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;
    }

}

你可能感兴趣的:(Android 仿小米商城 点击图片缩放)