Recenter the scrollview content Swift – Ios swift

Well, obviously, we can’t create a new project, paste in the code you posted, and run it.

So… hopefully this will help.

A scroll view’s .bounds is the visible rectangle of its .contentSize.

So, if we take this example:

• create a 400×600 "mapView" (as the viewForZooming)
• add a 30×30 "marker" subview at origin: x: 240, y: 400
• use a scrollview (yellow background) with a 200 x 300 frame
• constrain all 4 sides of the mapView to the scrollview’s .contentLayoutGuide

It will look like this to begin with at 1.0 zoom (everything outside the scrollview’s frame will be hidden, of course):

the scrollview will have:

ContentSize: (400.0, 600.0)
Bounds:      (0.0, 0.0, 200.0, 300.0)

If we scroll all the way to the bottom right corner, it will look like this:

with:

ContentSize: (400.0, 600.0)
Bounds:      (200.0, 300.0, 200.0, 300.0)

If we zoom in to 2.0 zoom scale, we get:

ContentSize: (800.0, 1200.0)
Bounds:      (0.0, 0.0, 200.0, 300.0)

ContentSize: (800.0, 1200.0)
Bounds:      (600.0, 900.0, 200.0, 300.0)

If we zoom in to 3.0 zoom scale, we get:

ContentSize: (1200.0, 1800.0)
Bounds:      (0.0, 0.0, 200.0, 300.0)

ContentSize: (1200.0, 1800.0)
Bounds:      (1000.0, 1500.0, 200.0, 300.0)

and if we zoom out to 0.5 zoom scale:

ContentSize: (200.0, 300.0)
Bounds:      (0.0, 0.0, 200.0, 300.0)

The first task is to find out if the "marker" is visible… if it is, we don’t need to do anything. If it’s not visible (scrolled outside the frame), we want to center it.

So, if we’ve scrolled like this:

we can say:

let r = marker.frame
let isInside = scrollView.bounds.contains(r)

in this case, isInside will be true.

But, if the marker is outside the frame like this:

we want to define a CGRect that is the same width and height as the scrollview’s bounds, centered on the center of the marker:

and we can call:

scrollView.scrollRectToVisible(r, animated: true)

Of course, if our marker view is close to an edge, like this:

that’s as close to the center as its going to get.

That’s not quite enough though…

The marker view’s frame will always be its own frame – it get scaled when the scroll view’s zoom scale changes. So, we need to account for that:

let r = marker.frame.applying(CGAffineTransform(scaleX: self.scrollView.zoomScale, y: self.scrollView.zoomScale))
let isInside = scrollView.bounds.contains(r)

Here’s a complete example demo… we create the "map view" at twice the size of the scroll view, minZoom: 0.5, maxZoom: 3.0, arrange a pattern of "markers" and use two buttons to "Highlight and Center if Needed":

Note: Sample Code Only – not intended to be "production ready":

class CenterInScrollVC: UIViewController, UIScrollViewDelegate {
    
    let scrollView: UIScrollView = {
        let v = UIScrollView()
        return v
    }()
    
    // can be any type of view
    //  using a "Dashed Outline" so we can see its edges
    let mapView: DashView = {
        let v = DashView()
        v.backgroundColor = UIColor(white: 0.9, alpha: 0.5)
        v.color = .blue
        v.style = .border
        return v
    }()

    var mapMarkers: [UIView] = []
    var markerIndex: Int = 0
    
    // let's make the markers 40x40
    let markerSize: CGFloat = 40.0
    
    // percentage of one-half of marker that must be visible to NOT screll to center
    //  1.0 == entire marker must be visible
    //  0.5 == up to 1/4 of marker may be out of view
    //  <= 0.0 == only check that the Center of the marker is in view
    //  can be set to > 1.0 to require entire marker Plus some "padding"
    let pctVisible: CGFloat = 1.0
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        view.backgroundColor = .systemBackground
        
        // a button to center the current marker (if needed)
        let btnA: UIButton = {
            let v = UIButton()
            v.backgroundColor = .systemRed
            v.setTitleColor(.white, for: .normal)
            v.setTitleColor(.lightGray, for: .highlighted)
            v.setTitle("Center Current if Needed", for: [])
            v.addTarget(self, action: #selector(btnATap(_:)), for: .touchUpInside)
            return v
        }()
        
        // a button to select the next marker, center if needed
        let btnB: UIButton = {
            let v = UIButton()
            v.backgroundColor = .systemRed
            v.setTitleColor(.white, for: .normal)
            v.setTitleColor(.lightGray, for: .highlighted)
            v.setTitle("Go To Marker - 2", for: [])
            v.addTarget(self, action: #selector(btnBTap(_:)), for: .touchUpInside)
            return v
        }()
        
        // add a view with a "+" marker to show the center of the scroll view
        let centerView: DashView = {
            let v = DashView()
            v.backgroundColor = .clear
            v.color = UIColor(red: 0.95, green: 0.2, blue: 1.0, alpha: 0.5)
            v.style = .centerMarker
            v.isUserInteractionEnabled = false
            return v
        }()
        
        [btnA, btnB, mapView, scrollView, centerView].forEach { v in
            v.translatesAutoresizingMaskIntoConstraints = false
        }
        
        [btnA, btnB, scrollView, centerView].forEach { v in
            view.addSubview(v)
        }

        scrollView.addSubview(mapView)
        
        let safeG = view.safeAreaLayoutGuide
        let contentG = scrollView.contentLayoutGuide
        let frameG = scrollView.frameLayoutGuide
        
        NSLayoutConstraint.activate([
            
            // buttons at the top
            btnA.topAnchor.constraint(equalTo: safeG.topAnchor, constant: 20.0),
            btnA.widthAnchor.constraint(equalTo: safeG.widthAnchor, multiplier: 0.7),
            btnA.centerXAnchor.constraint(equalTo: safeG.centerXAnchor),
            
            btnB.topAnchor.constraint(equalTo: btnA.bottomAnchor, constant: 20.0),
            btnB.widthAnchor.constraint(equalTo: btnA.widthAnchor),
            btnB.centerXAnchor.constraint(equalTo: safeG.centerXAnchor),
            
            // let's inset the scroll view to make it easier to distinguish
            scrollView.topAnchor.constraint(equalTo: btnB.bottomAnchor, constant: 40.0),
            scrollView.leadingAnchor.constraint(equalTo: safeG.leadingAnchor, constant: 40.0),
            scrollView.trailingAnchor.constraint(equalTo: safeG.trailingAnchor, constant: -40.0),
            scrollView.bottomAnchor.constraint(equalTo: safeG.bottomAnchor, constant: -40.0),
            
            // overlay "center lines" view
            centerView.topAnchor.constraint(equalTo: scrollView.topAnchor),
            centerView.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor),
            centerView.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor),
            centerView.bottomAnchor.constraint(equalTo: scrollView.bottomAnchor),

            // mapView Top/Leading/Trailing/Bottom to scroll view's CONTENT GUIDE
            mapView.topAnchor.constraint(equalTo: contentG.topAnchor, constant: 0.0),
            mapView.leadingAnchor.constraint(equalTo: contentG.leadingAnchor, constant: 0.0),
            mapView.trailingAnchor.constraint(equalTo: contentG.trailingAnchor, constant: 0.0),
            mapView.bottomAnchor.constraint(equalTo: contentG.bottomAnchor, constant: 0.0),
            
            // let's make the mapView twice as wide and tall as the scroll view
            mapView.widthAnchor.constraint(equalTo: frameG.widthAnchor, multiplier: 2.0),
            mapView.heightAnchor.constraint(equalTo: frameG.heightAnchor, multiplier: 2.0),
            
        ])
        
        // some example locations for the Markers
        let pcts: [[CGFloat]] = [
            
            [0.50, 0.50],
            
            [0.25, 0.50],
            [0.50, 0.25],
            [0.75, 0.50],
            [0.50, 0.75],

            [0.10, 0.15],
            [0.90, 0.15],
            [0.90, 0.85],
            [0.10, 0.85],
            
        ]
        for (i, p) in pcts.enumerated() {
            let v = UILabel()
            v.text = "(i + 1)"
            v.textAlignment = .center
            v.textColor = .yellow
            v.backgroundColor = .systemBlue
            v.font = .systemFont(ofSize: 15.0, weight: .bold)
            v.translatesAutoresizingMaskIntoConstraints = false
            mapMarkers.append(v)
            mapView.addSubview(v)
            v.widthAnchor.constraint(equalToConstant: markerSize).isActive = true
            v.heightAnchor.constraint(equalTo: v.widthAnchor).isActive = true
            NSLayoutConstraint(item: v, attribute: .centerX, relatedBy: .equal, toItem: mapView, attribute: .trailing, multiplier: p[0], constant: 0.0).isActive = true
            NSLayoutConstraint(item: v, attribute: .centerY, relatedBy: .equal, toItem: mapView, attribute: .bottom, multiplier: p[1], constant: 0.0).isActive = true
        }
        
        scrollView.minimumZoomScale = 0.5
        scrollView.maximumZoomScale = 3.0
        scrollView.delegate = self
        
    }

    override func viewDidAppear(_ animated: Bool) {
        super.viewDidAppear(animated)
        
        // let's start with the scroll view zoomed out
        scrollView.zoomScale = scrollView.minimumZoomScale
        
        // highlight and center (if needed) the 1st marker
        markerIndex = 0
        let marker = mapMarkers[markerIndex % mapMarkers.count]
        highlightMarkerAndCenterIfNeeded(marker, animated: true)
    }

    @objc func btnATap(_ sender: Any?) {
        // to easily test "center if not visible" without changing the "current marker"
        let marker = mapMarkers[markerIndex % mapMarkers.count]
        highlightMarkerAndCenterIfNeeded(marker, animated: true)
    }
    
    @objc func btnBTap(_ sender: Any?) {
        // increment index to the next marker
        markerIndex += 1
        let marker = mapMarkers[markerIndex % mapMarkers.count]
        // center if needed
        highlightMarkerAndCenterIfNeeded(marker, animated: true)
        // update button title
        if let b = sender as? UIButton, let m = mapMarkers[(markerIndex + 1) % mapMarkers.count] as? UILabel, let t = m.text {
            b.setTitle("Go To Marker - (t)", for: [])
        }
    }
    
    func highlightMarkerAndCenterIfNeeded(_ marker: UIView, animated: Bool) {
        
        // "un-highlight" all markers
        mapMarkers.forEach { v in
            v.backgroundColor = .systemBlue
        }
        // "highlight" the new marker
        marker.backgroundColor = .systemGreen

        // get the marker frame, scaled by zoom scale
        var r = marker.frame.applying(CGAffineTransform(scaleX: self.scrollView.zoomScale, y: self.scrollView.zoomScale))
        
        // inset the rect if we allow less-than-full marker visible
        if pctVisible > 0.0 {
            let iw: CGFloat = (1.0 - pctVisible) * r.width * 0.5
            let ih: CGFloat = (1.0 - pctVisible) * r.height * 0.5
            r = r.insetBy(dx: iw, dy: ih)
        }
        
        var isInside: Bool = true
        
        if pctVisible <= 0.0 {
            // check center point only
            isInside = self.scrollView.bounds.contains(CGPoint(x: r.midX, y: r.midY))
        } else {
            // check the rect
            isInside = self.scrollView.bounds.contains(r)
        }
        
        // if the marker rect (or point) IS inside the scroll view
        //  we don't do anything
        
        // if it's NOT inside the scroll view
        //  center it
        
        if !isInside {
            // create a rect using scroll view's bounds centered on marker's center
            let w: CGFloat = self.scrollView.bounds.width
            let h: CGFloat = self.scrollView.bounds.height
            r = CGRect(x: r.midX, y: r.midY, width: w, height: h).offsetBy(dx: -w * 0.5, dy: -h * 0.5)

            if animated {
                // let's slow down the animation a little
                UIView.animate(withDuration: 0.75, delay: 0.0, options: [.curveEaseInOut], animations: {
                    self.scrollView.scrollRectToVisible(r, animated: false)
                }, completion: nil)
            } else {
                self.scrollView.scrollRectToVisible(r, animated: false)
            }
        }
        
    }

    func viewForZooming(in scrollView: UIScrollView) -> UIView? {
        return mapView
    }
    
}

Edit — as noted in the code comments, any view can be used for viewForZooming, but here’s the code for the DashView I used:

class DashView: UIView {
    // border or
    // vertical and horizontal center lines or
    // two lines forming a + in the center
    enum Style: Int {
        case border
        case centerLines
        case centerMarker
    }
    
    public var style: Style = .border {
        didSet {
            setNeedsLayout()
        }
    }

    // solid or dashed
    public var solid: Bool = false
    
    // line color
    public var color: UIColor = .yellow {
        didSet {
            dashLayer.strokeColor = color.cgColor
        }
    }
    
    private let dashLayer = CAShapeLayer()
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        commonInit()
    }
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        commonInit()
    }
    private func commonInit() {
        layer.addSublayer(dashLayer)
        dashLayer.strokeColor = color.cgColor
        dashLayer.fillColor = UIColor.clear.cgColor
        dashLayer.lineWidth = 2
        
    }
    override func layoutSubviews() {
        super.layoutSubviews()
        var bez = UIBezierPath()
        switch style {
        case .border:
            bez = UIBezierPath(rect: bounds)
            dashLayer.lineDashPattern = [10, 10]

        case .centerLines:
            bez.move(to: CGPoint(x: bounds.midX, y: bounds.minY))
            bez.addLine(to: CGPoint(x: bounds.midX, y: bounds.maxY))
            bez.move(to: CGPoint(x: bounds.minX, y: bounds.midY))
            bez.addLine(to: CGPoint(x: bounds.maxX, y: bounds.midY))
            dashLayer.lineDashPattern = [10, 10]

        case .centerMarker:
            bez.move(to: CGPoint(x: bounds.midX, y: bounds.midY - 40.0))
            bez.addLine(to: CGPoint(x: bounds.midX, y: bounds.midY + 40.0))
            bez.move(to: CGPoint(x: bounds.midX - 40.0, y: bounds.midY))
            bez.addLine(to: CGPoint(x: bounds.midX + 40.0, y: bounds.midY))
            dashLayer.lineDashPattern = []
        }
        if solid {
            dashLayer.lineDashPattern = []
        }
        dashLayer.path = bez.cgPath
    }
}