【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

相关文章

使用Python批量将.ncm格式的音频文件转换为.mp3格式的实战详解

《使用Python批量将.ncm格式的音频文件转换为.mp3格式的实战详解》本文详细介绍了如何使用Python通过ncmdump工具批量将.ncm音频转换为.mp3的步骤,包括安装、配置ffmpeg环... 目录1. 前言2. 安装 ncmdump3. 实现 .ncm 转 .mp34. 执行过程5. 执行结

Java实现将HTML文件与字符串转换为图片

《Java实现将HTML文件与字符串转换为图片》在Java开发中,我们经常会遇到将HTML内容转换为图片的需求,本文小编就来和大家详细讲讲如何使用FreeSpire.DocforJava库来实现这一功... 目录前言核心实现:html 转图片完整代码场景 1:转换本地 HTML 文件为图片场景 2:转换 H

Java实现在Word文档中添加文本水印和图片水印的操作指南

《Java实现在Word文档中添加文本水印和图片水印的操作指南》在当今数字时代,文档的自动化处理与安全防护变得尤为重要,无论是为了保护版权、推广品牌,还是为了在文档中加入特定的标识,为Word文档添加... 目录引言Spire.Doc for Java:高效Word文档处理的利器代码实战:使用Java为Wo

SpringBoot 多环境开发实战(从配置、管理与控制)

《SpringBoot多环境开发实战(从配置、管理与控制)》本文详解SpringBoot多环境配置,涵盖单文件YAML、多文件模式、MavenProfile分组及激活策略,通过优先级控制灵活切换环境... 目录一、多环境开发基础(单文件 YAML 版)(一)配置原理与优势(二)实操示例二、多环境开发多文件版

Vite 打包目录结构自定义配置小结

《Vite打包目录结构自定义配置小结》在Vite工程开发中,默认打包后的dist目录资源常集中在asset目录下,不利于资源管理,本文基于Rollup配置原理,本文就来介绍一下通过Vite配置自定义... 目录一、实现原理二、具体配置步骤1. 基础配置文件2. 配置说明(1)js 资源分离(2)非 JS 资

Three.js构建一个 3D 商品展示空间完整实战项目

《Three.js构建一个3D商品展示空间完整实战项目》Three.js是一个强大的JavaScript库,专用于在Web浏览器中创建3D图形,:本文主要介绍Three.js构建一个3D商品展... 目录引言项目核心技术1. 项目架构与资源组织2. 多模型切换、交互热点绑定3. 移动端适配与帧率优化4. 可

从原理到实战解析Java Stream 的并行流性能优化

《从原理到实战解析JavaStream的并行流性能优化》本文给大家介绍JavaStream的并行流性能优化:从原理到实战的全攻略,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的... 目录一、并行流的核心原理与适用场景二、性能优化的核心策略1. 合理设置并行度:打破默认阈值2. 避免装箱

基于C#实现PDF转图片的详细教程

《基于C#实现PDF转图片的详细教程》在数字化办公场景中,PDF文件的可视化处理需求日益增长,本文将围绕Spire.PDFfor.NET这一工具,详解如何通过C#将PDF转换为JPG、PNG等主流图片... 目录引言一、组件部署二、快速入门:PDF 转图片的核心 C# 代码三、分辨率设置 - 清晰度的决定因

Maven中生命周期深度解析与实战指南

《Maven中生命周期深度解析与实战指南》这篇文章主要为大家详细介绍了Maven生命周期实战指南,包含核心概念、阶段详解、SpringBoot特化场景及企业级实践建议,希望对大家有一定的帮助... 目录一、Maven 生命周期哲学二、default生命周期核心阶段详解(高频使用)三、clean生命周期核心阶

Python从Word文档中提取图片并生成PPT的操作代码

《Python从Word文档中提取图片并生成PPT的操作代码》在日常办公场景中,我们经常需要从Word文档中提取图片,并将这些图片整理到PowerPoint幻灯片中,手动完成这一任务既耗时又容易出错,... 目录引言背景与需求解决方案概述代码解析代码核心逻辑说明总结引言在日常办公场景中,我们经常需要从 W