【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

相关文章

C#实现将Excel表格转换为图片(JPG/ PNG)

《C#实现将Excel表格转换为图片(JPG/PNG)》Excel表格可能会因为不同设备或字体缺失等问题,导致格式错乱或数据显示异常,转换为图片后,能确保数据的排版等保持一致,下面我们看看如何使用C... 目录通过C# 转换Excel工作表到图片通过C# 转换指定单元格区域到图片知识扩展C# 将 Excel

Android Mainline基础简介

《AndroidMainline基础简介》AndroidMainline是通过模块化更新Android核心组件的框架,可能提高安全性,本文给大家介绍AndroidMainline基础简介,感兴趣的朋... 目录关键要点什么是 android Mainline?Android Mainline 的工作原理关键

Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案

《Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案》:本文主要介绍Vue3组件中getCurrentInstance()获取App实例,但是返回nu... 目录vue3组件中getCurrentInstajavascriptnce()获取App实例,但是返回n

Python列表去重的4种核心方法与实战指南详解

《Python列表去重的4种核心方法与实战指南详解》在Python开发中,处理列表数据时经常需要去除重复元素,本文将详细介绍4种最实用的列表去重方法,有需要的小伙伴可以根据自己的需要进行选择... 目录方法1:集合(set)去重法(最快速)方法2:顺序遍历法(保持顺序)方法3:副本删除法(原地修改)方法4:

如何解决idea的Module:‘:app‘platform‘android-32‘not found.问题

《如何解决idea的Module:‘:app‘platform‘android-32‘notfound.问题》:本文主要介绍如何解决idea的Module:‘:app‘platform‘andr... 目录idea的Module:‘:app‘pwww.chinasem.cnlatform‘android-32

在Spring Boot中浅尝内存泄漏的实战记录

《在SpringBoot中浅尝内存泄漏的实战记录》本文给大家分享在SpringBoot中浅尝内存泄漏的实战记录,结合实例代码给大家介绍的非常详细,感兴趣的朋友一起看看吧... 目录使用静态集合持有对象引用,阻止GC回收关键点:可执行代码:验证:1,运行程序(启动时添加JVM参数限制堆大小):2,访问 htt

JS+HTML实现在线图片水印添加工具

《JS+HTML实现在线图片水印添加工具》在社交媒体和内容创作日益频繁的今天,如何保护原创内容、展示品牌身份成了一个不得不面对的问题,本文将实现一个完全基于HTML+CSS构建的现代化图片水印在线工具... 目录概述功能亮点使用方法技术解析延伸思考运行效果项目源码下载总结概述在社交媒体和内容创作日益频繁的

使用Node.js制作图片上传服务的详细教程

《使用Node.js制作图片上传服务的详细教程》在现代Web应用开发中,图片上传是一项常见且重要的功能,借助Node.js强大的生态系统,我们可以轻松搭建高效的图片上传服务,本文将深入探讨如何使用No... 目录准备工作搭建 Express 服务器配置 multer 进行图片上传处理图片上传请求完整代码示例

Android实现打开本地pdf文件的两种方式

《Android实现打开本地pdf文件的两种方式》在现代应用中,PDF格式因其跨平台、稳定性好、展示内容一致等特点,在Android平台上,如何高效地打开本地PDF文件,不仅关系到用户体验,也直接影响... 目录一、项目概述二、相关知识2.1 PDF文件基本概述2.2 android 文件访问与存储权限2.

Android Studio 配置国内镜像源的实现步骤

《AndroidStudio配置国内镜像源的实现步骤》本文主要介绍了AndroidStudio配置国内镜像源的实现步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,... 目录一、修改 hosts,解决 SDK 下载失败的问题二、修改 gradle 地址,解决 gradle