ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

每周学一个小轮子之 可以缩放的ScalableView,移动app开发公司

2022-01-26 18:34:14  阅读:204  来源: 互联网

标签:缩放 getHeight app bigScale getWidth ScalableView currentScale 放大


  1. 缩放比例

缩放比例很简单,范围是 0-100%,以百分比形式呈现,0%就是原始大小,100%就是放大的最大倍数。

这样的依据比较直观,也可行。

  1. 缩放倍数(系数)

放大倍数,范围在 最初的放大倍数—最大的放大倍数。

我这里选择的是第二个。原因是ScaleGestureDetector.OnScaleGestureListener里的onScale是我们双指捏撑的重要方法,它的getScaleFactor()能够提供当前的缩放系数,比如说我在一个 1倍->3倍的放大过程中,这个方法能够返回能够直接和缩放倍数挂钩。

2、原始图片是怎么样的?放大后的图片又是怎么样的?

Bitmap是我们要缩放的图片,而view是这个bitmap的容器,那么Bitmap应该要在这个View居中显示更符合实际情况。

其次原始图片时怎样的?我们需要留空吗?比如一个图片可能才 300*200,你让他居中显示,它左右上下都会留白。

通过查看多个App的情况,缩小的状态其实就是 大的那一边填充,放大状态的就是小的那一边填充:

  1. 如果图片比例是 宽大于高的

那么缩小状态应该是左右填充屏幕,放大状态应该是上下边填充屏幕

这样的话,最小缩放系数就是 view.getWidth()/bitmap.getWidth(),最大缩放系数就是 getHeight() / mBitmap.getHeight()

  1. 如果图片比例是 高大于宽的

那么缩小状态应该是上下填充屏幕,放大状态应该是左右填充屏幕

缩小/放大系数反之。

其实这个解释不是很难,大家找幅图,然后拿着图片去Activity里面试一下,再和别的App的比较一下就Ok了。

自定义流程

=====================================================================

OK,有了这些我们可以去开始做我们的ScalableView了。

第一步、继承自View,初始化所有变量

为了去除干扰因数,我选择继承自View而不是 ImageView。

下面是用到的所有变量,变量是边做边产生的:

public class RikkaScalableView extends View {

//初始化Bimap的宽度

private float imageWidth = Utils.dpToPixel(300);

//Bitmap图片

private Bitmap mBitmap;

//画笔

private Paint mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);

//初始化bitmap偏移量X、Y值,让bitmap居中的偏移量

float originalOffsetX, originalOffsetY;

//偏移量 X、Y值

float offsetX, offsetY;

//旧的放大系数,和currentScale对应,用于放大前保存当前放大系数

float oldScale;

//放大倍数、缩小倍数

float bigScale, smallScale;

//放大的倍数还要再大个1.5倍

private float bigScaleMore = 1.5f;

//用currentScale表示当前放大倍数,而且之后用到的缩放、动画的差值都是这个以这个值为标准

private float currentScale;

//当前是否是放大状态

private boolean isBig = false;

//放大和缩小的动画,因为缩小动画就是放大动画的镜像,所以可以直接用放大动画的reverse来做

private ObjectAnimator bigAnimator, smallAnimator;

//手势缩放对象

private GestureDetectorCompat gestureDetector;

//自定义手势监听器

private RikkaGestureListener rikkaGestureListener = new RikkaGestureListener();

//手势缩放对象

private ScaleGestureDetector scaleDetector;

//自定义手势缩放监听器

private RikkaScaleListener rikkaScaleListener = new RikkaScaleListener();

//用OverScroller去计算滑动值,可以设置回弹动画

private OverScroller scroller;

//postOnAnimation里的Runnable

private RikkaRunnable rikkaRunnable;

}

在上面我们自定义了监听器。

第二步:将图片居中显示,求出最小缩放和最大缩放系数

图片就是我们的bitmap,居中指的是在View里面居中,我们需要在View测量好自己的大小之后,获取宽高来得到正中间的位置。我们可以在 layout()或者onSzieChanged()方法中获取,这个时候view的大小已经测量好了。

同时,我们也可以在这个时候算出:最小缩放系数和最大缩放系数。

算出来后,我们通过 canva.scale()来进行缩放。

//onSizeChanged表示view已经初始化完了,我们在这里初始化一些比例

@Override

protected void onSizeChanged(int w, int h, int oldw, int oldh) {

super.onSizeChanged(w, h, oldw, oldh);

//计算初始偏移量,让图片居中显示,这也表明了,我们将缩放的坐标原点,放在了View的正中心

//偏移是以bitmap的左上角为点

originalOffsetX = (getWidth() - mBitmap.getWidth()) / 2;

originalOffsetY = (getHeight() - mBitmap.getHeight()) / 2;

//计算bigScale,smallScale

//smallScale是初始状态,要求图片:(1)如果图片比例宽大于高的话就是左右贴屏幕的边,(2)如果图片比例高大于宽的话就要上下贴屏幕的边

//bigScale是放大后的状态,要求图片:(1)如果图片比例宽大于高的话就是上下贴屏幕的边,(2)如果图片比例高大于宽的话就要左右贴屏幕的边

if ((float) mBitmap.getWidth() / mBitmap.getHeight() > (float) getWidth() / getHeight()) {

//表示当前图片比例宽大于高

smallScale = (float) getWidth() / mBitmap.getWidth();

bigScale = (float) getHeight() / mBitmap.getHeight() * bigScaleMore;

} else {

//表示当前图片比例高大于宽

smallScale = (float) getHeight() / mBitmap.getHeight();

bigScale = (float) getWidth() / mBitmap.getWidth() * bigScaleMore;

}

//初始放大倍数等于smallScale(最小)

currentScale = smallScale;

}

@Override

protected void onDraw(Canvas canvas) {

super.onDraw(canvas);

//这里用scale()方法来控制画布放大还是缩小

canvas.scale(currentScale, currentScale, getWidth() / 2f, getHeight() / 2f);

canvas.drawBitmap(mBitmap, originalOffsetX, originalOffsetY, mPaint);

}

第三步:实现双击缩放,并且可以进行单指移动画布

我们首先要去实现自定义的监听器,

gestureDetector = new GestureDetectorCompat(context, rikkaGestureListener);

//继承自SimpleOnGestureListener,这里面做了所有的单手势监听

class RikkaGestureListener extends GestureDetector.SimpleOnGestureListener {

@Override

public boolean onDown(MotionEvent e) {

return true;

}

//双击放大、缩小

@Override

public boolean onDoubleTap(MotionEvent e) {

isBig = !isBig;

if (isBig && currentScale < bigScale) {

//记录双击的位置,在这个点上放大,要把原点放在View的正中心,因为我们的图片时居中显示的。

offsetX = (e.getX() - getWidth() / 2) - ((e.getX() - getWidth() / 2) * bigScale / smallScale);

offsetY = (e.getY() - getHeight() / 2) - ((e.getY() - getHeight() / 2) * bigScale / smallScale);

notOutBound();

//如果当前是放大状态,就做放大动画

getBigAnimator().start();

} else {

//如果是缩小状态,就做缩小动画

getSmallAnimator().start();

}

return false;

}

}

//offsetX、offsetY不能超出边界

private void notOutBound() {

offsetX = Math.max(offsetX, -((mBitmap.getWidth() * bigScale - getWidth()) / 2f));

offsetX = Math.min(offsetX, (mBitmap.getWidth() * bigScale - getWidth()) / 2f);

offsetY = Math.max(offsetY, -((mBitmap.getHeight() * bigScale - getHeight()) / 2f));

offsetY = Math.min(offsetY, (mBitmap.getHeight() * bigScale - getHeight()) / 2f);

}

然后设置放大缩小动画,因为我们是根据currentScale来缩放的,所以我们的属性动画也是根据这个属性来做,动画每次设置一次currentScale,我们就需要invalidate()一次,并且将画布平移到 offsetX,offsetY的位置。

在每次做缩小动画的时候,需要重置一下offsetX/Y,否则下次双击,会导致放大到上一次的偏移位置上了。

@Override

protected void onDraw(Canvas canvas) {

//scalingFraction为放大倍数的百分比

float scalingFraction = (currentScale - smallScale) / (bigScale - smallScale);

canvas.translate(offsetX * scalingFraction, offsetY * scalingFraction);

}

public float getCurrentScale() {

return currentScale;

}

public void setCurrentScale(float currentScale) {

this.currentScale = currentScale;

//变化的时候要重绘

invalidate();

}

//放大动画

public ObjectAnimator getBigAnimator() {

if (bigAnimator == null) {

//懒加载缩放动画,用currentScale缩小到放大,值域在smallScale -> bigScale之间

bigAnimator = ObjectAnimator.ofFloat(this, “currentScale”, currentScale, bigScale);

}

//因为每次的currentScale都会变化,每次拿都要重新设置一遍currentScale

bigAnimator.setFloatValues(currentScale, bigScale);

return bigAnimator;

}

//缩小动画

public ObjectAnimator getSmallAnimator() {

if (smallAnimator == null) {

//懒加载缩放动画,用currentSca
le缩小到放大,值域在smallScale -> bigScale之间

smallAnimator = ObjectAnimator.ofFloat(this, “currentScale”, currentScale, smallScale);

smallAnimator.addListener(new Animator.AnimatorListener() {

@Override

public void onAnimationStart(Animator animation) {

}

@Override

public void onAnimationEnd(Animator animation) {

//每次动画结束的时候要将offsetX/Y置为初始值

offsetX = 0;

offsetY = 0;

}

@Override

图片转存中…(img-oRxvGI8s-1643192514000)]
le缩小到放大,值域在smallScale -> bigScale之间

smallAnimator = ObjectAnimator.ofFloat(this, “currentScale”, currentScale, smallScale);

smallAnimator.addListener(new Animator.AnimatorListener() {

@Override

public void onAnimationStart(Animator animation) {

}

@Override

public void onAnimationEnd(Animator animation) {

//每次动画结束的时候要将offsetX/Y置为初始值

offsetX = 0;

offsetY = 0;

}

@Override

标签:缩放,getHeight,app,bigScale,getWidth,ScalableView,currentScale,放大
来源: https://blog.csdn.net/m0_65320833/article/details/122706825

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有