每周学一个小轮子之 可以缩放的ScalableView，移动app开发公司
作者：互联网
- 缩放比例
缩放比例很简单，范围是 0-100%，以百分比形式呈现，0%就是原始大小，100%就是放大的最大倍数。
这样的依据比较直观，也可行。
- 缩放倍数（系数）
放大倍数，范围在 最初的放大倍数—最大的放大倍数。
我这里选择的是第二个。原因是ScaleGestureDetector.OnScaleGestureListener里的onScale是我们双指捏撑的重要方法，它的getScaleFactor()能够提供当前的缩放系数，比如说我在一个 1倍->3倍的放大过程中，这个方法能够返回能够直接和缩放倍数挂钩。
2、原始图片是怎么样的？放大后的图片又是怎么样的？
Bitmap是我们要缩放的图片，而view是这个bitmap的容器，那么Bitmap应该要在这个View居中显示更符合实际情况。
其次原始图片时怎样的？我们需要留空吗？比如一个图片可能才 300*200，你让他居中显示，它左右上下都会留白。
通过查看多个App的情况，缩小的状态其实就是 大的那一边填充，放大状态的就是小的那一边填充：
- 如果图片比例是 宽大于高的
那么缩小状态应该是左右填充屏幕，放大状态应该是上下边填充屏幕
这样的话，最小缩放系数就是 view.getWidth()/bitmap.getWidth(),最大缩放系数就是 getHeight() / mBitmap.getHeight()
- 如果图片比例是 高大于宽的
那么缩小状态应该是上下填充屏幕，放大状态应该是左右填充屏幕
缩小/放大系数反之。
其实这个解释不是很难，大家找幅图，然后拿着图片去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