Home > other >  UIStackView : broken constraints for internal subviews
UIStackView : broken constraints for internal subviews

Time:12-20

I have a UIStackView inside a UIScrollView and a simple view inside as follows :

class OnboardingView : UIView {
    private let onboardingImageView : UIImageView = {
        let view = UIImageView()
        view.translatesAutoresizingMaskIntoConstraints = false
        view.contentMode = .scaleAspectFit
        view.layer.cornerRadius = 8
        view.image = UIImage(named: "OnboardingImage")
        return view
    }()

    private lazy var scrollView: UIScrollView = {
        let view = UIScrollView()
        view.translatesAutoresizingMaskIntoConstraints = false
        view.showsVerticalScrollIndicator = false
        view.showsHorizontalScrollIndicator = false
        return view
    }()
       
    private lazy var scrollViewContainer: UIStackView = {
        let view = UIStackView()
        view.axis = .vertical
        view.spacing = 0
        view.distribution = .fillProportionally
        view.translatesAutoresizingMaskIntoConstraints = false
        return view
    }()
    
    private let imageArea : UIView = {
       let view = UIView()
       view.translatesAutoresizingMaskIntoConstraints = false
       return view
    }()
    
    private func setupScrollView()
    {
        let constraints = [
            scrollView.leadingAnchor.constraint(equalTo: self.safeAreaLayoutGuide.leadingAnchor),
            scrollView.trailingAnchor.constraint(equalTo: self.safeAreaLayoutGuide.trailingAnchor),
            scrollView.topAnchor.constraint(equalTo: self.safeAreaLayoutGuide.topAnchor),
            scrollView.bottomAnchor.constraint(equalTo: self.safeAreaLayoutGuide.bottomAnchor),

            scrollViewContainer.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor),
            scrollViewContainer.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor),
            scrollViewContainer.topAnchor.constraint(equalTo: scrollView.topAnchor),
            scrollViewContainer.bottomAnchor.constraint(equalTo: scrollView.bottomAnchor),
            scrollViewContainer.widthAnchor.constraint(equalTo: scrollView.widthAnchor),
        ]
        
        NSLayoutConstraint.activate(constraints)
    }
    
    private func setupAreas()
    {
        let constraints = [
            imageArea.heightAnchor.constraint(equalToConstant: 400)
        ]
        
        NSLayoutConstraint.activate(constraints)
    }
    
    private func setupImage()
    {
        imageArea.addSubview(onboardingImageView)
        let constraints = [
            onboardingImageView.topAnchor.constraint(equalTo: imageArea.topAnchor, constant: 62),
            onboardingImageView.heightAnchor.constraint(equalToConstant: 334),
            onboardingImageView.leadingAnchor.constraint(equalTo: imageArea.leadingAnchor, constant: 35.5),
            onboardingImageView.trailingAnchor.constraint(equalTo: imageArea.trailingAnchor, constant : -35),
        ]
        
        NSLayoutConstraint.activate(constraints)
    }
            
    private func setupLayout()
    {
        self.addSubview(scrollView)
        scrollView.addSubview(scrollViewContainer)
        
        scrollViewContainer.addArrangedSubview(imageArea)
        
        setupScrollView()
        
        setupAreas()
        
        setupImage()
    }
        
    private func setupViews()
    {
        self.layer.backgroundColor = UIColor(red : 0.125, green: 0.306, blue: 0.78, alpha: 1).cgColor
                
        setupLayout()
    }
    
    init(viewFrame : CGRect) {
        super.init(frame: viewFrame)
        setupViews()
    }
     
    required init?(coder: NSCoder) {
         fatalError("init(coder:) has not been implemented for OnboardingView")
    }
}

If I put some constraints for a nested view I get a constraint error prompt in console :

(
    "<NSLayoutConstraint:0x600003efa440 H:|-(35.5)-[UIImageView:0x15110c090]   (active, names: '|':UIView:0x14fd086d0 )>",
    "<NSLayoutConstraint:0x600003efa490 UIImageView:0x15110c090.trailing == UIView:0x14fd086d0.trailing - 35   (active)>",
    "<NSLayoutConstraint:0x600003ed6030 'fittingSizeHTarget' UIView:0x14fd086d0.width == 0   (active)>"
)

Will attempt to recover by breaking constraint 
<NSLayoutConstraint:0x600003efa490 UIImageView:0x15110c090.trailing == UIView:0x14fd086d0.trailing - 35   (active)>
 

which I'm not able to sort out. It's not clear for me what could go wrong as I apply constraint to an arrangedView(imageArea) item of UIStackView, so from my perspective it should be fine. What am I missing? And how should I fix it?

CodePudding user response:

Your constrains are fine.

Since your UIStackView uses fillProportionally for its subviews so it reads intrinsicContentSize from subviews.

    // you can override and return non zero value to fix it
    class SubView: UIView {
        override var intrinsicContentSize: CGSize {
            return CGSize(width: 1, height: 1)
        }
    }

    private let imageArea : UIView = {
       let view = SubView()
       return view
    }

    scrollViewContainer.addArrangedSubview(imageArea)

OR

    // Set lower priority witch one is breaking (here 35 or -35 any one)
    private func setupImage() {
        imageArea.addSubview(onboardingImageView)
        let constraints = [
            onboardingImageView.topAnchor.constraint(equalTo: imageArea.topAnchor, constant: 62),
            onboardingImageView.heightAnchor.constraint(equalToConstant: 334),
            onboardingImageView.leadingAnchor.constraint(equalTo: imageArea.leadingAnchor, constant: 35.5),
            onboardingImageView.trailingAnchor.constraint(equalTo: imageArea.trailingAnchor, constant : -35),
        ]
        constraints.last?.priority = .init(990)
        NSLayoutConstraint.activate(constraints)
    }
  • Related