How to keep specific area of content view within a visible frame while zooming in scrollview? - ios

Question

I have cursor inside scroll content view. I am maintaining relative cursor size when zoom in but its going out of frame. I don't want to keep in center but I have to make sure it's always visible.
Before Zoom:
After Zoom:

Answer 1

I'm assuming you also don't want the user to be able to scroll the "selected rectangle) out of view...
One approach is to calculate the min and max content offsets in scrollViewDidScroll to make sure the "focus rect" is fully visible:
func scrollViewDidScroll(_ scrollView: UIScrollView) {
guard let fv = focusView else { return }
// get min and max scroll offsets
let mnx = fv.frame.minX * scrollView.zoomScale
let mny = fv.frame.minY * scrollView.zoomScale
let mxx = (fv.frame.maxX * scrollView.zoomScale) - scrollView.frame.width
let mxy = (fv.frame.maxY * scrollView.zoomScale) - scrollView.frame.height
let newX = max(min(scrollView.contentOffset.x, mnx), mxx)
let newY = max(min(scrollView.contentOffset.y, mny), mxy)
// update scroll offset if needed
scrollView.contentOffset = CGPoint(x: newX, y: newY)
}
Here's a quick example, using 6 subviews. For your "checkerboard grid" you would probably track a "focus rect" instead of a "focus view", but the same principle applies:
class RestrictZoomViewController: UIViewController, UIScrollViewDelegate {
let scrollView: UIScrollView = {
let v = UIScrollView()
v.backgroundColor = .systemYellow
return v
}()
let contentView: UIView = {
let v = UIView()
v.backgroundColor = .systemTeal
return v
}()
var focusView: UIView!
override func viewDidLoad() {
super.viewDidLoad()
view.backgroundColor = .lightGray
scrollView.addSubview(contentView)
view.addSubview(scrollView)
[contentView, scrollView].forEach {
$0.translatesAutoresizingMaskIntoConstraints = false
}
let safeG = view.safeAreaLayoutGuide
let contentG = scrollView.contentLayoutGuide
let frameG = scrollView.frameLayoutGuide
NSLayoutConstraint.activate([
scrollView.topAnchor.constraint(equalTo: safeG.topAnchor, constant: 20.0),
scrollView.leadingAnchor.constraint(equalTo: safeG.leadingAnchor, constant: 20.0),
scrollView.trailingAnchor.constraint(equalTo: safeG.trailingAnchor, constant: -20.0),
scrollView.bottomAnchor.constraint(equalTo: safeG.bottomAnchor, constant: -20.0),
contentView.topAnchor.constraint(equalTo: contentG.topAnchor),
contentView.leadingAnchor.constraint(equalTo: contentG.leadingAnchor),
contentView.trailingAnchor.constraint(equalTo: contentG.trailingAnchor),
contentView.bottomAnchor.constraint(equalTo: contentG.bottomAnchor),
contentView.widthAnchor.constraint(equalTo: frameG.widthAnchor),
contentView.heightAnchor.constraint(equalTo: frameG.heightAnchor),
])
let colors: [UIColor] = [
.systemRed, .systemGreen, .systemBlue,
.orange, .purple, .brown,
]
colors.forEach { c in
let v = UIView()
v.backgroundColor = c
v.layer.borderColor = UIColor.white.cgColor
let t = UITapGestureRecognizer(target: self, action: #selector(tapHandler(_:)))
v.addGestureRecognizer(t)
contentView.addSubview(v)
}
scrollView.minimumZoomScale = 1.0
scrollView.maximumZoomScale = 5.0
scrollView.bouncesZoom = false
scrollView.delegate = self
}
override func viewDidLayoutSubviews() {
super.viewDidLayoutSubviews()
// only want to do this once
if let firstView = contentView.subviews.first,
firstView.frame.width == 0 {
var x:CGFloat = 40
let y: CGFloat = 160
var j = 0
for _ in 0..<(contentView.subviews.count / 2) {
contentView.subviews[j].frame = CGRect(x: x, y: y, width: 60, height: 60)
j += 1
contentView.subviews[j].frame = CGRect(x: x, y: y + 100, width: 60, height: 60)
j += 1
x += 100
}
}
}
#objc func tapHandler(_ g: UITapGestureRecognizer) {
guard let v = g.view else { return }
if let fv = focusView {
fv.layer.borderWidth = 0
}
// "highlight" tapped view
v.layer.borderWidth = 1
// set it as focusView
focusView = v
// adjust scroll offset if new focusView is not fully visible
scrollViewDidScroll(scrollView)
}
func viewForZooming(in scrollView: UIScrollView) -> UIView? {
return contentView
}
func scrollViewDidScroll(_ scrollView: UIScrollView) {
guard let fv = focusView else { return }
// get min and max scroll offsets
let mnx = fv.frame.minX * scrollView.zoomScale
let mny = fv.frame.minY * scrollView.zoomScale
let mxx = (fv.frame.maxX * scrollView.zoomScale) - scrollView.frame.width
let mxy = (fv.frame.maxY * scrollView.zoomScale) - scrollView.frame.height
let newX = max(min(scrollView.contentOffset.x, mnx), mxx)
let newY = max(min(scrollView.contentOffset.y, mny), mxy)
// update scroll offset if needed
scrollView.contentOffset = CGPoint(x: newX, y: newY)
}
}