StackView with two labels doesn't wrap content

Question

I have one StackView with two labels inside. I want to place the two labels one next to the other.

private lazy var stackView: UIStackView = {
        let stackView = UIStackView()
        stackView.translatesAutoresizingMaskIntoConstraints = false
        stackView.alignment = .center
        stackView.axis = .horizontal
        stackView.backgroundColor = .black
        stackView.spacing = 10
        return stackView
    }()
    
    // MARK: Labels
    
    private lazy var firstLabel: UILabel = {
        let label = UILabel()
        label.translatesAutoresizingMaskIntoConstraints = false
        label.numberOfLines = 0
        label.textColor = UIColor.brandColor(.white)
        label.textAlignment = .right
        label.font = UIFont.bloomSpeakFont(.titleUltraHeavy, ofSize: 8.0)
        return label
    }()

    private lazy var secondLabel: UILabel = {
        let label = UILabel()
        label.translatesAutoresizingMaskIntoConstraints = false
        label.numberOfLines = 0
        label.textColor = UIColor.brandColor(.white)
        label.textAlignment = .right
        label.font = UIFont.bloomSpeakFont(.bodyExtraBold, ofSize: 10.0)
        return label
    }()
    
    // MARK: - Setup
    
    private func setupStackView() {
        stackView.addArrangedSubview(firstLabel)
        //firstLabel.widthAnchor.constraint(equalToConstant: 100).isActive = true
        //firstLabel.heightAnchor.constraint(equalToConstant: 100).isActive = true
        //firstLabel.setContentHuggingPriority(UILayoutPriority.defaultLow, for: .horizontal)
        stackView.addArrangedSubview(secondLabel)
        //secondLabel.widthAnchor.constraint(equalToConstant: 100).isActive = true
        //secondLabel.heightAnchor.constraint(equalToConstant: 100).isActive = true
        //secondLabel.setContentHuggingPriority(UILayoutPriority.defaultHigh, for: .horizontal)
        
        addSubview(stackView)
        stackView.rightAnchor.constraint(equalTo: rightAnchor).isActive = true
        stackView.centerYAnchor.constraint(equalTo: centerYAnchor).isActive = true
    }

My problem is:

What I want:

The label next to the number and also some padding some padding with the margins.

Thanks in advance.

EDIT

After set spacing to 0, numberOfLines to 1, stackView.alignment = .fill I got the result bellow. I just wonder how to add padding to the labels?

You have added ` stackView.spacing = 10` how do you expect arranged subview to appear next to each other? They will leave 10px gap for sure, if you dont want that set it to 0 or just dont set the property at all — Sandeep Bhandari, Mar 25 '21 at 18:34
The main problem is likely in what you haven't shown us. Your code shows `equalTo: rightAnchor`, which indicates your stack view is a subview of a custom view ... so the code you've shown (by itself) cannot produce the image you posted. And, although these things are not affecting your horizontal spacing, you also want: `stackView.alignment = .fill` (not `.center`)... your labels should have `.numberOfLines = 1` (not `0`)... and `.textAlignment = .right` doesn't matter since the labels will size to their text. — DonMag, Mar 25 '21 at 21:19
@SandeepBhandari, DonMag, I have edited my answer seems to work now. I just need to padding the two labels. Any suggestion? Thanks for your answers tho. — Gabriel Muñumel, Mar 26 '21 at 05:50
@GabrielMuñumel seems like its working fine now, looks like `stackView.alignment = .fill` and `.numberOfLines = 1` did the trick already, You dont see spacing between two labels because you set padding to 0 (I asked you to set it in my first comment I know) just change it to appropriate value and you should be good to go — Sandeep Bhandari, Mar 26 '21 at 05:55
But `UILabel ` does not have a `padding` attribute or method. I could use this class to implemented it: https://johncodeos.com/how-to-add-padding-in-uilabel-in-ios-using-swift/ — Gabriel Muñumel, Mar 26 '21 at 06:01

score 2 · Accepted Answer · answered Mar 26 '21 at 06:26

Thanks to the comments of @SandeepBhandari and @DonMag i could solved my issue:

The final solution was:

private lazy var stackView: UIStackView = {
        let stackView = UIStackView()
        stackView.translatesAutoresizingMaskIntoConstraints = false
        stackView.alignment = .fill // << changed from .center to .fill
        stackView.axis = .horizontal
        stackView.backgroundColor = .black
        //stackView.spacing = 10  << removed line       
        return stackView
    }()
    
    // MARK: Labels
    
    private lazy var firstLabel: PaddingLabel = {
        let label = PaddingLabel()
        label.translatesAutoresizingMaskIntoConstraints = false
        label.numberOfLines = 1 // << changed from 0 to 1
        label.textColor = UIColor.brandColor(.white)
        label.textAlignment = .right
        label.font = UIFont.bloomSpeakFont(.titleUltraHeavy, ofSize: 8.0)
        return label
    }()

    private lazy var secondLabel: PaddingLabel = {
        let label = PaddingLabel()
        label.translatesAutoresizingMaskIntoConstraints = false
        label.numberOfLines = 1
        label.textColor = UIColor.brandColor(.white)
        label.textAlignment = .right
        label.font = UIFont.bloomSpeakFont(.bodyExtraBold, ofSize: 10.0)
        return label
    }()
    
    // MARK: - Setup
    
    private func setupStackView() {
        stackView.addArrangedSubview(firstLabel)
        stackView.addArrangedSubview(secondLabel)
        firstLabel.paddingLeft = 2
        firstLabel.paddingRight = 1
        secondLabel.paddingLeft = 1
        secondLabel.paddingRight = 2
        
        addSubview(stackView)
        stackView.rightAnchor.constraint(equalTo: rightAnchor).isActive = true
        stackView.centerYAnchor.constraint(equalTo: centerYAnchor).isActive = true
    }

I also use this guide https://johncodeos.com/how-to-add-padding-in-uilabel-in-ios-using-swift/, to add padding to the labels.

The final result is:

StackView with two labels doesn't wrap content

1 Answers1