如何在 UIScrollView 中将起始页面更改为另一个页面

Question

I've created a scroll view where the user can cycle through the pages that I've assigned. The first button leads to page1 as the starting page. However I would like the current starting page to be page 2 when I press button 2 that leads me to the page views but I can't seem to find a way around it,

My code in the ViewController is as follows:

var pages : [View] {
    
    get {
        let page1: View = Bundle.main.loadNibNamed("View", owner: self, options: nil)?.first as! View
        page1.colorLabel.text = "Apartment A3"
        page1.priceLabel.text = "N$ 504 500"
        page1.imageView.image = UIImage(named: "apartment_a3_1")
        
        
        let page2: View = Bundle.main.loadNibNamed("View", owner: self, options: nil)?.first as! View
        page2.colorLabel.text = "Apartment A4"
        page2.priceLabel.text = "N$ 481 000"
        page2.imageView.image = UIImage(named: "apartment_a4_1")
        
        let page3: View = Bundle.main.loadNibNamed("View", owner: self, options: nil)?.first as! View
        page3.colorLabel.text = "Apartment A5"
        page3.priceLabel.text = "N$ 541 000"
        page3.imageView.image = UIImage(named: "apartment_a5_1")
        
        let page4: View = Bundle.main.loadNibNamed("View", owner: self, options: nil)?.first as! View
        page4.colorLabel.text = "Apartment A6"
        page4.priceLabel.text = "N$ 553 000"
        page4.imageView.image = UIImage(named: "apartment_a6_1")
        
        let page5: View = Bundle.main.loadNibNamed("View", owner: self, options: nil)?.first as! View
        page5.colorLabel.text = "Apartment A8"
        page5.priceLabel.text = "N$ 588 000"
        page5.imageView.image = UIImage(named: "apartment_a8_1")
        
        let page6: View = Bundle.main.loadNibNamed("View", owner: self, options: nil)?.first as! View
        page6.colorLabel.text = "Apartment A9"
        page6.priceLabel.text = "N$ 775 000"
        page6.imageView.image = UIImage(named: "apartment_a9a1")
        
        let page7: View = Bundle.main.loadNibNamed("View", owner: self, options: nil)?.first as! View
        page7.colorLabel.text = "Apartment A12"
        page7.priceLabel.text = "N$ 775 000"
        page7.imageView.image = UIImage(named: "apartment_a12_a")
        

        return [page1, page2, page3, page4, page5, page6, page7]
    }
}

@IBOutlet weak var scrollView: UIScrollView!
@IBOutlet weak var pageControl: UIPageControl!

override func viewDidLoad() {
    super.viewDidLoad()
    
    //view.bringSubviewToFront(pageControl)
    
    setupScrollView(pages: pages)
    
    pageControl.numberOfPages = pages.count
    pageControl.currentPage = 0
}

func setupScrollView(pages: [View]) {
    //scrollView.frame = CGRect(x: 0, y: 0, width: view.frame.width, height: view.frame.height)
    scrollView.contentSize = CGSize(width: view.frame.width * CGFloat(pages.count), height: view.frame.height)
    scrollView.isPagingEnabled = true
    
    
    for i in 0 ..< pages.count {
        pages[i].frame = CGRect(x: view.frame.width * CGFloat(i), y: 0, width: view.frame.width, height: view.frame.height)
        scrollView.addSubview(pages[i])
    }
}

extension ViewController: UIScrollViewDelegate {
    func scrollViewDidScroll(_ scrollView: UIScrollView) {
        let pageIndex = round(scrollView.contentOffset.x/view.frame.width)
        pageControl.currentPage = Int(pageIndex)
    }
}

I've tried to change PageControl.currentPage = 0 to 1 but no luck.

Answer 1

Couple notes...

First, you should be using auto-layout -- makes it much easier to manage the frames and the scroll view content.

Second, keep your size calculations relative to the scroll view's frame, not the view's frame... it will keep things more consistent, and avoid problems if you decide to make the scroll view not "full screen" (which you shouldn't do anyway, because you always want to respect the safe-area).

Third, if you only have 7 "pages" this approach should be fine. If you may have more than that, you can run into memory issues. If that's the case, you should look into either a UICollectionView or UIPageViewController .

So, assuming you can stick with the scroll view approach...

To "start at the second page" you can set the scroll view's .contentOffset.x during viewDidLayoutSubviews .

Start by adding a var property to track the width of the scroll view's frame:

var scrollViewWidth: CGFloat = 0

then implement viewDidLayoutSubviews() :

override func viewDidLayoutSubviews() {
    super.viewDidLayoutSubviews()
    
    // we only want to call this once
    if scrollViewWidth != scrollView.frame.width {
        scrollViewWidth = scrollView.frame.width
        scrollView.contentOffset.x = scrollView.frame.width
    }
}

Here's a quick look at some changes you might want to make to take advantage of the benefits of auto-layout:

class ViewController: UIViewController {

    var pages : [View] {
        
        get {
            let page1: View = Bundle.main.loadNibNamed("View", owner: self, options: nil)?.first as! View
            page1.colorLabel.text = "Apartment A3"
            page1.priceLabel.text = "N$ 504 500"
            page1.imageView.image = UIImage(named: "apartment_a3_1")
            
            
            let page2: View = Bundle.main.loadNibNamed("View", owner: self, options: nil)?.first as! View
            page2.colorLabel.text = "Apartment A4"
            page2.priceLabel.text = "N$ 481 000"
            page2.imageView.image = UIImage(named: "apartment_a4_1")
            
            let page3: View = Bundle.main.loadNibNamed("View", owner: self, options: nil)?.first as! View
            page3.colorLabel.text = "Apartment A5"
            page3.priceLabel.text = "N$ 541 000"
            page3.imageView.image = UIImage(named: "apartment_a5_1")
            
            let page4: View = Bundle.main.loadNibNamed("View", owner: self, options: nil)?.first as! View
            page4.colorLabel.text = "Apartment A6"
            page4.priceLabel.text = "N$ 553 000"
            page4.imageView.image = UIImage(named: "apartment_a6_1")
            
            let page5: View = Bundle.main.loadNibNamed("View", owner: self, options: nil)?.first as! View
            page5.colorLabel.text = "Apartment A8"
            page5.priceLabel.text = "N$ 588 000"
            page5.imageView.image = UIImage(named: "apartment_a8_1")
            
            let page6: View = Bundle.main.loadNibNamed("View", owner: self, options: nil)?.first as! View
            page6.colorLabel.text = "Apartment A9"
            page6.priceLabel.text = "N$ 775 000"
            page6.imageView.image = UIImage(named: "apartment_a9a1")
            
            let page7: View = Bundle.main.loadNibNamed("View", owner: self, options: nil)?.first as! View
            page7.colorLabel.text = "Apartment A12"
            page7.priceLabel.text = "N$ 775 000"
            page7.imageView.image = UIImage(named: "apartment_a12_a")
            
            
            return [page1, page2, page3, page4, page5, page6, page7]
        }
    }

    @IBOutlet weak var scrollView: UIScrollView!
    @IBOutlet weak var pageControl: UIPageControl!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        setupScrollView(pages: pages)
        
        pageControl.numberOfPages = pages.count
        pageControl.currentPage = 0
    }
    
    var scrollViewWidth: CGFloat = 0

    override func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()
        
        // we only want to call this once
        if scrollViewWidth != scrollView.frame.width {
            scrollViewWidth = scrollView.frame.width
            scrollView.contentOffset.x = scrollView.frame.width
        }
    }

    func setupScrollView(pages: [View]) {
        
        let stack = UIStackView()
        stack.translatesAutoresizingMaskIntoConstraints = false
        
        let clg = scrollView.contentLayoutGuide
        let flg = scrollView.frameLayoutGuide
        
        scrollView.addSubview(stack)
        NSLayoutConstraint.activate([
            // constrain all 4 sides of stack view to scroll view's Content Layout Guide
            stack.topAnchor.constraint(equalTo: clg.topAnchor),
            stack.leadingAnchor.constraint(equalTo: clg.leadingAnchor),
            stack.trailingAnchor.constraint(equalTo: clg.trailingAnchor),
            stack.bottomAnchor.constraint(equalTo: clg.bottomAnchor),
            
            // constrain height of stack view to scroll view's Frame Layout Guide
            stack.heightAnchor.constraint(equalTo: flg.heightAnchor),
        ])
        
        for i in 0 ..< pages.count {
            // add each page to the stack view
            stack.addArrangedSubview(pages[i])
            // make each page the same width as the scroll view's Frame Layout Guide width
            pages[i].widthAnchor.constraint(equalTo: flg.widthAnchor).isActive = true
        }
        
        scrollView.isPagingEnabled = true
        scrollView.delegate = self

    }
    
    @IBAction func pageControlChanged(_ sender: UIPageControl) {
        UIView.animate(withDuration: 0.3, animations: {
            self.scrollView.contentOffset.x = CGFloat(sender.currentPage) * self.scrollView.frame.width
        })
    }
}
extension ViewController: UIScrollViewDelegate {
    func scrollViewDidScroll(_ scrollView: UIScrollView) {
        let pageIndex = round(scrollView.contentOffset.x / scrollView.frame.width)
        pageControl.currentPage = Int(pageIndex)
    }
}

---

Edit - response to comment...

If you have buttons to "go to a page" you can implement a function like this:

func showPage(_ pg: Int) {
    UIView.animate(withDuration: 0.3, animations: {
        self.scrollView.contentOffset.x = CGFloat(pg - 1) * self.scrollView.frame.width
    })
}

and call it with, for example:

showPage(5)