Swift:Unable to center ImageView on ScrollView - swift

Question

I am attempting to display an imageView at the center in the X and Y axis onto a scrollView, fitted nicely within the width of the device when I run the app. I would also want to pan and zoom the imageView. I have tried almost all the solution that has been posted on SO and also followed this tutorial but somehow it just doesn't resolve my issue. The image is generated from a PDF.
I do my layout programmatically. My implementation so far:
let scrollView: UIScrollView = {
let sv = UIScrollView()
sv.translatesAutoresizingMaskIntoConstraints = false
sv.backgroundColor = .lightGray
return sv
}()
let imageView: UIImageView = {
let iv = UIImageView()
iv.translatesAutoresizingMaskIntoConstraints = false
iv.contentMode = .scaleAspectFill
return iv
}()
override func viewDidLoad() {
super.viewDidLoad()
scrollView.delegate = self
view.addSubview(scrollView)
scrollView.addSubview(imageView)
NSLayoutConstraint.activate([
scrollView.topAnchor.constraint(equalTo: view.topAnchor),
scrollView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
scrollView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
scrollView.bottomAnchor.constraint(equalTo: view.bottomAnchor),
imageView.topAnchor.constraint(equalTo: scrollView.topAnchor, constant: 10),
imageView.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor, constant: 10),
imageView.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor, constant: -10),
imageView.bottomAnchor.constraint(equalTo: scrollView.bottomAnchor, constant: -10),
])
imageView.image = obtainThumbnail()
}
fileprivate func updateMinZoomScaleForSize(_ size: CGSize) {
let widthScale = size.width / imageView.bounds.width
let heightScale = size.height / imageView.bounds.height
let minScale = min(widthScale, heightScale)
scrollView.minimumZoomScale = minScale
scrollView.zoomScale = minScale
}
override func viewWillLayoutSubviews() {
super.viewWillLayoutSubviews()
updateMinZoomScaleForSize(view.bounds.size)
}
func obtainThumbnail() -> UIImage? {
guard let url = Bundle.main.url(forResource: "drawings", withExtension: "pdf") else {return nil}
guard
let data = try? Data(contentsOf: url),
let page = PDFDocument(data: data)?.page(at: 0) else {
return nil
}
let pageSize = page.bounds(for: .mediaBox)
return page.thumbnail(of: CGSize(width: pageSize.width, height: pageSize.height), for: .mediaBox)
}
func viewForZooming(in scrollView: UIScrollView) -> UIView? {
return imageView
}
This is my desired results when I run the app.
And this is the results when I run the app now, overstretched.
Would anyone advice what am I missing?

Answer 1

I think that views are loaded lazily in UIViewControllers so making the calculation later in the UI lifecycle should solve the problem. Removing the call in viewWillLayoutSubviews and instead using:
override func viewDidAppear(_ animated: Bool) {
super.viewDidAppear(animated)
updateMinZoomScaleForSize(view.bounds.size)
}
seems to work.

Answer 2

To make it work well, there are two places to fix:
override func viewDidLoad() {
super.viewDidLoad()
scrollView.delegate = self
view.addSubview(scrollView)
scrollView.addSubview(imageView)
NSLayoutConstraint.activate([
scrollView.topAnchor.constraint(equalTo: view.topAnchor),
scrollView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
//First place.
// scrollView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
// scrollView.bottomAnchor.constraint(equalTo: view.bottomAnchor),
scrollView.centerXAnchor.constraint(equalTo: view.centerXAnchor, constant: 0.0),
scrollView.centerYAnchor.constraint(equalTo: view.centerYAnchor, constant: 0.0),
imageView.topAnchor.constraint(equalTo: scrollView.topAnchor, constant: 10),
imageView.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor, constant: 10),
imageView.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor, constant: -10),
imageView.bottomAnchor.constraint(equalTo: scrollView.bottomAnchor, constant: -10),
])
imageView.backgroundColor = UIColor.red
imageView.image = UIImage.init(named: "temp2.png")
//second place.
imageView.sizeToFit()
Hope it solved your problem well.
If you need the view in the middle, may try the following method:
let scrollView: UIScrollView = {
let sv = UIScrollView()
sv.translatesAutoresizingMaskIntoConstraints = false
sv.backgroundColor = .lightGray
sv.contentMode = .center
return sv
}()
let imageView: UIImageView = {
let iv = UIImageView()
iv.translatesAutoresizingMaskIntoConstraints = true
iv.contentMode = .scaleAspectFill
return iv
}()
override func viewDidLoad() {
super.viewDidLoad()
scrollView.delegate = self
view.addSubview(scrollView)
scrollView.addSubview(imageView)
NSLayoutConstraint.activate([
scrollView.centerYAnchor.constraint(equalTo: view.centerYAnchor ),
scrollView.centerXAnchor.constraint(equalTo: view.centerXAnchor ),
scrollView.contentLayoutGuide.centerXAnchor.constraint(equalTo: scrollView.centerXAnchor),
scrollView.contentLayoutGuide.centerYAnchor.constraint(equalTo: scrollView.centerYAnchor),
])
imageView.backgroundColor = UIColor.red
imageView.image = UIImage.init(named: "temp2.png")
imageView.sizeToFit()
updateMinZoomScaleForSize(view.bounds.size)
}
var constantHeight : CGFloat{
return min(view.bounds.height, imageView.bounds.height * scrollView.zoomScale)
}
var constantWidth : CGFloat{
return min( view.bounds.width, imageView.bounds.width * scrollView.zoomScale)
}
lazy var constraintHeight: NSLayoutConstraint = {
return scrollView.contentLayoutGuide.heightAnchor.constraint(equalToConstant: constantHeight)
}()
lazy var constraintWeight: NSLayoutConstraint = {
return
scrollView.contentLayoutGuide.widthAnchor.constraint(equalToConstant: constantWidth)
}()
fileprivate func updateMinZoomScaleForSize(_ size: CGSize) {
let widthScale = size.width / imageView.bounds.width
let heightScale = size.height / imageView.bounds.height
let minScale = min(widthScale, heightScale)
imageView.frame = CGRect.init(x: 0, y: 0, width: minScale * imageView.bounds.width, height: minScale*imageView.bounds.height)
scrollView.maximumZoomScale = 10.0
scrollView.zoomScale = 1.0
constraintHeight.isActive = true
constraintWeight.isActive = true
}
func scrollViewDidEndZooming(_ scrollView: UIScrollView, with view: UIView?, atScale scale: CGFloat){
constraintHeight.constant = constantHeight
constraintWeight.constant = constantWidth
scrollView.clipsToBounds = true
}
func scrollViewWillBeginZooming(_ scrollView: UIScrollView, with view: UIView?) {
scrollView.clipsToBounds = false
}
func viewForZooming(in scrollView: UIScrollView) -> UIView? {
return imageView
}