Swift UIStackView utilize full width of UIStackView

Question

In above screen, you can see I am using a UIStackView to fill radio buttons vertically. problem is my radio buttons not utilising the full width of UIStackView when I use stackV.alignment = .leading it shows label as "dis..lified" instead of disqualified.

UISTackView Code

let ratingStackView : UIStackView = {

    let stackV = UIStackView()
    stackV.translatesAutoresizingMaskIntoConstraints = false
    stackV.backgroundColor = UIColor.yellow
    stackV.axis = .vertical
    stackV.distribution = .fillEqually
    stackV.alignment = .leading
    return stackV
}()

Layout of UIStackView

func setupView(){
    view.addSubview(ratingStackView)

    ratingStackView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor).isActive = true

    ratingStackView.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor,constant: 8).isActive = true

    ratingStackView.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor).isActive = true

    ratingStackView.heightAnchor.constraint(equalToConstant: 200).isActive = true

    //Add radio buttons to stackview
    for ratingButton in ratingRadioButtons{
        ratingStackView.addArrangedSubview(ratingButton)
    }        
}

what property I need to set to utilize full width can you please tell I am new to the Swift for radio buttons. I am using DLRadioButton.

Try adding width constraints to your radio buttons. – TheValyreanGroup Mar 16 '18 at 12:56 — TheValyreanGroup, Mar 16 '18 at 12:56
Note that UIStackView can't have backgroundColor set – Petrus Theron Sep 05 '18 at 07:34 — Petrus Theron, Sep 05 '18 at 07:34

score 26 · Accepted Answer · answered Mar 18 '18 at 17:11

26

To get this working, you need to make following changes in the layout:

1. Set UIStackView's alignment property to fill, i.e.

stackV.alignment = .fill

2. Set UIButton's Horizontal Alignment to left wherever you are creating the RadioButton either in .xib file or through code.

In .xib, you can find the property in interface here:

if you are creating the button using code, use the following line of code:

ratingButton.contentHorizontalAlignment = .left

Let me know if you still face the issue. Happy coding..

answered Mar 18 '18 at 17:11

PGDev

23,751
6
34
88

`ratingButton.contentHorizontalAlignment = .left` with `.fill` working fine thank you for the help happy coding.. – Deepak Mar 19 '18 at 05:24
Sure. Accept and upvote the answer if it worked for you..:) – PGDev Mar 19 '18 at 05:38
i have upvoted but don't have enough points so it is just recorded. – Deepak Mar 19 '18 at 06:25

score 4 · Answer 2 · answered Mar 16 '18 at 13:11

4

Leave alignment with its default value, i.e. .fill – this stretches arranged views in a direction perpendicular to the stack’s axis.

Actually, I suspect that if you are using .leading alignment and do not specify widths of nested controls you are getting auto layout warnings during runtime (could be checked in Visual Debugger in Xcode).

answered Mar 16 '18 at 13:11

Dan Karbayev

2,870
2
19
28

`.fill` strech the radio button perfectly but it place the radio buttons in the center which is not looking good. – Deepak Mar 17 '18 at 05:01
[screenshot](https://ibb.co/c5FqVH) @dan you can see this image where all the buttons placed into center after using `.fill` – Deepak Mar 17 '18 at 05:08

Farhan Arshad · Answer 3 · 2018-03-18T12:28:50.833

1

Try proportional distribution.

One more thing to try...Reduce the content hugging priority of the labels.

edited Mar 18 '18 at 12:28

answered Mar 18 '18 at 12:18

Farhan Arshad

375
3
9

Swift UIStackView utilize full width of UIStackView

3 Answers3