Swift: StackView 中的单选按钮显示不正确

Question

我在 stackView 中创建了一个单选按钮列表，但我不明白为什么它们显示错误，它们没有正确对齐

我希望我所有的按钮都在左侧正确对齐，因为我可以解决这个问题谢谢！

这是部分代码：

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
}

Answer 1

设置每个按钮的框架，因为 UIStackViews 使用固有内容大小。例如：

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

Answer 2

问题在于您尝试设置 imageEdgeInsets 的方式。它只是调整图像位置，并没有相应地增加按钮的大小。要增加按钮的大小，您需要设置 contentEdgeInsets。但是您还需要根据图像位置的变化调整标题位置。您可以为此使用 titleEdgeInsets。

所以删除代码 button.imageEdgeInsets = UIEdgeInsetsMake(0, 0, 0, 35) 并将其替换为：-

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

希望变量名是self-explanatory。如果您想了解更多有关 UIButton edgeInsets 的信息，建议您阅读 this fantastic answer.

Swift: StackView 中的单选按钮显示不正确

Swift: Radio button into StackView are not displayed properly

ios

stackview

swift