每周学一个小*之 可以缩放的ScalableView(1)，android开发者指南

2024-02-09 17:46:52

注意，我们需要在 onDown方法返回true，原理和onTouchEvent一样，如果不是true，就接收不到后面的事件了。

  • ScaleGestureDetector

双指缩放的精髓类，它是Android专门用于解决双指缩放下缩放系数变化的API，它是个大管家类，用于onTouchEvent的拦截。

这里注意一点，它也有个ScaleGestureDetectorCompat类，但是这个类和它已经是两码事了，所以说不上是兼容类。可能只是个扩充。

  • ScaleGestureDetector.OnScaleGestureListener

缩放监听类，可以监听到缩放开始、缩放时、缩放结束的状态，我们需要重写三个类，并且在 onScaleBegin返回true，原理和onTouchEvent一样。

  • OverScroller

回弹Scroller，它和Scroller类的区别就是它可以设置回弹边界，所以喜欢谁就用谁，因为它们的计算API都是一样的，用法上几乎没有区别。

  • postOnAnimation(Runnable action![](https://www.hualigs.cn/image/61dba891ed8ee.jpg) )

配合OverScroller食用更加美味，它的作用是展现动画的下一帧，也就是说，我们在滑动图片的时候，我们需要在滑动的过程中通过 OverScroller去计算每一帧的滑动速度、坐标，同时又要让其展现出来，所以我们需要在算完每一帧的时候，通过postOnAnimation去画出来~有没有点像异步处理，Handler什么的啊哈哈哈哈

1、缩放的依据是什么？

缩放的依据是什么？就是我们根据什么来缩放，先要理清这个东西特别特别的重要。因为我们所有方法的代码都要根据这个缩放依据来进行操作（比如做动画、做画布平移），而如果选择一个不好的缩放依据，会给我们留下很多的坑。

正常的缩放依据选择有两个：

  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) {

上一篇：学习LINUX的第17天


下一篇：防止暴利破解，拒绝ip登陆