Add subviews programmatically to ScrollView using Visual Format Language

Question

scroll view - layout programmatically - swift 3

Dear friends: I hope someone could revise this project and help me before my brain been burned. Thanks in advance.

The task: Horizontal Scroll - Layout an array of 4 images, square of 240 x 240 and 20 of spacing. The constraints for the scroll view set directly in the storyboard, but the images subviews had been added programmatically using Visual Format Language. Content size for scroll suppose done by this constraints.

What I have done: Set the array of images, create de ImageView programmatically and add the array using a for in loop. Create the constraints using the visual format. A way to do this can be found in this article: http://www.apeth.com/iOSBook/ch20.html.

Here the link to the project in GitHub https://github.com/ricardovaldes/soloScrollEjercicio

Constraints for the ScrollView added directly in the storyboard.

import UIKit

class ViewController: UIViewController {
    @IBOutlet weak var myScroll: UIScrollView!

    var carsArray = [UIImage]()
    var constraints = [NSLayoutConstraint]()

    override func viewDidLoad() {
        super.viewDidLoad()

        carsArray = [#imageLiteral(resourceName: "fasto1"), #imageLiteral(resourceName: "fasto2"), #imageLiteral(resourceName: "fasto3"), #imageLiteral(resourceName: "fasto4")]

        var const = [NSLayoutConstraint]()
        var views: [String: UIView]
        var previous: UIImageView? = nil

        for index in 0..<carsArray.count{
            let newImageView = UIImageView()
            newImageView.image  = carsArray[index]
            newImageView.translatesAutoresizingMaskIntoConstraints = false
            myScroll.addSubview(newImageView)
            self.myScroll.setNeedsLayout()


            views = ["newImageView": newImageView, "myScroll": myScroll]

            if previous == nil{
                const.append(contentsOf: NSLayoutConstraint.constraints(withVisualFormat: "H:|[newImageView(240)]",  metrics: nil, views: views))
            }
            else{
                const.append(contentsOf: NSLayoutConstraint.constraints(withVisualFormat: "H:[previous]-20-[newImageView(240)]", metrics: nil, views: ["newImageView": newImageView, "previous": previous!]))
            }

            previous = newImageView

            const.append(contentsOf: NSLayoutConstraint.constraints(withVisualFormat: "H:[previous]|", metrics: nil, views: ["previous": newImageView]))

            const.append(contentsOf: NSLayoutConstraint.constraints(withVisualFormat: "V:|[newImageView(240)]|", metrics: nil, views: views))

        }
        NSLayoutConstraint.activate(const)
    }
}

Even though I have tried a lot of combinations I have the same error:

2018-04-29 21:24:34.347466-0500 soloScrollEjercicio[12002:1665919] [LayoutConstraints] Unable to simultaneously satisfy constraints.

Answer 1

each loop round, you add a right side pin constraint to scroll view for every new added imageView, but there is 20 points between each other.

 |-previous-20-newOne-|                                ** second round loop **
                     -20-newOne'-|                     ** third round loop  **

this breaks imageView width(240) constraint

one way deal with it: only add right side pin constraint to the last imageView.

scroll view constraint in your main storyboard also has a break.

+-------------------+
|          |        |
|-scroll view (240)-|

the bottom one with vertical spacing to super view should not be there. it would break the scroll view height(240), so delete it will be fine.

maybe you should try:

• set it's constraint priority to 999, or some other value not equal to 1000
• uncheck installed box
• delete it

---

and now, your scroll view should be OK.

---

p.s. I found your reference book is based on iOS 6? in the year 2018, starts from iOS 10 or iOS 11 may be a better choice.

happy hacking :)