转载请注明出处：http://blog.csdn.net/linglongxin24/article/details/52986713 【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 matrix = new Matrix();// 缩放图片动作matrix.postScale(rateWidth, rateHeight);//创建一个新的缩放后的bitmapBitmap zoomBitmap = Bitmap.createBitmap(bitmap, 0, 0, (int) width,(int) height, matrix, true);return zoomBitmap;}@Overrideprotected 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);}}@Overridepublic 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;}@Overridepublic void setOnClickListener(OnClickListener onClickListener) {this.onClickListener = onClickListener;}
}

4.用法

布局文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"android:id="@+id/activity_main"android:layout_width="match_parent"android:layout_height="match_parent"android:background="#393939"android:orientation="vertical"tools:context="cn.bluemobi.dylan.touchfingerimageview.MainActivity"><LinearLayout
        android:layout_width="match_parent"android:layout_height="120dp"android:layout_marginTop="10dp"android:orientation="horizontal"><cn.bluemobi.dylan.touchfingerimageview.TouchFingerImageView
            android:id="@+id/tfiv1"android:layout_width="0dp"android:layout_height="match_parent"android:layout_weight="1.00"android:scaleType="centerCrop"android:src="@mipmap/iv1" /><cn.bluemobi.dylan.touchfingerimageview.TouchFingerImageView
            android:layout_width="0dp"android:layout_height="match_parent"android:layout_marginLeft="10dp"android:layout_weight="2.00"android:scaleType="centerCrop"android:src="@mipmap/iv2" /></LinearLayout><LinearLayout
        android:layout_width="match_parent"android:layout_height="120dp"android:layout_marginTop="10dp"android:orientation="horizontal"><cn.bluemobi.dylan.touchfingerimageview.TouchFingerImageView
            android:layout_width="0dp"android:layout_height="match_parent"android:layout_weight="1.00"android:scaleType="centerCrop"android:src="@mipmap/iv3" /><cn.bluemobi.dylan.touchfingerimageview.TouchFingerImageView
            android:layout_width="0dp"android:layout_height="match_parent"android:layout_marginLeft="10dp"android:layout_weight="1.00"android:scaleType="centerCrop"android:src="@mipmap/iv4" /><cn.bluemobi.dylan.touchfingerimageview.TouchFingerImageView
            android:layout_width="0dp"android:layout_height="match_parent"android:layout_marginLeft="10dp"android:layout_weight="1.00"android:scaleType="centerCrop"android:src="@mipmap/iv5" /></LinearLayout><LinearLayout
        android:layout_width="match_parent"android:layout_height="120dp"android:layout_marginTop="10dp"android:orientation="horizontal"><cn.bluemobi.dylan.touchfingerimageview.TouchFingerImageView
            android:layout_width="0dp"android:layout_height="match_parent"android:layout_weight="1.00"android:scaleType="centerCrop"android:src="@mipmap/iv6" /><cn.bluemobi.dylan.touchfingerimageview.TouchFingerImageView
            android:layout_width="0dp"android:layout_height="match_parent"android:layout_marginLeft="10dp"android:layout_weight="1.00"android:scaleType="centerCrop"android:src="@mipmap/iv7" /><cn.bluemobi.dylan.touchfingerimageview.TouchFingerImageView
            android:layout_width="0dp"android:layout_height="match_parent"android:layout_marginLeft="10dp"android:layout_weight="1.00"android:scaleType="centerCrop"android:src="@mipmap/iv8" /></LinearLayout><LinearLayout
        android:layout_width="match_parent"android:layout_height="120dp"android:layout_marginTop="10dp"android:orientation="horizontal"><cn.bluemobi.dylan.touchfingerimageview.TouchFingerImageView
            android:layout_width="0dp"android:layout_height="match_parent"android:layout_weight="1.00"android:scaleType="centerCrop"android:src="@mipmap/iv9" /><cn.bluemobi.dylan.touchfingerimageview.TouchFingerImageView
            android:layout_width="0dp"android:layout_height="match_parent"android:layout_marginLeft="10dp"android:layout_weight="1.00"android:scaleType="centerCrop"android:src="@mipmap/iv10" /><cn.bluemobi.dylan.touchfingerimageview.TouchFingerImageView
            android:layout_width="0dp"android:layout_height="match_parent"android:layout_marginLeft="10dp"android:layout_weight="1.00"android:scaleType="centerCrop"android:src="@mipmap/iv11" /></LinearLayout>
</LinearLayout>

Activity中的用法

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.Toast;public class MainActivity extends AppCompatActivity {@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);findViewById(R.id.tfiv1).setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View view) {Toast.makeText(MainActivity.this,"点击了第一个",Toast.LENGTH_SHORT).show();}});}
}

5.GitHub源码：https://github.com/linglongxin24/TouchFingerImageView

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

【Android自定义View实战】之自定义评价打分控件RatingBar，可以自定义星星大小和间距...
[Android自定义View实战]之自定义评价打分控件RatingBar,可以自定义星星大小和间距
Android 系统（201）---Android 自定义View实战系列：时间轴
Android 自定义View实战系列 :时间轴 Android开发中,时间轴的 UI需求非常常见,如下图: 本文将结合自定义View & RecyclerView的知识,手把手教你实现该常 ...
[自定义控件]android自定义view实战之太极图
android自定义view实战之太极图尊重原创,转载请注明出处: http://blog.csdn.net/qq137722697 自定义view是Android工程师进阶不可避免要接触的,我的学 ...
Vue 实例实战之 Vue webpack 仿去哪儿网App页面开发（应用中的几个页面简单实现）
Vue 实例实战之 Vue webpack 仿去哪儿网App页面开发(应用中的几个页面简单实现) 目录 Vue 实例实战之 Vue webpack 仿去哪儿网App页面开发(应用中的几个页面简单实现) ...
【vue】二、vue2仿去哪儿网app——首页开发
文章目录二.vue2仿去哪儿网app--首页开发 Ⅰ 页面结构 Ⅱ 开发笔记及注意点 1.公共样式抽取 2.路径 --> 绝对路径 3.用padding-bottom实现固定宽高比 4.保证内 ...
android 自定义特效,Android自定义View之高仿QQ健康
我们都知道自定义View一般有三种直接继承View.继承原有的控件对控件的进行修改.重新拼装组合,最后一种主要针对于ViewGroup.具体的怎么做不是本文的所涉及的内容(本文是基于第一种方式实现的) ...
【Android自定义View实战】之仿QQ运动步数圆弧及动画，Dylan计步中的控件StepArcView
转载请注明出处:http://blog.csdn.net/linglongxin24/article/details/52936609 [DylanAndroid的csdn博客] 在之前的Androi ...
Android自定义View实战：简约风歌词控件，Android开发者值得深入思考的几个问题
57[02:41.62]从不知她的痛苦 58[02:52.02] 59[02:54.11]喜欢你那双眼动人 60[03:00.13]笑声更迷人 61[03:02.38] 62[03:03.14]愿 ...
android 画圆弧动画,『Android自定义View实战』自定义带入场动画的弧形百分比进度条...
写在前面这是在简书发表的处女座,这个想法也停留在脑海中很久了,一直拖到现在(懒癌发作2333),先自我介绍一番,一枚刚毕业不久的Android程序猿,初出茅庐的Android小生,之前一直在CSDN ...

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

1.先看一下效果图

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

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

4.用法

5.GitHub源码：https://github.com/linglongxin24/TouchFingerImageView

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

最新文章

热门文章