Android图片的缩放
1、背景
现在app中,图片预览功能肯定是少不了的,用户基本已经形成条件反射,看到小图,点击看大图,看到大图两个手指开始进行放大,放大后,开始移动到指定部位~~~
我相信看图的整个步骤,大家或者说用户应该不希望被打断把~~~“我擦,竟然不能放大,什么玩意,卸了~~“ , "我擦,竟然不能移动,留有何用,卸了~~"。
哈~所以对于图片的预览,一来,我们要让用户爽;二来,我们作为开发者,也得知道如何实现~~~
2、概述
想要做到图片支持多点触控,自由的进行缩放、平移,需要了解几个知识点:Matrix , GestureDetector , ScaleGestureDetector 以及事件分发机制,ps:不会咋办,不会你懂的。
1、Matrix
矩阵,看深入了都是3维矩阵的乘啊什么的,怪麻烦的~~
其实这么了解下就行了:
Matrix
数据结构:3维矩阵;
内部存储:new Float[9] ; 内部就是个一维数组,内部9个元素;可以进行setValues(float[] values)进行初始化
每个元素代表的意思:
- {
- MSCALE_X, MSKEW_X, MTRANS_X,
- MSKEW_Y, MSCALE_Y, MTRANS_Y,
- MPERSP_0, MPERSP_1, MPERSP_2
- };
字面上,应该能看出来哪个代表x方向缩放,哪个代表垂直方向的偏移量吧~~有不认识的3个,没事,请无视。
操作
比如你想要设置matrix的偏移量为200,100
你可以这么写:
- Matrix transMatrix = new Matrix();
- float[] values = new float[] { 1.0, 0, 200, 0, 1.0, 100, 0, 0, 1.0 };
- transMatrix.setValues(values);
如果需要在旋转30度,放大两倍~~
这么写其实怪麻烦的~~
Matrix提供了一些常用的API:例如我们可以这么写:
- Matrix transMatrix = new Matrix();
- transMatrix.postTranslate(200, 100);
如何获取值:
当然了,我们对一个Matrix进行了各种操作,一会postScale,一会postTranslate;那么现在如何获得当前的缩放比例:
前面说setValues可以初始化,那么getValues就能拿到当前矩阵的值,拿到的是个一维数组,9个元素;再通过下标取对应值就可以。
比如我想知道现在x方向缩放比例:
- public final float getScale()
- {
- scaleMatrix.getValues(matrixValues);
- return matrixValues[Matrix.MSCALE_X];
- }
好了,知道这些就够了~~
2、GestureDetector
嗯,自己看API,能够捕捉到长按、双击什么的;用法会在例子中
3、ScaleGestureDetector
嗯,有点像继承来的,其实不是的,独立的一个类~用于检测缩放的手势~~~用法会在例子中
3、实战
为了大家更好的理解,我会独立出每个功能,最后再整合到一起~~也方面大家对每个API的使用的学习。
1、自由的缩放
需求:当图片加载时,将图片在屏幕中居中;图片宽或高大于屏幕的,缩小至屏幕大小;自由对图片进行方法或缩小;
代码不是很长,直接贴代码了:
- package com.zhy.view;
- import android.content.Context;
- import android.graphics.Matrix;
- import android.graphics.drawable.Drawable;
- import android.util.AttributeSet;
- import android.util.Log;
- import android.view.MotionEvent;
- import android.view.ScaleGestureDetector;
- import android.view.ScaleGestureDetector.OnScaleGestureListener;
- import android.view.View;
- import android.view.View.OnTouchListener;
- import android.view.ViewTreeObserver;
- import android.widget.ImageView;
- public class ZoomImageView extends ImageView implements OnScaleGestureListener,
- OnTouchListener, ViewTreeObserver.OnGlobalLayoutListener
- {
- private static final String TAG = ZoomImageView.class.getSimpleName();
- public static final float SCALE_MAX = 4.0f;
- /**
- * 初始化时的缩放比例,如果图片宽或高大于屏幕,此值将小于0
- */
- private float initScale = 1.0f;
- /**
- * 用于存放矩阵的9个值
- */
- private final float[] matrixValues = new float[9];
- private boolean once = true;
- /**
- * 缩放的手势检测
- */
- private ScaleGestureDetector mScaleGestureDetector = null;
- private final Matrix mScaleMatrix = new Matrix();
- public ZoomImageView(Context context)
- {
- this(context, null);
- }
- public ZoomImageView(Context context, AttributeSet attrs)
- {
- super(context, attrs);
- super.setScaleType(ScaleType.MATRIX);
- mScaleGestureDetector = new ScaleGestureDetector(context, this);
- this.setOnTouchListener(this);
- }
- @Override
- public boolean onScale(ScaleGestureDetector detector)
- {
- float scale = getScale();
- float scaleFactor = detector.getScaleFactor();
- if (getDrawable() == null)
- return true;
- /**
- * 缩放的范围控制
- */
- if ((scale < SCALE_MAX && scaleFactor > 1.0f)
- || (scale > initScale && scaleFactor < 1.0f))
- {
- /**
- * 最大值最小值判断
- */
- if (scaleFactor * scale < initScale)
- {
- scaleFactor = initScale / scale;
- }
- if (scaleFactor * scale > SCALE_MAX)
- {
- scaleFactor = SCALE_MAX / scale;
- }
- /**
- * 设置缩放比例
- */
- mScaleMatrix.postScale(scaleFactor, scaleFactor, getWidth() / 2,
- getHeight() / 2);
- setImageMatrix(mScaleMatrix);
- }
- return true;
- }
- @Override
- public boolean onScaleBegin(ScaleGestureDetector detector)
- {
- return true;
- }
- @Override
- public void onScaleEnd(ScaleGestureDetector detector)
- {
- }
- @Override
- public boolean onTouch(View v, MotionEvent event)
- {
- return mScaleGestureDetector.onTouchEvent(event);
- }
- /**
- * 获得当前的缩放比例
- *
- * @return
- */
- public final float getScale()
- {
- mScaleMatrix.getValues(matrixValues);
- return matrixValues[Matrix.MSCALE_X];
- }
- @Override
- protected void onAttachedToWindow()
- {
- super.onAttachedToWindow();
- getViewTreeObserver().addOnGlobalLayoutListener(this);
- }
- @SuppressWarnings("deprecation")
- @Override
- protected void onDetachedFromWindow()
- {
- super.onDetachedFromWindow();
- getViewTreeObserver().removeGlobalOnLayoutListener(this);
- }
- @Override
- public void onGlobalLayout()
- {
- if (once)
- {
- Drawable d = getDrawable();
- if (d == null)
- return;
- Log.e(TAG, d.getIntrinsicWidth() + " , " + d.getIntrinsicHeight());
- int width = getWidth();
- int height = getHeight();
- // 拿到图片的宽和高
- int dw = d.getIntrinsicWidth();
- int dh = d.getIntrinsicHeight();
- float scale = 1.0f;
- // 如果图片的宽或者高大于屏幕,则缩放至屏幕的宽或者高
- if (dw > width && dh <= height)
- {
- scale = width * 1.0f / dw;
- }
- if (dh > height && dw <= width)
- {
- scale = height * 1.0f / dh;
- }
- // 如果宽和高都大于屏幕,则让其按按比例适应屏幕大小
- if (dw > width && dh > height)
- {
- scale = Math.min(dw * 1.0f / width, dh * 1.0f / height);
- }
- initScale = scale;
- // 图片移动至屏幕中心
- mScaleMatrix.postTranslate((width - dw) / 2, (height - dh) / 2);
- mScaleMatrix
- .postScale(scale, scale, getWidth() / 2, getHeight() / 2);
- setImageMatrix(mScaleMatrix);
- once = false;
- }
- }
- }
1、我们在onGlobalLayout的回调中,根据图片的宽和高以及屏幕的宽和高,对图片进行缩放以及移动至屏幕的中心。如果图片很小,那就正常显示,不放大了~
2、我们让OnTouchListener的MotionEvent交给ScaleGestureDetector进行处理
- @Override
- public boolean onTouch(View v, MotionEvent event)
- {
- return mScaleGestureDetector.onTouchEvent(event);
- }
3、在onScale的回调中对图片进行缩放的控制,首先进行缩放范围的判断,然后设置mScaleMatrix的scale值
现在的效果:
1、小于屏幕的宽和高
2、大于屏幕的宽和高
真机录的效果不太好~~凑合看~
现在已经能够~~~随意的放大缩小了~~~
源码点击下载
可是,可是,存在问题:
1、缩放的中心点,我们设置是固定的,屏幕中间
2、放大后,无法移动~
下面,我们先解决缩放的中心点问题,不能一直按屏幕中心么,像我这样的,我比较关注妹子的眼睛,我要放大那一块~~~
2、设置缩放中心
1、单纯的设置缩放中心
仅仅是设置中心很简单,直接修改下中心点 :
- /**
- * 设置缩放比例
- */
- mScaleMatrix.postScale(scaleFactor, scaleFactor,
- detector.getFocusX(), detector.getFocusX());
- setImageMatrix(mScaleMatrix);
但是,随意的中心点放大、缩小,会导致图片的位置的变化,最终导致,图片宽高大于屏幕时,图片与屏幕间出现白边;图片小于屏幕,但是不居中。
2、控制缩放时图片显示的范围
所以我们在缩放的时候需要手动控制下范围:
- /**
- * 在缩放时,进行图片显示范围的控制
- */
- private void checkBorderAndCenterWhenScale()
- {
- RectF rect = getMatrixRectF();
- float deltaX = 0;
- float deltaY = 0;
- int width = getWidth();
- int height = getHeight();
- // 如果宽或高大于屏幕,则控制范围
- if (rect.width() >= width)
- {
- if (rect.left > 0)
- {
- deltaX = -rect.left;
- }
- if (rect.right < width)
- {
- deltaX = width - rect.right;
- }
- }
- if (rect.height() >= height)
- {
- if (rect.top > 0)
- {
- deltaY = -rect.top;
- }
- if (rect.bottom < height)
- {
- deltaY = height - rect.bottom;
- }
- }
- // 如果宽或高小于屏幕,则让其居中
- if (rect.width() < width)
- {
- deltaX = width * 0.5f - rect.right + 0.5f * rect.width();
- }
- if (rect.height() < height)
- {
- deltaY = height * 0.5f - rect.bottom + 0.5f * rect.height();
- }
- Log.e(TAG, "deltaX = " + deltaX + " , deltaY = " + deltaY);
- mScaleMatrix.postTranslate(deltaX, deltaY);
- }
- /**
- * 根据当前图片的Matrix获得图片的范围
- *
- * @return
- */
- private RectF getMatrixRectF()
- {
- Matrix matrix = mScaleMatrix;
- RectF rect = new RectF();
- Drawable d = getDrawable();
- if (null != d)
- {
- rect.set(0, 0, d.getIntrinsicWidth(), d.getIntrinsicHeight());
- matrix.mapRect(rect);
- }
- return rect;
- }
在onScale里面记得调用:
- /**
- * 设置缩放比例
- */
- mScaleMatrix.postScale(scaleFactor, scaleFactor,
- detector.getFocusX(), detector.getFocusY());
- checkBorderAndCenterWhenScale();
- setImageMatrix(mScaleMatrix);
这样就好了,可以自由的放大任何地方,并且不会出现边界出现白边,也能很好的让图片显示在屏幕中间(当图片宽或高小于屏幕);
3、贴下布局文件
- <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
- xmlns:tools="http://schemas.android.com/tools"
- android:layout_width="match_parent"
- android:layout_height="match_parent" >
- <com.zhy.view.ZoomImageView
- android:layout_width="fill_parent"
- android:layout_height="fill_parent"
- android:scaleType="matrix"
- android:src="@drawable/xx" />
- </RelativeLayout>
眼睛是心灵的窗户,咱们来放大看看,效果图:
好了,到此我们的图片随意的方法缩小~~~已经完成了~~~如果只需要缩放功能的,就可以拿去用了~
由于篇幅原因,下一篇将继续完善此View:
1、增加多点触控时移动
2、增加双击变大,双击变小
3、与ViewPager一起使用时的事件冲突问题
本文出自:【张鸿洋的博客】
以上是Android 大神张鸿洋写的,我还想再添加一些其他的内容
1.设置setImageMatrix(mScaleMatrix); 之前,需要设置super.setScaleType(ScaleType.MATRIX); 用来设置image如何匹配ImageView
2. 获取控件的宽高 ,再控件没有创建前是不能获得控件的宽高,具体查看如果获取控件宽高这篇博客
3. 对视图加载监听,和移除监听
@Override
protected void onAttachedToWindow()
{
super.onAttachedToWindow();
getViewTreeObserver(). //返回这个视图的层次
//Register a callback to be invoked when the global layout state or the visibility of views within the view tree changes
// 注册一个回调函数,当全局布局状态或视图树视图中的可见性改变时调用。
addOnGlobalLayoutListener(this);
}
@Override
protected void onDetachedFromWindow() {
super.onDetachedFromWindow();
getViewTreeObserver().removeOnGlobalLayoutListener(this);
}
4.获取ImageView 的Matrix
scaleMatrix.getValues(matrixValue);
return matrixValue[Matrix.MSCALE_X];
Android图片的缩放相关推荐
- android图片双指缩放,Android图片双指缩放,单指移动实现
Android 实现,图片双指缩放,单指移动.通过自定义ImageView控件实现. ZoomDragImageView.java代码如下: public class SwZoomDragImageV ...
- android图片的缩放、圆角处理
android中图片缩放方法有三种:1,bitmapFactory:2,bitmap+metrix:3,thumbUtil 方法一:bitmapFactory: public static Bitma ...
- android layout后还原位置,Android图片框架photoview如何记住所有状态并还原,包括缩放度,缩放后的移动的距离等等...
Android图片框架photoview如何记住状态并还原,包括缩放度,缩放后的移动的距离等等,尝试了好多方法都没有作用. private void generateImages() { for (i ...
- Android拖动和缩放图片
Android拖动和缩放图片 2014年5月9日 我们在使用应用其中常常须要浏览图片.比方在微信其中.点击图片之后能够对图片进行缩放. 本博客介绍怎样对图片进行拖拽和缩放.这首先要了解Android中 ...
- android 多点触控缩放,Android多点触控(图片的缩放Demo)
本文主要介绍Android的多点触控,使用了一个图片缩放的实例,来更好的说明其原理.需要实现OnTouchListener接口,重写其中的onTouch方法. 实现效果图: 源代码: 布局文件: ac ...
- android 手势事件 重写,Android实现通过手势控制图片大小缩放的方法
本文实例讲述了Android实现通过手势控制图片大小缩放的方法.分享给大家供大家参考,具体如下: 该程序实现的是通过手势来缩放图片,从左向右挥动图片时图片被放大,从右向左挥动图片时图片被缩小,挥动速度 ...
- android的图片缩放,Android图片缩放总结及比较
在Android中对大图片进行缩放真的很不尽如人意,不知道是不是我的方法不对.下面我列出3种对图片缩放的方法,并给出相应速度.请高人指教. 第一种是BitmapFactory和BitmapFactor ...
- android button 图片不缩放,ImageButton如何让图片按比例缩放不被拉伸
了解 在安卓的界面XML中,ImageButton有这样一个属性android:scaleType,他干嘛的? ImageView的Scaletype决定了图片在View上显示时的样子,如进行何种比例 ...
- android xml图片缩放,Android通过自定义ImageView控件实现图片的缩放和拖动的实现代码...
概述:通过自定义ImageView控件,在xml布局里面调用自定的组件实现图片的缩放. /** * 自定义的ImageView控制,可对图片进行多点触控缩放和拖动 * * @author qiuwan ...
最新文章
- Hibernate4组件映射
- TSP - 状态压缩dp
- Python编写简易木马程序
- 太卷了~ 八股文,算法张口就来?2022版Java面试手册帮你全拿捏
- [NOIP2016 提高组] 愤怒的小鸟
- 软件项目可行性分析定义_如何定义最低可行产品
- 如何借助配置中心ACM加速企业IT服务快速迭代
- Kali Linux 无线渗透测试入门指南 第九章 无线渗透测试方法论
- mysql学习day04-02
- CSS样式设置语法全解,样式优先级、值和单位、字体、文本、块级元素,行内元素,替换元素、非替换元素、display、float、position、table、li、光标、边距边框、轮廓、颜色背景
- /usr/bin/ld: cannot find -lstdc++ -lz问题
- 勤哲cad服务器注册机,勤哲CAD服务器
- python计算复合年化增长率、年化波动率与夏普比率
- java switch语句_Java switch语句
- vue 项目, 父组件中每次点击按钮重新加载子组件,(重新生成dom 元素)
- 低代码学习教程:通讯录支持设置子管理员
- Cerebral Cortex:岛叶二分法在情绪面孔内隐检测中的应用
- 10-253 B2-1查找订单数最多的员工信息
- 中国新冠疫苗首针将于1月15日接种,正确的运输和存储可保证其安全有效
- 货币等精确计算使用BigDecimal
热门文章
- 五款电动车充电器原理图(重点图2分析过程UC3842的VCC启动电压和稳定供电电压说明,12V由稳压二极管得到做外围电源LM358比较器可被控制输出12V 和0V切换)UC3842电源管理芯片详解
- 广州琶洲人工智能与数字经济试验区亮相进博会
- [BZOJ5267]特工
- 泛在电力物联网深度报告之一:架构、场景及投资机会
- 视频监控系统选择硬盘,绿盘、蓝盘、紫盘、黑盘、红盘到底选择哪个?
- “战疫杯”大学生程序设计在线邀请赛(2)
- 怎么建立有效的员工培训体系,避免培训后员工流失?
- 4.0 Maple动画的制作方法
- [原]碟评:张韶涵《欧若拉》
- 【语音信号处理】自适应滤波方法——LMS算法