Swift5学习之旅之图片的单击显示图片、双击放大缩小、捏合放大缩小

最新推荐文章于 2021-12-27 20:13:17 发布

原创最新推荐文章于 2021-12-27 20:13:17 发布 · 1.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ios #xcode #swift

iOS 同时被 2 个专栏收录

28 篇文章

订阅专栏

Swift

27 篇文章

订阅专栏

这篇博客介绍了如何在Swift5中实现图片的拖拽、单击显示、双击放大缩小以及捏合手势的缩放功能。通过添加手势识别和利用UIScrollViewDelegate，详细展示了代码实现过程，包括计算内边距、设置缩放比例等关键步骤。

Swift5学习之旅之纯代码实现图片的拖拽图片、单击显示图片、双击放大缩小、捏合放大缩小（UIControl, UIScrollViewDelegate）

演示gif

在这里插入图片描述

整体代码

Github还没上传，先用着Dropbox（可能要翻墙），看完有收获的感谢点个赞👍，如果翻不了墙要代码可以私聊我
https://www.dropbox.com/sh/r81dney8et2ob0h/AADN9NwnU-xXGiJEH3nb3D67a?dl=0
上面的链接Dropbox 图片设置

变更图片的核心代码

func calculateInset() {
        let imgViewSize = imageView!.frame.size
        let scrollViewSize = scrollView!.bounds.size
        // 垂直内边距
        let paddingV = imgViewSize.height < scrollViewSize.height ? (scrollViewSize.height - imgViewSize.height)/2 : 0
        // 水平内边距
        let paddingH = imgViewSize.width < scrollViewSize.width ? (scrollViewSize.width - imgViewSize.width)/2 : 0
        print("paddingWeight: \(paddingH) ")
        scrollView!.contentInset = UIEdgeInsets.init(top: paddingV, left: paddingH, bottom: paddingV, right: 0)
        imageView!.center = CGPoint.init(x: imgViewSize.width / 2, y: imgViewSize.height / 2)
        print("paddingHeight: \(paddingV)  ")
    }

缩放比例的实现

func setZoom(scale: CGFloat) {
        //缩放比例限制（在最大最小的中间）
        self.scale = max(min(scale, maxScale), minScale)
        imageView?.transform = CGAffineTransform.init(scaleX: scale, y: scale)
        
        let imageWidth = imageView?.frame.size.width
        let imageHeight = imageView?.frame.size.height
        if scale > 1{
            //内边距针对scrollview的缩放，图片居中设置边距
            scrollView?.contentInset = UIEdgeInsets.zero
            //修改中心点
            imageView?.center = CGPoint.init(x: imageWidth!/2, y: imageHeight!/2)
            scrollView?.contentSize = CGSize.init(width: imageWidth!, height: imageHeight!)
            if let offset = tapOffset{
                scrollView?.contentOffset = offset
            }
        }else{
            calculateInset()
            scrollView?.contentSize = CGSize.zero
        }
        
    }

手势的添加

//单击手势
        let singleTap = UITapGestureRecognizer(target: self, action: #selector(self.singleTapClick(_:)))
        singleTap.numberOfTapsRequired = 1
        self.scrollView?.addGestureRecognizer(singleTap)
        // 2.双击手势
        let doubleTap = UITapGestureRecognizer(target: self, action: #selector(doubleTapClick(_:)))
        doubleTap.numberOfTapsRequired = 2
        self.scrollView?.addGestureRecognizer(doubleTap)
        //必须加上这句，否则双击手势不管用
        singleTap.require(toFail: doubleTap)

两种的拖动图片实现（一种添加gesture一种是使用scrollviewdelegate实现）

添加UIPanGestureRecognizer

self.panRecognizer = UIPanGestureRecognizer(target: self, action: #selector(detectPan(recognizer:)))

@objc func detectPan(recognizer:UIPanGestureRecognizer) {
        let translation  = recognizer.translation(in: self.superview!)
        self.center = CGPoint(x: lastLocation!.x + translation.x, y: lastLocation!.y + translation.y)
    }
    override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
        self.superview?.bringSubviewToFront(self)
        lastLocation = self.center
    }

scrollviewdelegate实现

// MARK: - UIScrollViewDelegate
    //双指手势捏合放大缩小
    func scrollViewDidZoom(_ scrollView: UIScrollView) {
        // 捏合动画完成计算内边距
        calculateInset()
    }
    func viewForZooming(in scrollView: UIScrollView) -> UIView? {
        return imageView
    }