Home > database >  How to dynamically change UIStackView height based on content size?
How to dynamically change UIStackView height based on content size?

Time:01-08

I have a view below that I'm trying to dynamically change the height of based on the heights of the subviews in the content view. Currently, I'm setting the scrollView and contentView's contentSize with a static height of "screenHeight 1000". What steps can I take to dynamically update the height property?

enter image description here

import Foundation
import UIKit
import TinyConstraints 

class ViewController: UIViewController {

    // MARK: - PROPERTIES
    let screenWidth = UIScreen.main.bounds.width
    let screenHeight = UIScreen.main.bounds.height
    var contentViewSize = CGSize(width: screenWidth, height: screenHeight   1000)
    
    // MARK: - VIEW METHODS
    override func viewDidLoad() {
        super.viewDidLoad()
        
        addSubviews()
        constrainSubviews()
    }

    // MARK: - VIEW OBJECTS
    lazy var scrollView: UIScrollView = {
        let scrollView = UIScrollView(frame: .zero)
        scrollView.frame = view.bounds
        scrollView.contentSize = contentViewSize
        scrollView.autoresizingMask = .flexibleHeight
        scrollView.showsHorizontalScrollIndicator = true
        scrollView.bounces = true
        
        return scrollView
    }()
    
    lazy var contentView: UIView = {
        let contentView = UIView()
        contentView.frame.size = contentViewSize
        
        return contentView
    }()

    lazy var topView: UIStackView = { ... }()
    lazy var nutritionView: UIStackView = { ... }()
    lazy var ingredientsView: UIStackView = { ... }()
    lazy var instructionsView: UIStackView = { ... }()

    fileprivate func addSubviews() {
        view.addSubview(scrollView)
        scrollView.addSubview(contentView)
        
        contentView.addSubview(topView)
        contentView.addSubview(nutritionView)
        contentView.addSubview(ingredientsView)
        contentView.addSubview(instructionsView)
    }
    
    fileprivate func constrainSubviews() {
        let stack = [topView, nutritionView, ingredientsView, instructionsView]
        contentView.stack(stack, spacing: screenHeight * 0.03)
        contentView.centerXToSuperview()
        contentView.topToSuperview(offset: screenHeight * 0.04)
        contentView.width(screenWidth * 0.8)
    }
}

CodePudding user response:

You should add a scroll view and inside that add and stackview, and inside the stack view add the views, and the scroll view will increase dynamically, like this code.



 class ViewController: UIViewController {

    let scrollView = UIScrollView()
    lazy var contentStackView = UIStackView(arrangedSubviews: [getView(height: 500, color: .red),
                                                               getView(height: 600, color: .blue),
                                                               getView(height: 70, color: .gray),
                                                               getView(height: 80,color: .yellow)])
    override func viewDidLoad() {
        super.viewDidLoad()

        // Do any additional setup after loading the view.
        self.view.backgroundColor = .white
        
        contentStackView.axis = .vertical
        setupConstraints()
    }
    
    func setupConstraints() {
        self.view.addSubview(scrollView)
        self.scrollView.addSubview(contentStackView)
        scrollView.translatesAutoresizingMaskIntoConstraints = false
        contentStackView.translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.activate([
            scrollView.topAnchor.constraint(equalTo: self.view.topAnchor),
            scrollView.leadingAnchor.constraint(equalTo: self.view.leadingAnchor),
            scrollView.trailingAnchor.constraint(equalTo: self.view.trailingAnchor),
            scrollView.bottomAnchor.constraint(equalTo: self.view.bottomAnchor),
            contentStackView.topAnchor.constraint(equalTo: self.scrollView.topAnchor),
            contentStackView.leadingAnchor.constraint(equalTo: self.scrollView.leadingAnchor),
            contentStackView.trailingAnchor.constraint(equalTo: self.scrollView.trailingAnchor),
            contentStackView.bottomAnchor.constraint(equalTo: self.scrollView.bottomAnchor),
            contentStackView.widthAnchor.constraint(equalTo: self.scrollView.widthAnchor)
        ])
    
    }

    
    func getView(height: Double, color: UIColor) -> UIView {
        let view = UIView()
        view.backgroundColor = color
        view.translatesAutoresizingMaskIntoConstraints = false
        view.heightAnchor.constraint(equalToConstant: height).isActive = true
        return view
    }


}

  •  Tags:  
  • Related