Question Details

No question body available.

Tags

ios swift uikit

Answers (1)

May 29, 2025 Score: 1 Rep: 78,681 Quality: Medium Completeness: 80%

While setting stackView.distribution = .fillProportionally will give you your desired results, it is probably not the appropriate way to do this.

When 2 or more buttons using the same or almost the same .configuration settings are in a UIStackView, they behave as if stackView.distribution = .fillEqually.

Another approach to get the buttons to behave like other views (labels, "old-style" buttons, etc), is to set configuration.titleLineBreakMode = .byTruncatingTail.

So, use the default distribution (.fill) on your stack view, and add that line to each of your buttons. You may also want to use titleTextAttributesTransformer to set the buttons' custom font:

private lazy var durationButton: UIButton = {
    let button = UIButton()
    var configuration = UIButton.Configuration.plain()
    configuration.title = "AAA"
    configuration.image = UIImage(systemName: "chevron.down")
    configuration.imagePadding = 8
    configuration.baseForegroundColor = .white
    configuration.contentInsets = NSDirectionalEdgeInsets(top: 20, leading: 20, bottom: 20, trailing: 20)

configuration.titleLineBreakMode = .byTruncatingTail

configuration.titleTextAttributesTransformer = UIConfigurationTextAttributesTransformer { incoming in var updated = incoming if let f = UIFont(name: "Inter28pt-Bold", size: 18) { updated.font = f } else { updated.font = UIFont.systemFont(ofSize: 18, weight: .regular) } return updated }

button.configuration = configuration button.translatesAutoresizingMaskIntoConstraints = false button.backgroundColor = .black button.layer.cornerRadius = 26 button.clipsToBounds = true return button }()

private lazy var locationButton: UIButton = { let button = UIButton() var configuration = UIButton.Configuration.plain() configuration.title = "BBBBBBBBBBB" configuration.image = UIImage(systemName: "arrow.right") configuration.imagePadding = 8 configuration.baseForegroundColor = .white configuration.contentInsets = NSDirectionalEdgeInsets(top: 20, leading: 20, bottom: 20, trailing: 20)

configuration.titleLineBreakMode = .byTruncatingTail

configuration.titleTextAttributesTransformer = UIConfigurationTextAttributesTransformer { incoming in var updated = incoming if let f = UIFont(name: "Inter28pt-Bold", size: 18) { updated.font = f } else { updated.font = UIFont.systemFont(ofSize: 18, weight: .regular) } return updated }

button.configuration = configuration button.translatesAutoresizingMaskIntoConstraints = false button.backgroundColor = .black button.layer.cornerRadius = 26 button.clipsToBounds = true return button }()

private lazy var actionButtonsStack: UIStackView = { let stackView = UIStackView(arrangedSubviews: [durationButton, locationButton]) stackView.axis = .horizontal stackView.spacing = 10 stackView.alignment = .center stackView.translatesAutoresizingMaskIntoConstraints = false // don't set distribution ... leave it at the default .fill return stackView }()

Now, using this example viewDidLoad() we get the expected output:

output