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

先看下原版：


实例GIF
实例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<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 (setUp != null && setUp.isRunning()) {  
                                          setUp.cancel(); 
                                           setUp = null;        
                                    }   
                             }
                          });
                          setDown.start();
                    }
                }

                break;
            case MotionEvent.ACTION_UP:
              
                    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 onAnimationStart(Animator animation) {      
                                    super.onAnimationStart(animation);    
                                    if (setDown != null && setDown.isRunning()) {  
                                          setDown.cancel(); 
                                           setDown = null;        
                                    }   
                             }
                          });
                            setUp.start();
                        }
                    }

                break;
        }
        return true;
    }

我们在按下的时候将布局里的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<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;

好了 现在又有新的问题了，我移动后确实是恢复原状了，但是我在手指松开的时候，代码会继续走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;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 (setUp != null && setUp.isRunning()) {  
                                          setUp.cancel(); 
                                           setUp = null;        
                                    }  
                                    if (setMove != null && setMove.isRunning()) {  
                                          setMove.cancel(); 
                                           setMove = 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 onAnimationStart(Animator animation) {      
                                    super.onAnimationStart(animation);    
                                    if (setDown != null && setDown.isRunning()) {  
                                          setDown.cancel(); 
                                           setDown = null;        
                                    }   
                             }
                          });
                            setUp.start();
                        }
                    }

                }

                break;
        }
        return true;
 }

恩,看上去应该大功告成了，赶紧给布局的ScaleLinearLayout加上点击事件，居然有动画效果了，却没有响应点击事件，蛋碎。。

因为我们重写了ScaleLinearLayout的onTouchEvent事件，所以确实响应不到点击事件了，那么我们得加上去，修改ACTION_UP的代码即可，我们在动画结束后给他加一个点击事件。注意要结束动画哦，不然没有恢复原状的效果就会直接跳到下一个activity那就丑爆了。。

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);

                            AnimatorSet set=new AnimatorSet();
                            set.play(animX).with(animY);
                            set.setDuration(100);
                            set.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;        
                                    }   
                             }
                            });
                            set.start();
                        }
                    }

                }

                break;

这次真的就大功告成了。
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;
    }

}
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 212,657评论 6赞 492
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 90,662评论 3赞 385
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 158,143评论 0赞 348
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 56,732评论 1赞 284
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 65,837评论 6赞 386
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 50,036评论 1赞 291
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,126评论 3赞 410
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,868评论 0赞 268
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,315评论 1赞 303
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,641评论 2赞 327
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,773评论 1赞 341
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,470评论 4赞 333
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,126评论 3赞 317
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,859评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,095评论 1赞 267
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,584评论 2赞 362
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,676评论 2赞 351

推荐阅读更多精彩内容

  • Android - 收藏集
    Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,856评论 25赞 707
  • CALayer的使用
    在iOS中随处都可以看到绚丽的动画效果，实现这些动画的过程并不复杂，今天将带大家一窥iOS动画全貌。在这里你可以看...
    F麦子阅读 5,104评论 5赞 13
  • IOS中CALayer的使用
    在iOS中随处都可以看到绚丽的动画效果，实现这些动画的过程并不复杂，今天将带大家一窥ios动画全貌。在这里你可以看...
    每天刷两次牙阅读 8,471评论 6赞 30
  • 寻觅或螺丝岛上的梦想曲
    我只好回到我的内心，去发现一个世界！为此又更多地依靠预感与朦胧的渴望，而不依靠创造与活力。这样一来，一切对...
    失业猎手阅读 247评论 0赞 1
  • 那一年
    那一年 我们奔赴考场的情形 那一年 我们信誓旦旦的诺言 那一年 我们永不停止的努力 那一年 我们紧张过后的快感 那...
    燕儿翩翩飞呀飞阅读 368评论 2赞 3