UIStackview align left

Question

I'm trying to align the items in UIStackview horizontally to the left.

Is there anyway to do this programmatically? I tried to do this via storyboard but was not successful. For some reason, the items in the UIStackView centers itself.

Answer 1

Use the UIStackView.alignment property.

Reference: https://developer.apple.com/reference/uikit/uistackview/1616243-alignment

Answer 2

Storyboard

1. Click Attributes Inspector
2. Select Trailing from the Drop Down menu when Alignment is selected.

Programmatically

1. Change the UIStackView.alignment property when initializing.

Answer 3

Thanks for the advice guys. I tried playing with the options on UIStackView.alignment but it never really worked as desired. In the end I messed with the width of the UIStackView to achieve the desired results.

if(prdDTO.getShellIcn() == "Y")
    {
        let icon = UIImageView()
        icon.contentMode = UIViewContentMode.scaleAspectFit
        icon.image = #imageLiteral(resourceName: "Shellfish")
        prdIngredients.addArrangedSubview(icon)
        stackviewWidth += 25
    }

    if(prdDTO.getVegeIcn() == "Y")
    {
        let icon = UIImageView()
        icon.contentMode = UIViewContentMode.scaleAspectFit
        icon.image = #imageLiteral(resourceName: "Vege")
        prdIngredients.addArrangedSubview(icon)
        stackviewWidth += 25
    }

    if(prdDTO.getSpicyIcn() == "Y")
    {
        let icon = UIImageView()
        icon.contentMode = UIViewContentMode.scaleAspectFit
        icon.image = #imageLiteral(resourceName: "Spicy")
        prdIngredients.addArrangedSubview(icon)
        stackviewWidth += 25
    }

    prdIngredients.widthAnchor.constraint(equalToConstant: CGFloat(stackviewWidth))

Answer 4

If you use StackView setting axis property to "Horizontal", I think you can't align it to the left.

But there is a way to make it left visually.

1. set StackView leading constraint with "equal" relationship
2. set StackView trailing constraint with "greater than or equal"

like this

stackView.leadingAnchor.constraint(equalTo: view.leadingAnchor).isActive = true
stackView.trailingAnchor.constraint(greaterThanOrEqualTo: view.trailingAnchor).isActive = true

Answer 5

Try Adding One Space View in Your Stack View , Like this

 // To Make Our Buttons aligned to left We have added one spacer view
    UIButton *spacerButton = [[UIButton alloc] init];
    [spacerButton setContentHuggingPriority:UILayoutPriorityFittingSizeLevel forAxis:UILayoutConstraintAxisHorizontal];
    [spacerButton setContentCompressionResistancePriority:UILayoutPriorityFittingSizeLevel forAxis:UILayoutConstraintAxisHorizontal];
    [self.buttonsStackView addArrangedSubview:spacerButton];

And Make

self.buttonsStackView.distribution = UIStackViewDistributionFill;

Answer 6

Swift 4.2 + iOS 12.1 tested:

    let stackView: UIStackView = UIStackView(frame: .zero)
    stackView.translatesAutoresizingMaskIntoConstraints = false
    stackView.axis = .vertical
    stackView.alignment = .leading // <- aligns each of your items to the left. 

    // further setup + setup constraints
    // ...

Answer 7

Thanks to @Ankit Maurya, solution with example for swift

 let stackView = UIStackView()
 stackView.axis = .horizontal
 stackView.distribution = .fill
 
 let spacer = UIView()
 spacer.isUserInteractionEnabled = false
 spacer.setContentHuggingPriority(.fittingSizeLevel, for: .horizontal)
 spacer.setContentCompressionResistancePriority(.fittingSizeLevel, for: .horizontal)

 // stackView.addArrangedSubview.... any u need
 stackView.addArrangedSubview(spacer)

Example:

Answer 8

Remove the trailing constrant (even though XCode complains!!!) and your problem will be solved. This will cause the the view to expand as you add items to it.