其他分享
首页 > 其他分享> > 每周学一个小轮子之 可以缩放的ScalableView,移动app开发公司

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

作者:互联网

  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