I'm trying to replicate the image zoom in/out feature we find in IG, the only issue I'm having is when I zoom-in, the image is not covering the entire screen, it only zooms-in inside the cell. This is a regular setup, a table view, a cell, an image view and a label. I'm not sure what I'm missing here. Any help is greatly appreciated:
View Controller
import UIKit
class ViewController: UIViewController, UITableViewDelegate {
@IBOutlet weak var tableView: UITableView!
var picArray = ["1", "2", "3", "4", "5", "6", "7", "8", "9"]
override func viewDidLoad() {
super.viewDidLoad()
tableView.dataSource = self
tableView.delegate = self
tableView.rowHeight = 300
}
}
extension ViewController: UITableViewDataSource {
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return picArray.count
}
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath) as! cell
let data = picArray[indexPath.item]
cell.backgroundColor = .red
cell.setupCell(image: data)
cell.clipsToBounds = false
cell.selectionStyle = .none
return cell
}
}
Cell Class
import UIKit
class cell: UITableViewCell, UIScrollViewDelegate {
@IBOutlet var picture: UIImageView!
@IBOutlet var caption: UILabel!
var zoomEnabled = false
var imgCenter:CGPoint?
override func awakeFromNib() {
super.awakeFromNib()
picture.contentMode = .scaleAspectFill
picture.isUserInteractionEnabled = true
picture.clipsToBounds = false
caption.layer.zPosition = -1
let pinch = UIPinchGestureRecognizer(target: self, action: #selector(self.pinch(sender:)))
pinch.delegate = self
self.picture.addGestureRecognizer(pinch)
let pan = UIPanGestureRecognizer(target: self, action: #selector(self.pan(sender:)))
pan.delegate = self
self.picture.addGestureRecognizer(pan)
}
override func gestureRecognizer(_ gestureRecognizer: UIGestureRecognizer, shouldRecognizeSimultaneouslyWith otherGestureRecognizer: UIGestureRecognizer) -> Bool {
return true
}
@objc func pan(sender: UIPanGestureRecognizer) {
if self.zoomEnabled && sender.state == .began {
self.imgCenter = sender.view?.center
} else if self.zoomEnabled && sender.state == .changed {
let translation = sender.translation(in: self)
if let view = sender.view {
view.center = CGPoint(x:view.center.x + translation.x,
y:view.center.y + translation.y)
}
sender.setTranslation(CGPoint.zero, in: self.picture.superview)
}
}
@objc func pinch(sender: UIPinchGestureRecognizer) {
if sender.state == .began {
let currentScale = self.picture.frame.size.width / self.picture.bounds.size.width
let newScale = currentScale * sender.scale
if newScale > 1 {
self.zoomEnabled = true
}
} else if sender.state == .changed {
guard let view = sender.view else {return}
let pinchCenter = CGPoint(x: sender.location(in: view).x - view.bounds.midX,
y: sender.location(in: view).y - view.bounds.midY)
let transform = view.transform.translatedBy(x: pinchCenter.x, y: pinchCenter.y)
.scaledBy(x: sender.scale, y: sender.scale)
.translatedBy(x: -pinchCenter.x, y: -pinchCenter.y)
let currentScale = self.picture.frame.size.width / self.picture.bounds.size.width
var newScale = currentScale * sender.scale
if newScale < 1 {
newScale = 1
let transform = CGAffineTransform(scaleX: newScale, y: newScale)
self.picture.transform = transform
sender.scale = 1
}else {
view.transform = transform
sender.scale = 1
}
} else if sender.state == .ended {
guard let center = self.imgCenter else {return}
UIView.animate(withDuration: 0.3, animations: {
self.picture.transform = CGAffineTransform.identity
self.picture.center = center
}, completion: { _ in
self.zoomEnabled = false
})
}
}
func setupCell(image: String) {
if let image : UIImage = UIImage(named: image) {
picture.image = image
}
}
}
