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.

I hope [this answer](http://stackoverflow.com/a/40256540/5501940) to useful to you. You need apply the same approach but horizontally instead of vertically. — Ahmad F, Dec 28 '16 at 19:49

score 28 · Answer 1 · answered Feb 07 '18 at 11:05

28

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

answered Feb 07 '18 at 11:05

shtnkgm

1,396
15
17

1

This worked for me to get items to align left with desired spacing between items. – Augie May 13 '18 at 20:50
2

Great solution! If you're working with storyboard and constraints, you will have some issues. Just put a placeholder that you remove at runtime to hide this issue. – Tom Jul 26 '18 at 16:13
3

Perhaps I am missing something but if we want to align elements to the left it should be lessThanOrEqual – OhadM Oct 03 '21 at 13:13

score 14 · Answer 2 · answered May 09 '18 at 05:21

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;

I found just adding an empty UIView works fine – Andy Weinstein Dec 22 '20 at 18:51 — Andy Weinstein, Dec 22 '20 at 18:51

score 8 · Answer 3 · answered Oct 31 '18 at 18:00

8

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

answered Oct 31 '18 at 18:00

Baran

2,710
1
23
23

1

stackView.translatesAutoresizingMaskIntoConstraints = false this one helped to have clean log without uisv-spacing warnings about broken constraints – Serj Rubens May 07 '19 at 13:47
Is `leading` alignment is not available when setting in storyboard? – Hemang Dec 04 '19 at 19:44
1

@Hemang I can answer your question. I'm only building my views in code. But you could do the following. Create your stack view via storyboard and link it to your code and configure the stack view in code rather in the storyboard. – Baran Dec 05 '19 at 13:59
1

Thanks @BaranEmre for the tip. – Hemang Dec 06 '19 at 07:50
4

.leading works only with .vertical, but the question is about horizontal – beryllium Oct 19 '20 at 16:04

score 7 · Answer 4 · answered Dec 02 '21 at 09:35

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:

score 2 · Answer 5 · answered Dec 28 '16 at 19:29

2

Use the UIStackView.alignment property.

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

answered Dec 28 '16 at 19:29

crizzis

9,978
2
28
47

That's exactly what I was looking for. As simple as `stack.alignment = .leading` – anakkin Apr 23 '22 at 21:49

score 0 · Answer 6 · answered Dec 29 '16 at 08:45

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

score 0 · Answer 7 · answered May 04 '22 at 21:38

0

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.

answered May 04 '22 at 21:38

Droid Chris

3,455
28
31

score -2 · Answer 8 · answered Dec 28 '16 at 22:16

-2

Storyboard

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

Programmatically

Change the UIStackView.alignment property when initializing.

answered Dec 28 '16 at 22:16

Will Boland

146
2
13

UIStackview align left

8 Answers8

Storyboard

Programmatically

Linked