Gabriel Muñumel
Gabriel Muñumel

Reputation: 1876

StackView with two labels doesn't wrap content

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:

enter image description here

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?

enter image description here

Upvotes: 1

Views: 1370

Answers (1)

Gabriel Muñumel
Gabriel Muñumel

Reputation: 1876

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:

enter image description here

Upvotes: 2

Related Questions