Swift: Radio button into StackView are not displayed properly

Question

I created a list of radio button in a stackView, but I do not understand why they are displayed wrong, they are not properly aligned

I want all my buttons to be correctly aligned on the left as I can solve this problem thank you!

Here is a part of the code:

var buttons = [UIButton]()
var titles = ["Lasy", "What I've been told", "I'm do into it", "Close the best i can", "Hard core"]


func setupUI() {

    for title in titles {
        // create button
        let button = UIButton(type: .custom)
        button.setTitleColor(.black, for: .normal)
        button.setTitle(title, for: .normal)
        button.setImage(UIImage(named: "uncheck.png")!, for: .normal)

        // if the selected button cannot be reclick again, you can use .Disabled state
        button.setImage(UIImage(named: "check.png")!, for: .selected)
        button.imageEdgeInsets = UIEdgeInsetsMake(0, 0, 0, 35)
        button.addTarget(self, action: #selector(radioButtonAction), for: .touchUpInside)

        buttons.append(button)
    }

    for button in buttons {
        addArrangedSubview(button)
    }

    setupUserChoice()
}

func setupUserChoice(){
    if titles.contains(value) {
        let valueIndex = titles.index(of: value)

        radioButtonAction(sender: buttons[valueIndex!])
    }
}

func setStackView() {
    stackView.translatesAutoresizingMaskIntoConstraints = false
    stackView.axis = .vertical
    stackView.distribution = .fill
    stackView.spacing = 16.0
    stackView.alignment = .leading
}

not look at the penultimate example for example he is also not aligned. it looks like it's 1 out of 2 — , Sep 01 '18 at 19:50

score 0 · Answer 1 · answered Sep 01 '18 at 19:59

0

Set the frame of each button, because UIStackViews use intrinsic content size. for example :

button.frame = CGRect(x: 0, y: 0, width: 100, height: 20)

answered Sep 01 '18 at 19:59

ielyamani

17,807
10
55
90

score 0 · Accepted Answer · answered Sep 02 '18 at 01:35

The problem is with the way you are trying to set the imageEdgeInsets. It is only adjusting the image position, not increasing the size of the button accordingly. For increasing the size of the button, you need to set contentEdgeInsets. But you also need to adjust the title position according to the change in image's position. You can use titleEdgeInsets for that.

So remove you code button.imageEdgeInsets = UIEdgeInsetsMake(0, 0, 0, 35) and replace it with :-

let leftPadding_beforeImage: CGFloat = 35
let gapBetweenImageAndTitle: CGFloat = 8
let rightPadding_afterTitle: CGFloat = 16

button.imageEdgeInsets = UIEdgeInsetsMake(0, leftPadding_beforeImage, 0, 0)
button.titleEdgeInsets = UIEdgeInsetsMake(0, (leftPadding_beforeImage+gapBetweenImageAndTitle), 0, -(leftPadding_beforeImage+gapBetweenImageAndTitle))
button.contentEdgeInsets = UIEdgeInsetsMake(0, 0, 0, (leftPadding_beforeImage+gapBetweenImageAndTitle+rightPadding_afterTitle))

I hope the variable names are self-explanatory. If you want to know more about UIButton edgeInsets, I suggest you reading this fantastic answer.

Swift: Radio button into StackView are not displayed properly

2 Answers2