UIStackView dynamcially add 2 labels next to each other with no extra spacing

Question

Im new to iOS development and Im a bit confused as to how to achieve this.

I have 2 UILabels added to a UIStackView like so:

let horizontalStackView1 = UIStackView(arrangedSubviews: [self.label1, self.label2])

and when I run the app it looks like this:

However, Id like the labels to be next to each other with no spacing in between something like this:

Ive tried setting horizontalStackView1.distribution, horizontalStackView1.alignment etc with no luck.

How do I achieve this?

Thanks in advance!

UPDATE:

The code looks like this (its a cell of a table by the way):

class ItemTableViewCell: UITableViewCell
{
    ...
    let stateLabel = UILabel()
    let effectiveDateLabel = UILabel()
    ...

    var typeImage: UIImage?
    {
        ...
    }

    var summary: String?
    {
        ...
    }

    var effectiveDate: Date?
    {
        ...
    }

    override init(style: UITableViewCellStyle, reuseIdentifier: String?)
    {
        super.init(style: style, reuseIdentifier: reuseIdentifier)
        self.accessoryType = .disclosureIndicator
        ...
        let horizontalStackView1 = UIStackView(arrangedSubviews: [self.stateLabel, self.effectiveDateLabel])
        let horizontalStackView2 = UIStackView(arrangedSubviews: [typeImageViewWrapper, self.titleLabel])
        horizontalStackView2.spacing = 4
        let verticalStackView = UIStackView(arrangedSubviews: [horizontalStackView1, horizontalStackView2, self.summaryLabel])
        verticalStackView.axis = .vertical
        verticalStackView.spacing = 4
        self.contentView.addSubview(verticalStackView)
        ...
    }

    required init?(coder aDecoder: NSCoder)
    {
        fatalError()
    }
}

@inokey not necessarily mate, I just need the views to be added horizontally next to each other — David Kroukamp, Sep 13 '18 at 11:50
How do you add the stackView , frame or autolayout show code — Shehata Gamal, Sep 13 '18 at 11:51
Stacks are really good when you need distributed content and such. But when you just need two views arranged consecutively, I'd use plain auto layout. First label leading to the superviews leading, second label leading to first label trailing. — inokey, Sep 13 '18 at 11:53
@inokey lol sounds good but all gibberish to me, I come from android lol — David Kroukamp, Sep 13 '18 at 11:54
@DavidKroukamp well, I'd suggest reading on auto layout then: https://www.raywenderlich.com/443-auto-layout-tutorial-in-ios-11-getting-started. It's using interface builder, but it can be done programatically as well. Just get the concept of it first. — inokey, Sep 13 '18 at 11:56

score 6 · Accepted Answer · answered Sep 13 '18 at 12:01

6

That's because the UIStackView picks the first arrangedSubview with lowest content hugging priority and resizes it so the stackview's content takes up full width.

If you want to use UIStackView for this case, you can should change the content hugging priorities, eg.

label2.setContentHuggingPriority(.defaultLow, for: .horizontal)
label1.setContentHuggingPriority(.defaultHigh, for: .horizontal)

answered Sep 13 '18 at 12:01

Michal Klein

290
2
7

This is so close, but now they are like right next to each other, I do want a little bit of space between th 2 labels for readability reasons – David Kroukamp Sep 13 '18 at 12:09
1

Thanks mate worked from me just added some spacing to the UIStackView and all is well :)! – David Kroukamp Sep 13 '18 at 14:33

score 0 · Answer 2 · answered Sep 13 '18 at 13:29

The stackviews distribution should be set to fillProportionally so every arranged subview keeps its proportions.

However, the remaining space is filled by the stackview automatically. To suppress this, you need to add an empty view at the end. This empty view needs a low content hugging priority so it can grow to fill up the space where the other views remain by their proportions.

Furthermore, the empty view needs an intrinsicContentSize for the stackview to compute the dimensions:

class FillView: UIView {
    override var intrinsicContentSize: CGSize {
        get { return CGSize(width: 100, height: 100) }
    }
}

Now set your arranged subviews and put the fillView at the end

let fillView: UIFillView()
fillView.setContentHuggingPriority(priority: .fittingSizeLevel, for: .horizontal)
myStackView.addArrangedSubview(fillView)

Set the stackviews spacing to your needs to maintain the distance between the subviews.

UIStackView dynamcially add 2 labels next to each other with no extra spacing

2 Answers2