在iOS堆栈视图中水平居中视图

我试图实现以下布局（视图水平居中）：

因此，我设置了一个堆栈视图，如下所示：

let quickPromptsView: UIStackView = {
    let sv = UIStackView()
    sv.axis = .horizontal
    sv.alignment = .center
    sv.distribution = .equalSpacing
    sv.spacing = 10
    sv.translatesAutoresizingMaskIntoConstraints = false
    return sv
}()

向堆栈视图添加按钮：

func addOptions(options: [DialogNodeOutputOptionsElement]) {
    DispatchQueue.main.async {
        // clear all subviews
        self.quickPromptsView.subviews.forEach { (view) in
            view.removeFromSuperview()
        }
        for option in options {
            let button = QuickPromptButton()
            button.setTitle(option.label, for: .normal)
            button.addTarget(self, action: #selector(self.didTapQuickPrompt), for: .touchUpInside)
            self.quickPromptsView.addArrangedSubview(button)
        }
    }
}

按钮类别：

class QuickPromptButton: UIButton {

    var userFacingValue: String?
    var answerValue: String?

    override init(frame: CGRect) {
        super.init(frame: frame)
        layer.borderColor = UIColor.primaryColor.cgColor
        layer.borderWidth = 1
        layer.cornerRadius = 15
        setTitleColor(.primaryColor, for: .normal)
    }

    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}

这就是我添加堆栈视图的方式，我将它添加到

然而，我得到的是：

---

堆栈视图具有100%的屏幕宽度。我尝试过每种类型的

发行版

，但都不起作用。我还尝试在极端位置插入透明的

UIView

s，以强制居中，但这似乎是一个错误。有什么想法吗？

只要将堆栈视图水平居中放置在superview中即可

下面的示例是使用库（它是纯UIKit，但是声明性的，支持LivePreview，iOS9+）

UView{
UHStack{
乌维尤{
UText（“是”）
.颜色（.绿色）
.edgesToSuperview（h:8，v:4）
}
.边框（1，.绿色）
.circle（）
乌维尤{
UText（“否”）
.颜色（.red）
.edgesToSuperview（h:8，v:4）
}
.边框（1，.红色）
.circle（）
乌维尤{
UText（“我不知道”）
.color（.darkGray）
.edgesToSuperview（h:8，v:4）
}
.border（1，.darkGray）
.circle（）
}
.对齐（.center）
.分布（.equalspace）
.间距（10）
.edgesToSuperview（v:0）
.centerXInSuperview（）//这将使堆栈视图居中
}
.edgesToSuperview（h:0）
.centerYInSuperview（）

或者使用一些技巧，添加两个宽度相等的视图，一个在堆栈的开头，另一个作为堆栈中的最后一个视图

let v1=UView（）
UHStack{
v1
乌维尤{
UText（“是”）
.颜色（.绿色）
.edgesToSuperview（h:8，v:4）
}
.边框（1，.绿色）
.circle（）
乌维尤{
UText（“否”）
.颜色（.red）
.edgesToSuperview（h:8，v:4）
}
.边框（1，.红色）
.circle（）
乌维尤{
UText（“我不知道”）
.color（.darkGray）
.edgesToSuperview（h:8，v:4）
}
.border（1，.darkGray）
.circle（）
UView（）.宽度（到：v1）
}
.对齐（.center）
.间距（10）
.edgesToSuperview（h:0）
.centerYInSuperview（）

---

不幸的是，堆栈视图本身无法自动将内部视图居中，因此您必须帮助它做到这一点。

约束？？？？？？？？？@ShĜKhan堆栈视图的任务是自动管理其排列的视图，无需向子视图添加额外的约束。我指的是约束本身，而不是subviews@Sh_Khan您会添加哪些约束条件？在堆栈视图上水平居中？能否显示将两个文本气泡添加到堆栈视图中的代码？此问题适用于uikit而非Swiftuit谢谢您的回答。我不认为水平居中是一个选项，因为我使用的是一个内置于库（MessageKit）中的堆栈视图，不想触及其中的约束。使用两个视图作为一种攻击听起来不错，但是，我不知道在没有第三方的情况下如何在UIKit中实现这一点libraries@Cesare等宽度是一个固有的东西，只需将第一个视图的宽度约束设置为第二个视图的宽度，就可以了。通过编程，您可以使用UIView的

widthAnchor

属性来设置它：）@Sh_Khan这个答案是用纯UIKit编写的，因为iOS9I将接受并添加—如果您使用的是第三方库，如MessageKit，您可以将容器视图

UIView

添加到预构建的堆栈视图中，该视图将保存另一个堆栈视图，但这一次您要确定约束（例如水平居中）。（不确定这是否有意义，但现在开始）

func configureQuickPromptsView() {
    view.addSubview(quickPromptsView)
    quickPromptsView.heightAnchor.constraint(equalToConstant: 40).isActive = true

    // this stack view belongs to the MessageKit library
    messageInputBar.topStackView.axis = .horizontal
    messageInputBar.topStackView.distribution = .fill
    messageInputBar.topStackView.addArrangedSubview(quickPromptsView)
}