CODEWITHSUNDEEP
iosswiftimageviewuiimagescrollview
adri567
adri567

Reputation: 661

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

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.

enter image description here

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)

enter image description here

Upvotes: 2

Views: 982

Answers (1)

Alejandro L.Rocha
Alejandro L.Rocha

Reputation: 1145

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

Upvotes: 2

Related Questions