Label doesn't seen in horizontal UIStackview when other elements are too wide

Question

I have a horizontal UIStackView. Which has below elements;

UILabel - UILabel (lets call it second label)

Second label has a adjustsFontSizeToFitWidth = true property and a minimum scale factor. When It has a so long text, It gets shrink to some minimum size. First label has a firstLabel.setContentCompressionResistancePriority(.init(rawValue: 749), for: .horizontal) property to resist second label. Everything is working fine in this case.

This UIStackView is creating programmatically and sometimes It get three more element

UILabel - UIImageView - UIView(dummy) - UIImageView - UILabel

UIImageViews has a specific widthAnchor of 12 constant point. Problem is that: In this case labelWithInfoAndDownArrow, If first UILabel has a long text, second UILabel doesn't shown in the screen. How can I solve it?

  override init(frame: CGRect) {
    super.init(frame: frame)

    self.translatesAutoresizingMaskIntoConstraints = false

    firstLabel.numberOfLines = 1
    firstLabel.font = UIFont.init(name: "Metropolis-Regular", size: 12)
    firstLabel.setContentCompressionResistancePriority(.init(rawValue: 249), for: .horizontal)
    secondLabel.numberOfLines = 1
    secondLabel.textAlignment = .right
    secondLabel.font = UIFont.init(name: "Metropolis-ExtraBold", size: 14)

    secondLabel.adjustsFontSizeToFitWidth = true
    secondLabel.minimumScaleFactor = 10/14

    horizontalStackView.addArrangedSubview(firstLabel)
    horizontalStackView.addArrangedSubview(secondLabel)

    iconImageView.widthAnchor.constraint(equalToConstant: 12).isActive = true
    infoImageView.widthAnchor.constraint(equalToConstant: 15).isActive = true

    addSubview(horizontalStackView)
    horizontalStackView.topAnchor.constraint(equalTo: topAnchor).isActive = true
    horizontalStackView.leftAnchor.constraint(equalTo: leftAnchor).isActive = true
    horizontalStackView.rightAnchor.constraint(equalTo: rightAnchor).isActive = true
    horizontalStackView.bottomAnchor.constraint(equalTo: bottomAnchor).isActive = true

}

convenience init(firstLabelText: String, secondLabelText: String) {
    self.init()
    firstLabel.text = firstLabelText
    secondLabel.text = secondLabelText
    accessibilityIdentifier = firstLabelText
}

convenience init(firstLabelText: String, secondLabelText: String,labelType: LabelType) {
    self.init(firstLabelText: firstLabelText, secondLabelText: secondLabelText)
    self.labelType = labelType

    switch labelType {
    case .labelWithInfoAndDownArrow:
        iconImageView.image = UIImage(named: "droparrow-down-icon-grey")
        horizontalStackView.insertArrangedSubview(infoImageView, at: 1)
        horizontalStackView.insertArrangedSubview(UIView(), at: 2)
        horizontalStackView.insertArrangedSubview(iconImageView, at: 4)
        let tap = UITapGestureRecognizer(target: self, action: #selector(self.handleInfoButtonTap(_:)))
        infoImageView.isUserInteractionEnabled = true
        infoImageView.addGestureRecognizer(tap)
        infoImageView.accessibilityIdentifier = firstLabelText
        if #available(iOS 11.0, *) {
            horizontalStackView.setCustomSpacing(0, after: iconImageView)
            horizontalStackView.setCustomSpacing(0, after: firstLabel)
        } else {
            // Fallback on earlier versions
            horizontalStackView.spacing = 0.0
        }
    case .defaultLabel:
        break
    }

}

EDIT If I make first label compression priority 749. Second case solved but It broke the first case where second label gets smaller font when doesn't fit to the screen.

score 0 · Answer 1 · answered Nov 21 '19 at 20:37

you could try adding:

        firstLabel.widthAnchor.constraint(greaterThanOrEqualToConstant: 120).isActive = true
        secondLabel.widthAnchor.constraint(greaterThanOrEqualToConstant: 120).isActive = true

replace 120 with the minimum size you want for firstLabel and secondLabel.

You can use that in conjunction with your

        firstLabel.setContentCompressionResistancePriority(.init(rawValue: 249), for: .horizontal)

Or without it depending on what result you are expecting...

Let me know how that goes :D

Label doesn't seen in horizontal UIStackview when other elements are too wide

1 Answers1