Horizontal UIScrollView using auto layout

Question

I have been trying this for quite sometime now and went through a lot of posts on SO and some video tutorials. What I want to create is a horizontal scroll view with some buttons in it, like this:

My view hierarchy is as follows:

• View Controller
  • View
    • Scroll View
      • View
        • Buttons

I have set top, leading, trailing, bottom constraints to the scroll view. I have set it's width equal to it's superview, and have set it's height to 200. So far so good, for the view inside the scroll view, I have set it's constraints leading, trailing, top and bottom to zero with respect to it's superview i.e. scroll view. I have made it's width equals to the View controllers view, since that was the solution here on SO to the ambiguous width issue. It solved the issue. Now I added all the buttons and set up their constraints to their parent view. Now when I run the app, a screen like the above added screenshot appears, however I cant scroll to the last element.Any help is greatly appretiated.

Answer 1

It's so simple.

1. Take a scrollView(Draw top left bottom right and hight constraint)

2. Take a UIView which will act like as a container View.(Draw top left bottom right constraint with scrollView).

3. Make your View Controller 1000px so that you can make your scrollView bigger and easy to watch.later on you can minimize it.

4. Now keep your button inside of it. keep in mind that, Every button will have top leading width , height and trailing if necessary. Width & height is important for scrollView because how big it will be depends on it.

Pictures worth a thousand word.

here is my hierarchy

And here is the Storyboard layout design.White background is basically containerView.

And here is the output.I have given some color for better understanding.

Answer 2

@IBOutlet weak var scrollView: UIScrollView!

    @IBOutlet weak var btnBack: UIButton!
    @IBOutlet weak var btnForward: UIButton!

let headerView = UIView()
        headerView.backgroundColor = UIColor.white

        for i in 0..<selectedRestaurant.multipleImages.count {
            let url = selectedRestaurant.multipleImages[i]

            let imgView = UIImageView()
            imgView.frame = CGRect(x: CGFloat(i) * self.view.frame.size.width, y: 0, width: self.view.frame.size.width, height: scrollView.frame.size.height)

            let task = URLSession.shared.dataTask(with: URL(string: url as! String)!, completionHandler: { (data, response, error) in

                if error == nil {
                    if data != nil {
                        imgView.contentMode = UIViewContentMode.scaleAspectFill
                        imgView.image = UIImage(data: data!)
                    }
                }



        })
                scrollView.addSubview(imgView)
scrollView.contentSize = CGSize(width: self.view.frame.size.width * CGFloat(selectedRestaurant.multipleImages.count), height: scrollView.frame.size.height)

write code in btn back clicked <<<<

let index = Int(scrollView.contentOffset.x/self.view.frame.size.width) - 1
        print("\(index)")
        if index >= 0 {
            scrollView.setContentOffset(CGPoint(x: CGFloat(index) * self.view.frame.size.width, y: 0), animated: true)
        }

write code in btn next clicked >>>>>

let index = Int(scrollView.contentOffset.x/self.view.frame.size.width) + 1
        print("\(index)")
        if index < (selectedRestaurant.multipleImages.count)  {
            scrollView.setContentOffset(CGPoint(x: CGFloat(index) * self.view.frame.size.width, y: 0), animated: true)
        }