'UIStackview align left

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.

Solution 1:^[1]

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.

set StackView leading constraint with "equal" relationship
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

Solution 2:^[2]

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;

Solution 3:^[3]

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
    // ...

Solution 4:^[4]

Use the UIStackView.alignment property.

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

Solution 5:^[5]

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))

Solution 6:^[6]

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:

Solution 7:^[7]

Xcode 13.3 and Swift 5.6

stackView.axis = .vertical
stackView.alignment = .leading

Solution 8:^[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.

Solution 9:^[9]

Storyboard

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

Programmatically

Change the UIStackView.alignment property when initializing.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	shtnkgm
Solution 2	Ankit Maurya
Solution 3	Baran Emre
Solution 4	crizzis
Solution 5	Yong Jia Pao
Solution 6	hbk
Solution 7	Yura Voevodin
Solution 8	Droid Chris
Solution 9	Will Boland

'UIStackview align left

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]

Solution 6:[6]

Solution 7:[7]

Solution 8:[8]

Solution 9:[9]