Swift - Set the height of the item as same as parent in nested UIStackView programmingly

Question

I have a UI with 3 main parts: header, keypad and a button.

Size of header and button are fixed, the remaining area should be occupied by keypad.

Like this:

The keypad part is build up by a nested UIStackView (vertical UIStackView parent, with 4 horizontal UIStackView children), 3 buttons will be added to each of the horizontal UIStackView.

Everything is fine except I would like the buttons to have the same height as the horizontal UIStackView, so that it should be easier for user to click on it.

I have tried

rowStackView.alignment = .fill

or

for button in numberButtons
{
    button.translatesAutoresizingMaskIntoConstraints = false
    button.heightAnchor.constraint(equalTo: button.superview!.heightAnchor).isActive = true
}

However, the numberPadStackView will be squeezed like following. How should I fix that? Thanks.

These are my codes for now:

headerStackView.axis = .vertical
headerStackView.alignment = .center
headerStackView.setContentHuggingPriority(.defaultHigh, for: .vertical)
headerStackView.setContentCompressionResistancePriority(.defaultHigh, for: .vertical)
view.addSubview(headerStackView)

numberPadStackView.axis = .vertical
numberPadStackView.distribution = .fillEqually
numberPadStackView.alignment = .center
view.addSubview(numberPadStackView)

initNumpad()

view.addSubview(requestLabel)

initNumPad()

private func initNumpad()
{
    var rowStackView = UIStackView()
    
    numberButtons.removeAll()

    for i in 0 ..< 11
    {
        if i % 3 == 0
        {
            rowStackView = UIStackView()
            rowStackView.axis = .horizontal
            rowStackView.distribution = .fillEqually
            rowStackView.alignment = .center
            rowStackView.setContentHuggingPriority(.defaultLow, for: .vertical)
            numberPadRowStackView.append(rowStackView)
            numberPadStackView.addArrangedSubview(rowStackView)
        }

        let button = UIButton()
        
        switch i
        {
        case 0 ..< 9:
            button.setTitle("\(i + 1)", for: .normal)
        case 9:
            button.setTitle(".", for: .normal)
        case 10:
            button.setTitle("0", for: .normal)
        default:
            return
        }
        button.titleLabel?.textAlignment = .center
        button.setContentHuggingPriority(.defaultLow, for: .vertical)
        button.backgroundColor = UIColor.random()
        numberButtons.append(button)
        
        rowStackView.addArrangedSubview(button)
    }
    
    numberPadDeleteImageView.backgroundColor = UIColor.random()
    rowStackView.addArrangedSubview(numberPadDeleteImageView)
}

Layout

headerStackView.translatesAutoresizingMaskIntoConstraints = false 
numberPadStackView.translatesAutoresizingMaskIntoConstraints = false
requestLabel.translatesAutoresizingMaskIntoConstraints = false

NSLayoutConstraint.activate([
    headerStackView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 24),
    headerStackView.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: Padding),
    headerStackView.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -Padding),
        
    numberPadStackView.topAnchor.constraint(equalTo: headerStackView.bottomAnchor, constant: 43),
    numberPadStackView.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: Padding),
    numberPadStackView.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -Padding),
        
    requestLabel.topAnchor.constraint(equalTo: numberPadStackView.bottomAnchor, constant: 21),
    requestLabel.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 28),
    requestLabel.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -28),
    requestLabel.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor, constant: -5),
    requestLabel.heightAnchor.constraint(equalToConstant: 40),    
])
    
for rowStackView in numberPadRowStackView
{
    rowStackView.translatesAutoresizingMaskIntoConstraints = false
    rowStackView.widthAnchor.constraint(equalTo: numberPadStackView.widthAnchor).isActive = true
}

Answer 1

Couple notes...

Setting Content Hugging Priority on a UIStackView is generally not going to give you the expected results. That's because the stack view is arranging its subviews (based on the stack view's Alignment and Distribution properties). The Content Hugging Priority of the stack view's arranged subviews will be the controlling factor.

As is obvious, if I lay out 4 labels, vertically constrained top-to-bottom, each having the same Content Hugging priority (such as the default 250), I'll get something like this in Storyboard (note the Red layout-problem indicator):

and at runtime it may look like this:

Auto-layout is going to respect the (intrinsic) Height for Labels 1, 2 and 4, and then stretch Label 3 to complete the layout.

If I embed the top two and bottom two labels each in vertical stack views...

Storyboard will look like this (again, note the Red layout-problem indicator):

and we get the same thing at run-time:

Even if I set the Content Hugging Priority of the top stack view to 1000, it won't make a difference -- because auto-layout is using the arranged subviews to decide what to do.

So, for your layout, divide your screen into *three layout elements:

• the "header" section
• the "numberPad" section
• the "process" section

and then tell auto-layout you want the Header and Process elements to maintain their heights, and allow the numberPad to stretch.

Since UI elements default to Hugging Priority of 250, probably the easiest way to manage that is reduce the Hugging Priority of the numberPad buttons.

Here is some example code. I'm not sure how you're laying out your "headerStackView" as it doesn't really look like it would lend itself to a stack view... so, I laid it out as a header UIView:

class WithNumpadViewController: UIViewController {
    
    // three "parts" to our layout
    let headerView = UIView()
    let numberPadStackView = UIStackView()
    let requestLabel = UILabel()
    
    // data labels to be filled-in
    let currencyLabel = UILabel()
    let currValueLabel = UILabel()
    let balanceLabel = UILabel()
    
    // however you're using this
    var numberButtons: [UIButton] = []
    
    let Padding: CGFloat = 16
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        if let vc = self.navigationController?.viewControllers.first {
            vc.navigationItem.title = "Wallet"
        }
        
        self.navigationController?.navigationBar.barTintColor = .black
        self.navigationController?.navigationBar.tintColor = .white
        self.navigationController?.navigationBar.isTranslucent = false
        self.navigationController?.navigationBar.titleTextAttributes = [NSAttributedString.Key.foregroundColor: UIColor.white]
        
        title = "Withdraw"
        
        // add "three parts" to view
        [headerView, numberPadStackView, requestLabel].forEach {
            $0.translatesAutoresizingMaskIntoConstraints = false
            view.addSubview($0)
        }
        
        let g = view.safeAreaLayoutGuide
        
        NSLayoutConstraint.activate([
            
            // constrain headerView to Top / Leading / Trailing (safe-area)
            //  let its content determine its height
            headerView.topAnchor.constraint(equalTo: g.topAnchor, constant: 0.0),
            headerView.leadingAnchor.constraint(equalTo: g.leadingAnchor, constant: 0.0),
            headerView.trailingAnchor.constraint(equalTo: g.trailingAnchor, constant: 0.0),
            
            // constrain numberPad 40-pts from Bottom headerView
            numberPadStackView.topAnchor.constraint(equalTo: headerView.bottomAnchor, constant: 40),
            //  Leading / Trailing with Padding
            numberPadStackView.leadingAnchor.constraint(equalTo: g.leadingAnchor, constant: Padding),
            numberPadStackView.trailingAnchor.constraint(equalTo: g.trailingAnchor, constant: -Padding),
            
            // constrain requestLabel 21-pts from Bottom of numberPad
            requestLabel.topAnchor.constraint(equalTo: numberPadStackView.bottomAnchor, constant: 21),
            //  Leading / Trailing with 28-pts padding
            requestLabel.leadingAnchor.constraint(equalTo: g.leadingAnchor, constant: 28),
            requestLabel.trailingAnchor.constraint(equalTo: g.trailingAnchor, constant: -28),
            // Bottom 5-pts from Bottom (safe-area)
            requestLabel.bottomAnchor.constraint(equalTo: g.bottomAnchor, constant: -5),
            // explicit Height of 40-pts
            requestLabel.heightAnchor.constraint(equalToConstant: 40),
        ])
        
        // setup contents of headerView
        initHeader()
        
        // setup contents of numberPad
        initNumpad()
        
        // properties for requestLabel
        requestLabel.backgroundColor = .black
        requestLabel.textColor = .white
        requestLabel.textAlignment = .center
        requestLabel.text = "Process"
        
        // fill-in data labels
        currencyLabel.text = "HKD"
        currValueLabel.text = "0"
        balanceLabel.text = "Balance: HKD 2 (Available)"
        
        // maybe add number pad button actions here?
        numberButtons.forEach { b in
            b.addTarget(self, action: #selector(self.numberPadButtonTapped(_:)), for: .touchUpInside)
        }
    }
    
    @objc func numberPadButtonTapped(_ btn: UIButton) -> Void {
        let t = btn.currentTitle ?? "Delete"
        print("Tapped:", t)
        // do what you want based on which button was tapped
    }
    
    private func initHeader()
    {
        // not clear how you're setting up your "header"
        // so I'll guess at it
        
        // view properties
        headerView.backgroundColor = .black
        headerView.clipsToBounds = true
        headerView.layer.cornerRadius = 24
        headerView.layer.maskedCorners = [.layerMinXMaxYCorner, .layerMaxXMaxYCorner]
        
        // static text label
        let transferToLabel = UILabel()
        transferToLabel.text = "Transfer to..."
        transferToLabel.font = UIFont.systemFont(ofSize: 14.0, weight: .regular)
        
        // PayPal button
        let payPalButton = UIButton()
        payPalButton.setTitle("PayPal", for: [])
        payPalButton.backgroundColor = .white
        payPalButton.setTitleColor(.blue, for: [])
        
        // data label fonts
        currencyLabel.font = UIFont.systemFont(ofSize: 28.0, weight: .bold)
        currValueLabel.font = currencyLabel.font
        balanceLabel.font = UIFont.systemFont(ofSize: 11.0, weight: .regular)

        // label text color
        [transferToLabel, currencyLabel, currValueLabel, balanceLabel].forEach {
            $0.textColor = .white
        }
        
        // horizontal stack to hold currencyLabel, currValueLabel
        let currValStack = UIStackView()
        currValStack.axis = .horizontal
        currValStack.spacing = 12
        
        // vertical stack to hold currValStack, balanceLabel
        let innerVStack = UIStackView()
        innerVStack.axis = .vertical
        innerVStack.alignment = .center
        innerVStack.spacing = 2
        
        // add labels to Horizontal stack
        currValStack.addArrangedSubview(currencyLabel)
        currValStack.addArrangedSubview(currValueLabel)

        // add horizontal stack and balanceLabel to vertical stack
        innerVStack.addArrangedSubview(currValStack)
        innerVStack.addArrangedSubview(balanceLabel)
        
        // view to hold vertical stack (so we can center it vertically)
        let innerView = UIView()
        
        // add vertical stack to innerView
        innerView.addSubview(innerVStack)
        
        // add elements to headerView
        headerView.addSubview(transferToLabel)
        headerView.addSubview(payPalButton)
        headerView.addSubview(innerView)
        
        // we'll be applying constraints
        [headerView, transferToLabel, payPalButton, currencyLabel, currValueLabel, balanceLabel,
         innerView, innerVStack].forEach {
            $0.translatesAutoresizingMaskIntoConstraints = false
        }
        
        NSLayoutConstraint.activate([
            
            // "Transfer to..." label Top: Padding, leading: Padding
            transferToLabel.topAnchor.constraint(equalTo: headerView.topAnchor, constant: Padding),
            transferToLabel.leadingAnchor.constraint(equalTo: headerView.leadingAnchor, constant: Padding),

            // payPal button Top: Padding to transfer label Bottom
            // Leading / Trailing to Leading / Trailing with Padding
            payPalButton.topAnchor.constraint(equalTo: transferToLabel.bottomAnchor, constant: Padding),
            payPalButton.leadingAnchor.constraint(equalTo: headerView.leadingAnchor, constant: Padding),
            payPalButton.trailingAnchor.constraint(equalTo: headerView.trailingAnchor, constant: -Padding),

            // payPalButton explicit height
            payPalButton.heightAnchor.constraint(equalToConstant: 50.0),
            
            // innerView Top: 0 to payPal button Bottom
            // Leading / Trailing to Leading / Trailing with Padding
            // Bottom: 0
            innerView.topAnchor.constraint(equalTo: payPalButton.bottomAnchor, constant: 0.0),
            innerView.leadingAnchor.constraint(equalTo: headerView.leadingAnchor, constant: Padding),
            innerView.trailingAnchor.constraint(equalTo: headerView.trailingAnchor, constant: -Padding),
            innerView.bottomAnchor.constraint(equalTo: headerView.bottomAnchor, constant: 0.0),
            
            // innerVStack Top / Bottom to innerView Top / Bottom with 24-pts padding
            // centerX
            innerVStack.topAnchor.constraint(equalTo: innerView.topAnchor, constant: 32.0),
            innerVStack.bottomAnchor.constraint(equalTo: innerView.bottomAnchor, constant: -32.0),
            innerVStack.centerXAnchor.constraint(equalTo: innerView.centerXAnchor, constant: 0.0),

        ])

    }
    

    private func initNumpad()
    {
        
        numberButtons.removeAll()

        // numberPad stack properties
        numberPadStackView.axis = .vertical
        numberPadStackView.alignment = .fill
        numberPadStackView.distribution = .fillEqually
        numberPadStackView.spacing = 4

        // a little more logical way to manage button layout
        let buttonLabels: [[String]] = [
            ["1", "2", "3"],
            ["4", "5", "6"],
            ["7", "8", "9"],
            [".", "0", "<"],
        ]

        // adjust as desired
        let btnFontSize: CGFloat = 28
        
        buttonLabels.forEach { thisRowLabels in
            // create a "row" stack view
            let rowStack = UIStackView()
            rowStack.axis = .horizontal
            rowStack.alignment = .fill
            rowStack.distribution = .fillEqually
            // same horizontal spacing as "number pad" stack's vertical spacing
            rowStack.spacing = numberPadStackView.spacing
            
            // for each number string
            thisRowLabels.forEach { s in
                // create button
                let btn = UIButton()
                
                if s == "<" {
                    // if it's the "delete button"
                    // set image here
                    let iconCfg = UIImage.SymbolConfiguration(pointSize: btnFontSize, weight: .bold, scale: .large)
                    if let normIcon = UIImage(systemName: "delete.left", withConfiguration: iconCfg)?.withTintColor(.black, renderingMode: .alwaysOriginal),
                        let highIcon = UIImage(systemName: "delete.left", withConfiguration: iconCfg)?.withTintColor(.lightGray, renderingMode: .alwaysOriginal)
                    {
                        btn.setImage(normIcon, for: .normal)
                        btn.setImage(highIcon, for: .highlighted)
                    }
                } else {
                    // set number pad button title
                    btn.setTitle(s, for: [])
                }
                
                // number pad button properties
                btn.backgroundColor = UIColor(white: 0.95, alpha: 1.0)
                btn.setTitleColor(.black, for: .normal)
                btn.setTitleColor(.lightGray, for: .highlighted)
                btn.titleLabel?.font = UIFont.systemFont(ofSize: btnFontSize, weight: .bold)
                
                // let's give 'em a rounded-corner border
                btn.layer.borderColor = UIColor.blue.cgColor
                btn.layer.borderWidth = 1
                btn.layer.cornerRadius = 8
                
                // allow buttons to stretch vertically!!!
                btn.setContentHuggingPriority(UILayoutPriority(rawValue: 249), for: .vertical)
                
                // add button to this row stack
                rowStack.addArrangedSubview(btn)
                
                // add button to numberButtons array
                numberButtons.append(btn)
            }
            // add this rowStack to the number pad stack
            numberPadStackView.addArrangedSubview(rowStack)
        }
        
    }
}

The result, on iPhone 8:

iPhone 11:

and iPhone 11 Pro Max: