AloeStackView as subview & Auto-Layout

[ladislas]

Hi there! First let me thank you for this great piece of work, I'm using it a lot in my apps and it's great!

I'm having some troubles though with the following settings:

• I have a UIViewControler
• in which I add a bunch of views as subviews
• one of those is an AloeStackView that should fill the bottom part of the window and be scrollable.

I manage to display things the way I want using autolayout but I have a lot of errors in the console.

(
    "<NSAutoresizingMaskLayoutConstraint:0x600003a1e440 h=--& v=--& AloeStackView.AloeStackView:0x7fd89d82ac00.width == 0   (active)>",
    "<NSLayoutConstraint:0x6000039e85a0 UILabel:0x7fd89d760670'Label 0'.leading == UILayoutGuide:0x600002317480'UIViewLayoutMarginsGuide'.leading   (active)>",
    "<NSLayoutConstraint:0x6000039e85f0 UILabel:0x7fd89d760670'Label 0'.trailing == UILayoutGuide:0x600002317480'UIViewLayoutMarginsGuide'.trailing   (active)>",
    "<NSLayoutConstraint:0x6000039ecaa0 UIStackView:0x7fd89d45c2f0.width == AloeStackView.AloeStackView:0x7fd89d82ac00.width   (active)>",
    "<NSLayoutConstraint:0x600003a1c370 'UISV-canvas-connection' UIStackView:0x7fd89d45c2f0.leading == AloeStackView.StackViewCell:0x7fd89d76e1b0.leading   (active)>",
    "<NSLayoutConstraint:0x600003a1c3c0 'UISV-canvas-connection' H:[AloeStackView.StackViewCell:0x7fd89d76e1b0]-(0)-|   (active, names: '|':UIStackView:0x7fd89d45c2f0 )>",
    "<NSLayoutConstraint:0x6000039e8410 'UIView-leftMargin-guide-constraint' H:|-(15)-[UILayoutGuide:0x600002317480'UIViewLayoutMarginsGuide'](LTR)   (active, names: '|':AloeStackView.StackViewCell:0x7fd89d76e1b0 )>",
    "<NSLayoutConstraint:0x6000039e84b0 'UIView-rightMargin-guide-constraint' H:[UILayoutGuide:0x600002317480'UIViewLayoutMarginsGuide']-(15)-|(LTR)   (active, names: '|':AloeStackView.StackViewCell:0x7fd89d76e1b0 )>"
)

As I said, my UI is working but I'm worried about those errors.

How should one setup autolayout for an AloeStackView used as a subview?

Thanks a lot!
Ladislas

[florianldt]

Hmm first guess:

• when you try to use AloeStackView outside of the AloeStackViewController, it's important to know that the UIStackView embedded in the AloeStackView is "Auto-Layout ready", with mean stackView.translatesAutoresizingMaskIntoConstraints = false. However, the AloeStackView, which is a UIScrollView, is not "Auto-Layout ready".
  In your implementation, try to add the line yourAloeStackView.translatesAutoresizingMaskIntoConstraints = false.

Tell me if this is enough.

[florianldt]

Here is a quick example to illustrate what I wanted to say:

import UIKit
import AloeStackView

class ViewController: UIViewController {

    let customView0: CustomView = {
        let view = CustomView()
        view.translatesAutoresizingMaskIntoConstraints = false
        view.label.text = "View0"
        view.backgroundColor = UIColor.red
        return view
    }()
    
    let customView1: CustomView = {
        let view = CustomView()
        view.translatesAutoresizingMaskIntoConstraints = false
        view.label.text = "View1"
        view.backgroundColor = UIColor.cyan
        return view
    }()
    
    let aloeStackView = AloeStackView()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = UIColor.white
        view.addSubview(customView0)
        view.addSubview(customView1)
        view.addSubview(aloeStackView)
        
        NSLayoutConstraint.activate([
            customView0.topAnchor.constraint(equalTo: self.view.topAnchor, constant: 0),
            customView0.leftAnchor.constraint(equalTo: self.view.leftAnchor, constant: 0),
            customView0.rightAnchor.constraint(equalTo: self.view.rightAnchor, constant: 0),
            customView0.heightAnchor.constraint(equalToConstant: 200)
        ])
        
        NSLayoutConstraint.activate([
            customView1.topAnchor.constraint(equalTo: self.customView0.bottomAnchor, constant: 0),
            customView1.leftAnchor.constraint(equalTo: self.view.leftAnchor, constant: 0),
            customView1.rightAnchor.constraint(equalTo: self.view.rightAnchor, constant: 0),
            customView1.heightAnchor.constraint(equalToConstant: 300)
        ])
        
        // This line enables the Auto-Layout mode for the AloeStackView
        aloeStackView.translatesAutoresizingMaskIntoConstraints = false

        NSLayoutConstraint.activate([
            aloeStackView.topAnchor.constraint(equalTo: self.customView1.bottomAnchor, constant: 0),
            aloeStackView.leftAnchor.constraint(equalTo: self.view.leftAnchor, constant: 0),
            aloeStackView.rightAnchor.constraint(equalTo: self.view.rightAnchor, constant: 0),
            aloeStackView.bottomAnchor.constraint(equalTo: self.view.bottomAnchor, constant: 0)
        ])
        
        
        aloeStackView.rowInset = .zero
        setupViews()
        
    }
    
    private func setupViews() {
        let view100 = CustomView()
        view100.label.text = "100"
        view100.backgroundColor = UIColor.red
        view100.heightAnchor.constraint(equalToConstant: 100).isActive = true

        aloeStackView.addRow(view100)


        let view200 = CustomView()
        view200.backgroundColor = UIColor.green
        view200.heightAnchor.constraint(equalToConstant: 200).isActive = true
        view200.label.text = "200"
        aloeStackView.addRow(view200)
        
        let view300 = CustomView()
        view300.backgroundColor = UIColor.purple
        view300.heightAnchor.constraint(equalToConstant: 300).isActive = true
        view300.label.text = "300"
        aloeStackView.addRow(view300)

    }
}

class CustomView: UIView {
    
    let label: UILabel = {
        let label = UILabel()
        label.translatesAutoresizingMaskIntoConstraints = false
        label.font = UIFont.boldSystemFont(ofSize: 20)
        return label
    }()
    
    override init(frame: CGRect) {
        super.init(frame: .zero)
        
        self.addSubview(label)
        
        label.centerXAnchor.constraint(equalTo: self.centerXAnchor).isActive = true
        label.centerYAnchor.constraint(equalTo: self.centerYAnchor).isActive = true
                
    }
    
    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
}

This should work as expected without any warning in the console.

[ladislas]

Thanks so much for the quick answer!

By looking at your example I've found what I was doing wrong: I was setting up the constraints in viewDidLayoutSubviews instead of viewDidLoad.

Everything is fine now, thanks again! :)