【Android 自定义 View 实战】之仿去哪儿网 App 图片按压显示指纹并缩放效果 TouchFingerImageView

2,306 阅读2分钟
原文链接: blog.csdn.net

转载请注明出处:blog.csdn.net/linglongxin… 【DylanAndroid的csdn博客】

我们发现去哪儿网app的首页做的win8风格的方块,然后按压方块后悔发现,这个图片不但有缩放效果,而且还有显示指纹的效果,感觉跟真的手指按上去一样,很高逼格。今天我们就来看一下,这个是如何实现的。

1.先看一下效果图

这里写图片描述

2.第一步,准备一张指纹效果的透明背景图片

由于透明的看不到效果,我就连背景图片一起在这里显示了
这里写图片描述

3.第二步开始自定义View,有详细注释

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Matrix;
import android.graphics.drawable.BitmapDrawable;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.ScaleAnimation;
import android.widget.ImageView;

/**
 * 自定义仿去哪儿手指按下图片缩放和显示指纹的效果
 * Created by yuandl on 2016-10-31.
 */

public class TouchFingerImageView extends ImageView {

    /**
     * 指纹的图片
     */
    private Bitmap fingerBitmap;
    /**
     * 图片按下的状态标识
     */
    private boolean state = false;
    /**
     * 点击事件
     */
    private OnClickListener onClickListener;

    /**
     * 默认的构造函数
     *
     * @param context
     * @param attrs
     */
    public TouchFingerImageView(Context context, AttributeSet attrs) {
        super(context, attrs);
        /**获取指纹图片*/
        fingerBitmap = zoom(BitmapFactory.decodeResource(getResources(), R.mipmap.finger), 300, 300);

    }

    /**
     * 图片的缩放方法
     *
     * @param bitmap    源图片资源
     * @param newWidth  缩放后的宽
     * @param newHeight 缩放后的高
     * @return Bitmap    缩放后的图片资源
     */
    public Bitmap zoom(Bitmap bitmap, int newWidth, int newHeight) {
        
        float width = bitmap.getWidth();
        float height = bitmap.getHeight();
        
        float rateWidth = ((float) newWidth) / width;
        float rateHeight = ((float) newHeight) / height;
        
        Matrix matrix = new Matrix();
        
        matrix.postScale(rateWidth, rateHeight);
        
        Bitmap zoomBitmap = Bitmap.createBitmap(bitmap, 0, 0, (int) width,
                (int) height, matrix, true);
        return zoomBitmap;
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        /**获取源资源图片文件**/
        Bitmap bitmap = ((BitmapDrawable) this.getDrawable()).getBitmap();
        Matrix matrix0 = new Matrix();
        /**
         * 平移指纹图片使指纹居中显示
         */
        matrix0.postTranslate(this.getWidth() / 2 - fingerBitmap.getWidth() / 2,
                this.getHeight() / 2 - fingerBitmap.getHeight() / 2);
        /**绘制源资源图片文件**/
        canvas.drawBitmap(zoom(bitmap, getWidth(), getHeight()), 0, 0, null);
        if (state) {
            Matrix matrix = new Matrix();
            /**
             * 平移指纹图片使指纹居中显示
             */
            matrix.postTranslate(this.getWidth() / 2 - fingerBitmap.getWidth() / 2,
                    this.getHeight() / 2 - fingerBitmap.getHeight() / 2);
            canvas.drawBitmap(fingerBitmap, matrix, null);
        }
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        float begin = 1.0f;
        float end = 0.95f;
        /** 收缩动画**/
        Animation beginAnimation = new ScaleAnimation(begin, end, begin, end,
                Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF,
                0.5f);
        /** 伸展动画**/
        Animation finishAnimation = new ScaleAnimation(end, begin, end, begin,
                Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF,
                0.5f);

        /** 设置动画持续时间和保留动画结果 **/
        beginAnimation.setDuration(200);
        /**设置动画停留在最后一个的状态**/
        beginAnimation.setFillAfter(true);
        finishAnimation.setDuration(200);
        finishAnimation.setFillAfter(true);

        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                startAnimation(beginAnimation);
                state = true;
                invalidate();
                if (onClickListener != null) {
                    onClickListener.onClick(this);
                }
                break;
            case MotionEvent.ACTION_UP:
                startAnimation(finishAnimation);
                state = false;
                invalidate();
                break;
            case MotionEvent.ACTION_CANCEL:
                startAnimation(finishAnimation);
                state = false;
                invalidate();
                break;
        }
        return true;
    }

    @Override
    public void setOnClickListener(OnClickListener onClickListener) {
        this.onClickListener = onClickListener;
    }
}

4.用法




    

        

        
    

    

        

        

        

    

    

        

        

        

    

    

        

        

        

    

    
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        findViewById(R.id.tfiv1).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Toast.makeText(MainActivity.this,"点击了第一个",Toast.LENGTH_SHORT).show();
            }
        });
    }
}

5.GitHub源码github.com/linglongxin…