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

本文主要是介绍【Android自定义View实战】之仿去哪儿网App图片按压显示指纹并缩放效果TouchFingerImageView,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

转载请注明出处: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的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/996007

相关文章

电脑显示mfc100u.dll丢失怎么办?系统报错mfc90u.dll丢失5种修复方案

《电脑显示mfc100u.dll丢失怎么办?系统报错mfc90u.dll丢失5种修复方案》最近有不少兄弟反映,电脑突然弹出“mfc100u.dll已加载,但找不到入口点”的错误提示,导致一些程序无法正... 在计算机使用过程中,我们经常会遇到一些错误提示,其中最常见的就是“找不到指定的模块”或“缺少某个DL

Spring Security自定义身份认证的实现方法

《SpringSecurity自定义身份认证的实现方法》:本文主要介绍SpringSecurity自定义身份认证的实现方法,下面对SpringSecurity的这三种自定义身份认证进行详细讲解,... 目录1.内存身份认证(1)创建配置类(2)验证内存身份认证2.JDBC身份认证(1)数据准备 (2)配置依

Android使用ImageView.ScaleType实现图片的缩放与裁剪功能

《Android使用ImageView.ScaleType实现图片的缩放与裁剪功能》ImageView是最常用的控件之一,它用于展示各种类型的图片,为了能够根据需求调整图片的显示效果,Android提... 目录什么是 ImageView.ScaleType?FIT_XYFIT_STARTFIT_CENTE

关于MongoDB图片URL存储异常问题以及解决

《关于MongoDB图片URL存储异常问题以及解决》:本文主要介绍关于MongoDB图片URL存储异常问题以及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐... 目录MongoDB图片URL存储异常问题项目场景问题描述原因分析解决方案预防措施js总结MongoDB图

python实现svg图片转换为png和gif

《python实现svg图片转换为png和gif》这篇文章主要为大家详细介绍了python如何实现将svg图片格式转换为png和gif,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录python实现svg图片转换为png和gifpython实现图片格式之间的相互转换延展:基于Py

使用Python从PPT文档中提取图片和图片信息(如坐标、宽度和高度等)

《使用Python从PPT文档中提取图片和图片信息(如坐标、宽度和高度等)》PPT是一种高效的信息展示工具,广泛应用于教育、商务和设计等多个领域,PPT文档中常常包含丰富的图片内容,这些图片不仅提升了... 目录一、引言二、环境与工具三、python 提取PPT背景图片3.1 提取幻灯片背景图片3.2 提取

Python实现图片分割的多种方法总结

《Python实现图片分割的多种方法总结》图片分割是图像处理中的一个重要任务,它的目标是将图像划分为多个区域或者对象,本文为大家整理了一些常用的分割方法,大家可以根据需求自行选择... 目录1. 基于传统图像处理的分割方法(1) 使用固定阈值分割图片(2) 自适应阈值分割(3) 使用图像边缘检测分割(4)

Android实现在线预览office文档的示例详解

《Android实现在线预览office文档的示例详解》在移动端展示在线Office文档(如Word、Excel、PPT)是一项常见需求,这篇文章为大家重点介绍了两种方案的实现方法,希望对大家有一定的... 目录一、项目概述二、相关技术知识三、实现思路3.1 方案一:WebView + Office Onl

Android实现两台手机屏幕共享和远程控制功能

《Android实现两台手机屏幕共享和远程控制功能》在远程协助、在线教学、技术支持等多种场景下,实时获得另一部移动设备的屏幕画面,并对其进行操作,具有极高的应用价值,本项目旨在实现两台Android手... 目录一、项目概述二、相关知识2.1 MediaProjection API2.2 Socket 网络

Android实现悬浮按钮功能

《Android实现悬浮按钮功能》在很多场景中,我们希望在应用或系统任意界面上都能看到一个小的“悬浮按钮”(FloatingButton),用来快速启动工具、展示未读信息或快捷操作,所以本文给大家介绍... 目录一、项目概述二、相关技术知识三、实现思路四、整合代码4.1 Java 代码(MainActivi