首先帘不,感謝各位大神的文章作為參考逆趣,我只是在需要的時候做個整理箕母,增加了一個放大點擊位置計算偏移量的方法。
思路
view 里面添加 collectionView砾隅,每個 cell 里面添加一個 scrollView误阻,scrollView 再添加 imageView
ImageZoomView.swift
這個就是我們最關(guān)鍵的 view,使用和布局都在里面晴埂,還有封裝的 collectionView究反,但是估計沒人想看我們就省略了,后面見源碼儒洛。
ImageZoomCell.swift
圖片的縮放功能都裝在這個里面精耐。
核心的方法
lastScale:記錄用戶操作后當前的縮放比例,tapOffset:雙擊圖片放大點擊位置后晶丘,該位置偏移到中心點的偏移量(也就是 scrollView 的偏移量)
let maxScale: CGFloat = 3.0 // 最大縮放倍數(shù)
let minScale: CGFloat = 0.5 // 最小倍數(shù)
let scaleDuration = 0.38 // 縮放動畫時間
var lastScale: CGFloat = 1.0 // 最后一次的縮放比例
var tapOffset: CGPoint? // 雙擊放大偏移的 point
把手勢添加到 cell 上面黍氮,手勢分為單擊和雙擊手勢唐含,這里單擊手勢要放在圖片放大后添加浅浮,直接一起添加會造成沖突(第一次雙擊放大手勢會沒有響應(yīng)),用手勢代理方法處理沖突捷枯,會造成圖片單擊復原回調(diào)會有明顯延遲滚秩。
func setupUI() {
// let singleTap = UITapGestureRecognizer.init(target: self, action: #selector(singleTap(tap:)))
// addGestureRecognizer(singleTap)
let doubleTap = UITapGestureRecognizer.init(target: self, action: #selector(doubleTap(tap:)))
doubleTap.numberOfTapsRequired = 2
addGestureRecognizer(doubleTap)
contentView.addSubview(scrollView)
}
兩個手勢的回調(diào)
/** 單擊復原 */
@objc func singleTap(tap: UITapGestureRecognizer) {
UIView.animate(withDuration: scaleDuration) {
self.setZoom(scale: 1.0)
}
}
/** 雙擊放大 */
@objc func doubleTap(tap: UITapGestureRecognizer) {
// 獲取點擊的位置
let point = tap.location(in: self)
// 根據(jù)點擊的位置計算偏移量
calculateOffset(tapPoint: point)
if lastScale > 1 {
lastScale = 1
} else {
lastScale = maxScale
// 單擊手勢放在這里
let singleTap = UITapGestureRecognizer.init(target: self, action: #selector(singleTap(tap:)))
addGestureRecognizer(singleTap)
}
UIView.animate(withDuration: scaleDuration) {
self.setZoom(scale: self.lastScale)
}
}
這個方法很簡單,主要控制圖片的放大縮小淮捆、scrollView 的 contentSize 和 contentOffset郁油、imageView 的 center本股。
/** 設(shè)置縮放比例 */
fileprivate func setZoom(scale: CGFloat) {
// 縮放比例限制(在最大最小中間)
lastScale = max(min(scale, maxScale), minScale)
imgView.transform = CGAffineTransform.init(scaleX: lastScale, y: lastScale)
let imageW = imgView.frame.size.width
let imageH = imgView.frame.size.height
if lastScale > 1 {
// 內(nèi)邊距是針對 scrollView 捏合縮放,圖片居中設(shè)置的邊距
scrollView.contentInset = UIEdgeInsets.zero // 內(nèi)邊距清空
// 修改中心點
imgView.center = CGPoint.init(x: imageW / 2, y: imageH / 2)
scrollView.contentSize = CGSize.init(width: imageW, height: imageH)
if let offset = tapOffset {
scrollView.contentOffset = offset
}
} else {
calculateInset()
scrollView.contentSize = CGSize.zero
}
}
圖片按最短的邊等比例縮放
var image: UIImage? {
didSet {
// 以最短的邊等比例縮小圖片
let imgSize = (image?.size)!
let scrollViewSize = scrollView.bounds.size
let widthScale = scrollViewSize.width / imgSize.width
let heightScale = scrollViewSize.height / imgSize.height
let minScale = min(widthScale, heightScale)
scrollView.minimumZoomScale = 1
imgView.bounds = CGRect.init(x: 0, y: 0, width: imgSize.width * minScale, height: imgSize.height * minScale)
imgView.image = image
}
}
這個方法是為了把縮放后的圖片放在當前 cell 的中心位置
/** 計算內(nèi)邊距 */
fileprivate func calculateInset() {
let imgViewSize = imgView.frame.size
let scrollViewSize = scrollView.bounds.size
// 垂直內(nèi)邊距
let paddingV = imgViewSize.height < scrollViewSize.height ? (scrollViewSize.height - imgViewSize.height) / 2 : 0
// 水平內(nèi)邊距
let paddingH = imgViewSize.width < scrollViewSize.width ? (scrollViewSize.width - imgViewSize.width) / 2 : 0
scrollView.contentInset = UIEdgeInsets.init(top: paddingV, left: paddingH, bottom: paddingV, right: 0)
imgView.center = CGPoint.init(x: imgViewSize.width / 2, y: imgViewSize.height / 2)
}
偏移量的計算
當我們雙擊這個圖片桐腌,圖片是從原點的位置拄显,向x,y軸的方向放大案站,我們只需要計算點擊的 point 放大后的位置與顯示區(qū)域的 center 的差值躬审,然后再限制這個差值的范圍。
/** 計算雙擊放大偏移量 */
fileprivate func calculateOffset(tapPoint: CGPoint) {
let viewSize = self.bounds.size
let imgViewSize = imgView.bounds.size
// 計算最大偏移 x y
let maxOffsetX = imgViewSize.width * maxScale - viewSize.width
let maxOffsetY = imgViewSize.height * maxScale - viewSize.height
var tapX: CGFloat = tapPoint.x
var tapY: CGFloat = tapPoint.y
if imgViewSize.width == viewSize.width {
// 將 tap superview 的 point 轉(zhuǎn)換 tap 到 imageView 上的距離
tapY = tapPoint.y - (viewSize.height - imgViewSize.height) / 2
} else {
tapX = tapPoint.x - (viewSize.width - imgViewSize.width) / 2
}
// 計算偏移量
let offsetX = (tapX * maxScale - (self.superview?.center.x)!)
let offsetY = (tapY * maxScale - (self.superview?.center.y)!)
// 判斷偏移量是否超出限制(0, maxOffset)
let x = min(max(offsetX, 0), maxOffsetX)
let y = min(max(offsetY, 0), maxOffsetY)
tapOffset = CGPoint.init(x: x, y: y)
}
結(jié)語
文章中點擊放大參考了 StrivEver 的圖片瀏覽工具蟆盐,捏合縮放參考的文章已經(jīng)找不到了承边,后面找到會加上去的。
代碼在此石挂,各位大爺慢慢享用博助,喜歡就給個小星星