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.

Garrotte

Try adding width constraints to your radio buttons. – Bayne

Note that UIStackView can't have backgroundColor set – Stile

Answer 1

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

Premier

ratingButton.contentHorizontalAlignment = .left with .fill working fine thank you for the help happy coding.. – Garrotte

Sure. Accept and upvote the answer if it worked for you..:) – Premier

i have upvoted but don't have enough points so it is just recorded. – Garrotte

Answer 2

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

Beisel

.fill strech the radio button perfectly but it place the radio buttons in the center which is not looking good. – Garrotte

screenshot @dan you can see this image where all the buttons placed into center after using .fill – Garrotte

Answer 3

Try proportional distribution.

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

Newsman