实现可以缩放的ImageView

已于 2024-03-22 17:19:33 修改
阅读量311 收藏 10
点赞数 5
文章标签： kotlin github
于 2024-03-22 17:18:24 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Ai_wen_/article/details/136944478
版权

主要用到了Matrix，ScaleGestureDetector，GestureDetector 

介绍

  • Matrix ，中文里叫矩阵，高等数学里有介绍。Android中的Matrix类是一个3x3的位置坐标矩阵，在图像处理方面，主要是用于平面的缩放、平移、旋转等操作。更详细的介绍参考：android matrix 最全方法详解与进阶（完整篇）-CSDN博客
  • ScaleGestureDetector，是专门用来检测两个手指在屏幕上做缩放的手势用的，最简单的应用就是用来缩放图片或者缩放网页。
  • GestureDetector ，实现滑动和双击监听

通过ScaleGestureDetector监听多指操作实现放大缩小，监听GestureDetector实现滑动与双击放大，具体的缩放、平移效果则是由Matrix实现，下面是效果图及代码展示

效果展示

代码实现

代码里有详细的注释，可以直接复制使用

class ZoomImageView @JvmOverloads constructor(context: Context, attrs: AttributeSet? = null) :
    androidx.appcompat.widget.AppCompatImageView(context, attrs),
    OnGlobalLayoutListener {

    private var mIsOneLoad = true

    //初始化的比例
    private var mInitScale = 0f

    //最小比例
    private var mMinScale = 0f

    //图片最大比例
    private var mMaxScale = 0f

    //双击能达到的最大比例
    private var mMidScale = 0f
    private var mScaleMatrix: Matrix? = null

    //捕获用户多点触控
    private var mScaleGestureDetector: ScaleGestureDetector? = null

    //移动
    private var gestureDetector: GestureDetector? = null

    //双击
    private var isEnlarge = false //是否放大
    private var mAnimator: ValueAnimator? = null //双击缩放动画

    //滚动
    private var scroller: OverScroller? = null
    private var mCurrentX = 0
    private var mCurrentY: Int = 0
    private var translationAnimation: ValueAnimator? = null //惯性移动动画

    //单击
    private var onClickListener: OnClickListener? = null //单击监听

    init {
        //记住，一定要把ScaleType设置成ScaleType.MATRIX，否则无法缩放
        scaleType = ScaleType.MATRIX

        scroller = OverScroller(context)
        mScaleMatrix = Matrix()
        //手势缩放
        mScaleGestureDetector =
            ScaleGestureDetector(context, object : SimpleOnScaleGestureListener() {
                override fun onScale(detector: ScaleGestureDetector): Boolean {
                    scale(detector)
                    return true
                }

                override fun onScaleEnd(detector: ScaleGestureDetector) {
                    scaleEnd(detector)
                }
            })
        //滑动和双击监听
        gestureDetector = GestureDetector(context, object : SimpleOnGestureListener() {
            override fun onScroll(
                e1: MotionEvent,
                e2: MotionEvent,
                distanceX: Float,
                distanceY: Float
            ): Boolean {
                //滑动监听
                onTranslationImage(-distanceX, -distanceY)
                return true
            }

            override fun onDoubleTap(e: MotionEvent): Boolean {
                //双击监听
                onDoubleDrawScale(e.x, e.y)
                return true
            }

            override fun onFling(
                e1: MotionEvent,
                e2: MotionEvent,
                velocityX: Float,
                velocityY: Float
            ): Boolean {
                //滑动惯性处理
                mCurrentX = e2.x.toInt()
                mCurrentY = e2.y.toInt()
                val rectF = getMatrixRectF() ?: return false
                //startX为当前图片左边界的x坐标
                val startX = mCurrentX
                val startY = mCurrentY
                val vX = velocityX.roundToInt()
                val vY = velocityY.roundToInt()
                val maxX: Int = rectF.width().roundToInt()
                val maxY: Int = rectF.height().roundToInt()
                if (startX != maxX || startY != maxY) {
                    //调用fling方法，然后我们可以通过调用getCurX和getCurY来获得当前的x和y坐标
                    //这个坐标的计算是模拟一个惯性滑动来计算出来的，我们根据这个x和y的变化可以模拟出图片的惯性滑动
                    scroller?.fling(startX, startY, vX, vY, 0, maxX, 0, maxY, maxX, maxY)
                }
                if (translationAnimation != null && translationAnimation!!.isStarted)
                    translationAnimation!!.end()
                translationAnimation = ObjectAnimator.ofFloat(0f, 1f)
                translationAnimation?.setDuration(500)
                translationAnimation?.addUpdateListener {
                    if (scroller != null && scroller!!.computeScrollOffset()) {
                        //获得当前的x坐标
                        val newX = scroller!!.currX
                        val dx = newX - mCurrentX
                        mCurrentX = newX
                        //获得当前的y坐标
                        val newY = scroller!!.currY
                        val dy = newY - mCurrentY
                        mCurrentY = newY
                        //进行平移操作
                        if (dx != 0 && dy != 0) onTranslationImage(dx.toFloat(), dy.toFloat())
                    }
                }
                translationAnimation?.start()
                return super.onFling(e1, e2, velocityX, velocityY)
            }

            override fun onSingleTapConfirmed(e: MotionEvent): Boolean {
                //单击事件
                onClickListener?.onClick(this@ZoomImageView)
                return true
            }
        })
    }

    override fun setOnClickListener(onClickListener: OnClickListener?) {
        this.onClickListener = onClickListener
    }

    override fun onAttachedToWindow() {
        super.onAttachedToWindow()
        viewTreeObserver.addOnGlobalLayoutListener(this)
    }

    override fun onDetachedFromWindow() {
        super.onDetachedFromWindow()
        viewTreeObserver.removeOnGlobalLayoutListener(this)
    }

    override fun onGlobalLayout() {
        if (mIsOneLoad) {
            //得到控件的宽和高
            val width = width
            val height = height
            //获取图片,如果没有图片则直接退出
            val d = drawable ?: return
            //获取图片的宽和高
            val dw = d.intrinsicWidth
            val dh = d.intrinsicHeight
            var scale = 1.0f
            if (dw > width && dh <= height) {
                scale = width * 1.0f / dw
            }
            if (dw <= width && dh > height) {
                scale = height * 1.0f / dh
            }
            if (dw <= width && dh <= height || dw >= width && dh >= height) {
                scale = min(width * 1.0f / dw, height * 1.0f / dh)
            }
            //最小比例
            mMinScale = scale / 2
            //图片原始比例，图片回复原始大小时使用
            mInitScale = scale
            //图片双击后放大的比例
            mMidScale = scale * 2
            //手势放大时最大比例
            mMaxScale = scale * 4
            //设置移动数据,把改变比例后的图片移到中心点
            val translationX = width * 1.0f / 2 - dw / 2f
            val translationY = height * 1.0f / 2 - dh / 2f
            mScaleMatrix?.postTranslate(translationX, translationY)
            mScaleMatrix?.postScale(mInitScale, mInitScale, width * 1.0f / 2, height * 1.0f / 2)
            imageMatrix = mScaleMatrix
            mIsOneLoad = false
        }
    }

    //手势操作（缩放）
    fun scale(detector: ScaleGestureDetector) {
        drawable ?: return
        //获取手势操作的值,scaleFactor>1说明放大，<1则说明缩小
        val scaleFactor = detector.scaleFactor
        //获取手势操作后的比例，当放操作后比例在[mMinScale,mMaxScale]区间时允许放大
        mScaleMatrix!!.postScale(scaleFactor, scaleFactor, detector.focusX, detector.focusY)
        imageMatrix = mScaleMatrix
        removeBorderAndTranslationCenter()
    }

    //手势操作结束
    fun scaleEnd(detector: ScaleGestureDetector) {
        var scale: Float = getScale()
        scale *= detector.scaleFactor
        if (scale < mMinScale) {
            scaleAnimation(mMinScale, width / 2f, height / 2f)
        } else if (scale > mMaxScale) {
            scaleAnimation(mMaxScale, width / 2f, height / 2f)
        }
    }

    //手势操作（移动）
    private fun onTranslationImage(dx: Float, dy: Float) {
        var moveX = dx
        var moveY = dy
        if (drawable == null) return
        val rect: RectF? = getMatrixRectF()

        //图片宽度小于控件宽度时不允许左右移动
        if (rect != null && rect.width() <= width) moveX = 0.0f
        //图片高度小于控件宽度时，不允许上下移动
        if (rect != null && rect.height() <= height) moveY = 0.0f

        //移动距离等于0，那就不需要移动了
        if (moveX == 0.0f && moveY == 0.0f) return
        mScaleMatrix!!.postTranslate(moveX, moveY)
        imageMatrix = mScaleMatrix
        //去除移动边界
        removeBorderAndTranslationCenter()
    }

    //消除控件边界和把图片移动到中间
    private fun removeBorderAndTranslationCenter() {
        val rectF: RectF = getMatrixRectF() ?: return
        val width = width
        val height = height
        val widthF = rectF.width()
        val heightF = rectF.height()
        val left = rectF.left
        val right = rectF.right
        val top = rectF.top
        val bottom = rectF.bottom
        var translationX = 0.0f
        var translationY = 0.0f
        val centerTranslationX = width * 1.0f / 2f - (widthF / 2f + left)
        if (left > 0) {
            //左边有边界
            translationX = if (widthF > width) {
                //图片宽度大于控件宽度，移动到左边贴边
                -left
            } else {
                //图片宽度小于控件宽度，移动到中间
                centerTranslationX
            }
        } else if (right < width) {
            //右边有边界
            translationX = if (widthF > width) {
                //图片宽度大于控件宽度，移动到右边贴边
                width - right
            } else {
                //图片宽度小于控件宽度，移动到中间
                centerTranslationX
            }
        }
        val centerTranslationY = height * 1.0f / 2f - (top + heightF / 2f)
        if (top > 0) {
            //顶部有边界
            translationY = if (heightF > height) {
                //图片高度大于控件高度，去除顶部边界
                -top
            } else {
                //图片高度小于控件宽度，移动到中间
                centerTranslationY
            }
        } else if (bottom < height) {
            //底部有边界
            translationY = if (heightF > height) {
                //图片高度大于控件高度，去除顶部边界
                height - bottom
            } else {
                //图片高度小于控件宽度，移动到中间
                centerTranslationY
            }
        }
        mScaleMatrix!!.postTranslate(translationX, translationY)
        imageMatrix = mScaleMatrix
    }

    /**
     * 双击改变大小
     *
     * @param x 点击的中心点
     * @param y 点击的中心点
     */
    private fun onDoubleDrawScale(x: Float, y: Float) {
        //如果缩放动画已经在执行，那就不执行任何事件
        if (mAnimator != null && mAnimator!!.isRunning) return
        val drawScale: Float = getDoubleDrawScale()
        //执行动画缩放，不然太难看了
        scaleAnimation(drawScale, x, y)
    }

    /**
     * 缩放动画
     *
     * @param drawScale 缩放的比例
     * @param x         中心点
     * @param y         中心点
     */
    private fun scaleAnimation(drawScale: Float, x: Float, y: Float) {
        if (mAnimator != null && mAnimator!!.isRunning) return
        mAnimator = ObjectAnimator.ofFloat(getScale(), drawScale)
        mAnimator?.setDuration(500)
        mAnimator?.interpolator = AccelerateInterpolator()
        mAnimator?.addUpdateListener { animation: ValueAnimator ->
            val value: Float = animation.animatedValue as Float / getScale()
            mScaleMatrix!!.postScale(value, value, x, y)
            imageMatrix = mScaleMatrix
            removeBorderAndTranslationCenter()
        }
        mAnimator?.start()
    }

    //返回双击后改变的大小比例(我们希望缩放误差在deviation范围内)
    private fun getDoubleDrawScale(): Float {
        val deviation = 0.05f
        val drawScale: Float
        var scale: Float = getScale()
        if (abs(mMinScale - scale) < deviation) scale = mMinScale
        if (abs(mInitScale - scale) < deviation) scale = mInitScale
        if (abs(mMidScale - scale) < deviation) scale = mMidScale
        if (abs(mMaxScale - scale) < deviation) scale = mMaxScale
        if (scale != mMidScale) {
            //当前大小不等于mMidScale,则调整到mMidScale
            drawScale = mMidScale
            isEnlarge = scale < mMidScale
        } else {
            //如果等于mMidScale，则判断放大或者缩小
            //判断是放大或者缩小，如果上次是放大，则继续放大，缩小则继续缩小
            drawScale = if (isEnlarge) {
                //放大
                mMaxScale
            } else {
                //缩小
                mMinScale
            }
        }
        return drawScale
    }

    //获取图片宽高以及左右上下边界
    private fun getMatrixRectF(): RectF? {
        val drawable = drawable ?: return null
        val rectF = RectF(0f, 0f, drawable.minimumWidth.toFloat(), drawable.minimumHeight.toFloat())
        val matrix = imageMatrix
        matrix.mapRect(rectF)
        return rectF
    }

    /**
     * 获取当前图片的缩放值
     */
    private fun getScale(): Float {
        val values = FloatArray(9)
        mScaleMatrix!!.getValues(values)
        return values[Matrix.MSCALE_X]
    }

    /**
     * 解决和父控件滑动冲突 只要图片边界超过控件边界，返回true
     * @return true 禁止父控件滑动
     */
    override fun canScrollHorizontally(direction: Int): Boolean {
        val rect = getMatrixRectF()
        if (rect == null || rect.isEmpty) return false
        return if (direction > 0) {
            rect.right >= width + 1
        } else {
            rect.left <= -1
        }
    }

    override fun canScrollVertically(direction: Int): Boolean {
        val rect = getMatrixRectF()
        if (rect == null || rect.isEmpty) return false
        return if (direction > 0) {
            rect.bottom >= height + 1
        } else {
            rect.top <= -1
        }
    }

    @SuppressLint("ClickableViewAccessibility")
    override fun onTouchEvent(event: MotionEvent?): Boolean {
        return mScaleGestureDetector!!.onTouchEvent(event) or
                gestureDetector!!.onTouchEvent(event)
    }

}
<com.zhou.common.view.image.ZoomImageView
        android:id="@+id/iv_image"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@mipmap/icon_add"/>

源码地址：GitHub - zhoulei519/MyTest

demo中还有很多其他小工具，欢迎查看

Hunter-Lei
关注
Android ImageView图片缩放功能
12-01
现在app中，图片预览功能肯定是少不了的，用户基本已经形成条件反射，看到小图，点击看大图，看到大图两个手指开始进行放大，放大后，开始移动到指定部位想要做到图片支持多点触控，自由的进行缩放、平移 以及事件分发机制
支持手势缩放的ImageView
Watson的博客
08-31 3321
前两篇文章讲解了Android的触控机制和手势操作，讲到多点触控时我们举了一个简单的手势缩放图片的例子，但是功能很有限。本篇我们通过解析一个国外大牛Mike Ortiz写的自定义TouchImageView的源码，来更加深入了解安卓触控和手势操作。 TouchImageView继承自ImageView具有ImageView的所有功能；除此之外，还有缩放、拖拽、双击放大等功能，支持viewpager
android 自定义ImageView支持缩放
最新发布
weixin_41223037的博客
08-11 138
Android 自定义 ImageView 支持缩放的实现指南 在 Android 开发中，实现一个支持视图缩放功能的自定义 ImageView 是一项非常实用的技术，尤其是在需要显示大图片或者图片需要交互操作的应用中。本文将详细讲解如何实现这一功能，并给出代码示例和详细步骤。 流程概述 在实现自定义 ImageView ...
Android 可缩放ImageView
夜游神
09-28 600
android可以缩放的ImageView，项目中用到的，效果还不错，纪录一下import java.util.Observable; import java.util.Observer;import android.content.Context; import android.graphics.Bitmap; import android.graphics.Canvas; import andr
Android可缩放的ImageView
程序员的点滴
03-10 448
可缩放的ImageView，支持滑动
android ImageView图片缩放
yuxiaohui78的专栏
12-28 747
http://happyunbound.blog.163.com/blog/static/195231253201210110102479/
Android手势滑动实现ImageView缩放图片大小
09-02
通过以上步骤，可以实现一个基本的手势滑动缩放ImageView的功能。需要注意的是，实际应用中可能需要对滑动速度、缩放范围等进行优化和限制，以提供更流畅、稳定的用户体验。同时，还可以结合其他手势，如双击放大或...
Android 自定义imageview实现图片缩放实例详解
08-30
在Android开发中，有时我们需要对ImageView进行自定义以实现特定的功能，比如图片的缩放。本文将详细讲解如何在Android中自定义一个ImageView来实现图片的平滑缩放功能。 首先，我们创建一个自定义的ImageView类，...
Android使用ImageView实现支持手势缩放效果
09-01
本篇文章将详细介绍如何在Android中使用ImageView实现手势缩放效果，具体步骤如下： 首先，我们需要创建一个自定义的ImageView类，例如命名为`TouchImageView`，它将继承自Android内置的`ImageView`。这个自定义类...
Android-可拖动可放大缩放的ImageView
09-23
在Android开发中，有时我们需要创建一个用户可以自由拖动、缩放甚至旋转的ImageView，以提供更加丰富的交互体验。这个自定义的`DragZoom ImageView`就是为此目的设计的。在这个组件中，我们主要关注三个核心功能：...
Android自定义可拖动、可缩放的ImageView
PixelNovaO的博客
08-18 268
其中matrix用于保存ImageView的变换矩阵，savedMatrix用于保存拖动和缩放前的矩阵，start用于保存单指触摸事件的起始点，mid用于保存双指触摸事件的中心点，oldDistance用于保存双指触摸事件的初始距离。在onTouchEvent方法中，根据触摸事件的不同类型，执行相应的操作。在上述示例布局中，我们将自定义的DraggableZoomableImageView作为ImageView的子类使用，并设置了一张图片作为初始显示的内容，并将缩放类型设置为centerInside。
android 可放大缩小拖动的ImageView
08-29
一个可拖动，放大，缩小的ImageView（自定义控件）
Android开发之imageView图片按比例缩放的实现方法
09-02
主要介绍了Android开发之imageView图片按比例缩放的实现方法,较为详细的分析了Android中ImageView控件的scaleType属性控制图片缩放的具体用法,需要的朋友可以参考下
Android可平移缩放旋转的ImageView的实现
BigBoySunshine的专栏
10-17 1524
本文是在别人做的ImageView实现缩放,平移功能的基础上做了优化并加上了旋转功能. 一,缩放 缩放通过双击屏幕和双指移动实现. 1,双击缩放 通过GestureDetector获取双击事件mGestureDetector = new GestureDetector(context,new GestureDetector.SimpleOnGestureLis
安卓开发:原创真正可以点击移动缩放的ImageView类(Kotlin语言)
m0_62545462的博客
04-05 237
return super.onTouchEvent(event) //不要直接返回true false 不然无法响应点击。//在父控件中的右边位置 = 在左边的位置 + 自己的宽。public var enableMove=true //移动开关。public var enableScale=false //缩放开关。//当水平或者垂直滑动距离大于10,才算拖动事件。
Android imageView图片按比例缩放
lurunlan的专栏
07-31 509
android:scaleType可控制图片的缩放方式，示例代码如下： [html] view plaincopyprint? ImageView android:id="@+id/img"       android:src="@drawable/logo"      android:scaleType="centerInside"      android:layo
一起Talk Android吧（第五百四十二回：ImageView的缩放）
talk_8的专栏
04-08 760
本章回中主要介绍了如何对ImageView显示的图片进行缩放，介绍了实现缩放的方法，并且通过文字结合代码的方式进行了介绍。
Android手势控制ImageView缩放实现
本示例着重讲解如何实现一个自定义的MatrixImageView，通过手势操作来控制ImageView中的图片进行缩放，从而增强用户交互性。以下是详细的技术实现步骤： 1. **自定义View** 首先，我们需要创建一个新的`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值