how to set size of a scrollview to same size of a view

Question

I have a view and inside the view there is a scrollview. I setup the scrollview programmatically. But for some reason the scrollview fits not perfectly in the view. The scrollview has the same frame as the view. But for some reason it is not working.

The white view is the view where the scrollview is in it. The scrollview is the green view. I set the background color to green. In the scrollview there is an image view.

My Code:

    var scrollView: UIScrollView = {
            let scrollView = UIScrollView()
            scrollView.showsHorizontalScrollIndicator = false
            scrollView.alwaysBounceVertical = false
                scrollView.alwaysBounceHorizontal = false
                scrollView.isPagingEnabled = true
                return scrollView
            }()

        override func viewDidLoad() {
            super.viewDidLoad()
           scrollView.backgroundColor = .green
scrollView.frame = CGRect(x: 0, y: 0, width: UIScreen.main.bounds.size.width, height: contentView.frame.height)                contentView.addSubview(scrollView)

scrollView.leftAnchor.constraint(equalTo: contentView.leftAnchor, constant: 0).isActive = true
        scrollView.topAnchor.constraint(equalTo: contentView.topAnchor, constant: 0).isActive = true
        scrollView.rightAnchor.constraint(equalTo: contentView.rightAnchor, constant: 0).isActive = true
        scrollView.bottomAnchor.constraint(equalTo: contentView.bottomAnchor, constant: 0).isActive = true

}

    var frame = CGRect.zero
        func viewTutorial() {
            for i in 0..<arrayOfTutorilImages.count {
            frame.origin.x = scrollView.frame.size.width  * CGFloat((i))
                frame.size = scrollView.frame.size

                let imageView = UIImageView(frame: frame)
                imageView.image = UIImage(named: arrayOfTutorilImages[i])
                imageView.contentMode = .scaleAspectFit
                self.scrollView.addSubview(imageView)
            }

            scrollView.contentSize = CGSize(width: (scrollView.frame.size.width * CGFloat(arrayOfTutorilImages.count)), height: scrollView.frame.size.height)
            scrollView.delegate = self
        }

    extension TutorialViewController: UIScrollViewDelegate {
        func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {
            let pageNumber = scrollView.contentOffset.x / scrollView.frame.size.width
            pageControl.currentPage = Int(pageNumber)
        }
    }

UPDATE: I changed the frame and added constraints to the scrollview. Now it look like this. The images is not resizing (this image is the blue drawing)

Alejandro L.Rocha · Accepted Answer · 2020-03-08T11:15:33.263

2

I would recommend you to use constrains:

        self.scrollView.leadingAnchor.constraint(equalTo: self.view.leadingAnchor),
        self.scrollView.trailingAnchor.constraint(equalTo: self.view.trailingAnchor),
        self.scrollView.topAnchor.constraint(equalTo: self.view.topAnchor),
        self.scrollView.bottomAnchor.constraint(equalTo: self.view.bottomAnchor)

You can create a helper method for this if you have like a UIView+Helpers, and use just one line.

extension UIView {
    public func pinToEdges(of view: UIView,
                           topConstant: CGFloat = 0,
                           leadingConstant: CGFloat = 0,
                           bottomConstant: CGFloat = 0,
                           trailingConstant: CGFloat = 0) {

        NSLayoutConstraint.activate([
            self.topAnchor.constraint(equalTo: view.topAnchor, constant: topConstant),
            self.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: leadingConstant),
            self.bottomAnchor.constraint(equalTo: view.bottomAnchor, constant: bottomConstant),
            self.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: trailingConstant),
            ])
    }
}

And then use:

self.scrollView.pinToBounds(self.view)

And remember of course to set the translatesAutoresizingMaskIntoConstraints to false

edited Mar 08 '20 at 11:15

answered Mar 08 '20 at 10:40

Alejandro L.Rocha

961
6
13

I was trying around with constraints. Now the scrollview is the right size, but the image view is not resizing. It is still small like in the image on my post. – adri567 Mar 08 '20 at 10:46
do you mean scrollview? I am using a scrollview not a collection view – adri567 Mar 08 '20 at 11:13
Which image are you trying to resize? I don't really see it in the screenshot – Alejandro L.Rocha Mar 08 '20 at 11:14
oh yeah sorry... forget about the collectionView, I was wrong because I saw collection view in my answer in the post, actually will edit it ^^. – Alejandro L.Rocha Mar 08 '20 at 11:14
The image is the actually the blue drawing inside the (green) scrollview :D – adri567 Mar 08 '20 at 11:25
ok got it ^^, so now that you have the scrollview into the entire screen, add the imageView to the scroll view and do the same, pin it to the edges – Alejandro L.Rocha Mar 08 '20 at 12:11
oh nice, this worked for me! But for some reason I can't swipe my images to the left or to the right. It shows only the second image. – adri567 Mar 08 '20 at 12:29

how to set size of a scrollview to same size of a view

1 Answers1

Linked