CODEWITHSUNDEEP
iosswiftios-autolayout
John Doe
John Doe

Reputation: 2501

What is the code corresponding to the visual layout constraint?

What is the code corresponding to the visual layout constraint? I want to translate it to NSLayoutConstraint.activate([]) format.

scrollView = UIScrollView()
scrollView.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(scrollView)

view.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("H:|[scrollView]|", options: .AlignAllCenterX, metrics: nil, views: ["scrollView": scrollView]))
view.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("V:|[scrollView]|", options: .AlignAllCenterX, metrics: nil, views: ["scrollView": scrollView]))

stackView = UIStackView()
scrollView.addSubview(stackView)

scrollView.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("H:|[stackView]|", options: NSLayoutFormatOptions.AlignAllCenterX, metrics: nil, views: ["stackView": stackView]))
scrollView.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("V:|[stackView]", options: NSLayoutFormatOptions.AlignAllCenterX, metrics: nil, views: ["stackView": stackView]))

The snippet is from Simple Scrolling UIStackView.

Upvotes: 0

Views: 1982

Answers (1)

vacawama
vacawama

Reputation: 154691

The Visual Format Language (VFL) can create multiple constraints simultaneously, and these do. The first three VFL's create 2 constraints each, and the last one creates one constraint.

I'd suggest using layout anchors to create the constraints. Here is the equivalent of your code using NSLayoutConstraint.activate() and layout anchors:

scrollView = UIScrollView()
scrollView.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(scrollView)

NSLayoutConstraint.activate([
    scrollView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
    scrollView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
    scrollView.topAnchor.constraint(equalTo: view.topAnchor),
    scrollView.bottomAnchor.constraint(equalTo: view.bottomAnchor)
])

stackView = UIStackView()
scrollView.addSubview(stackView)

NSLayoutConstraint.activate([
    stackView.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor),
    stackView.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor),
    stackView.topAnchor.constraint(equalTo: scrollView.topAnchor)
])

Notes:

  1. I investigated the effects of .alignAllCenterX on the resulting constraints, and that option did nothing in this case.
  2. You could combine all of the constraints into a single NSLayoutConstraint.activate() call if you add both subviews before creating the constraints. I think it's clearer with two calls since each set has a single purpose.
  3. NSLayoutConstraint.activate() is smart and it adds the constraints to the appropriate views. It is the preferred choice and has been available since iOS 8.
  4. Make sure you set stackView.translatesAutoresizingMaskIntoConstraints = false and stackView.axis = .vertical. (You probably just left those out of the question to make it more concise).

Upvotes: 2

Related Questions