Ios 如何在具有大于或等于约束的超级视图中居中放置两个视图

我制作了一个带有两个标签的ViewController示例来突出我的问题。目标是将标签垂直分隔10，然后使用大于或等于的约束将其垂直居中。我使用的是可视化格式，但是如果我设置了像

view.topanch.constraint（greaterThan…

）这样的约束，这应该适用。我还有两个约束来水平布局标签

我的ViewController：

class myVC: UIViewController {
    lazy var titleLabel: UILabel = {
        let l = UILabel(frame: .zero)
        l.translatesAutoresizingMaskIntoConstraints = false
        l.text = "Hello World"
        l.font = .systemFont(ofSize: 50)
        l.textColor = .black
        return l
    }()

    lazy var descLabel: UILabel = {
        let l = UILabel(frame: .zero)
        l.translatesAutoresizingMaskIntoConstraints = false
        l.text = "description"
        l.font = .systemFont(ofSize: 35)
        l.textColor = .gray
        return l
    }()

    override func viewDidLoad() {
        super.viewDidLoad()

        view.backgroundColor = .yellow
        view.addSubview(titleLabel)
        view.addSubview(descLabel)
        titleLabel.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
        descLabel.leadingAnchor.constraint(equalTo: titleLabel.leadingAnchor).isActive = true
        NSLayoutConstraint.activate(NSLayoutConstraint.constraints(withVisualFormat: "V:|-(<=50)-[titleLabel]-(10)-[descLabel]-(<=50)-|", options: .init(), metrics: nil, views: ["titleLabel": titleLabel, "descLabel": descLabel]))
    }

}

类myVC:UIViewController{
惰性变量标题标签：UILabel={
设l=UILabel（帧：.0）
l、 translatesAutoresizingMaskIntoConstraints=false
l、 text=“你好，世界”
l、 字体=.systemFont（字体大小：50）
l、 textColor=.black
返回l
}()
惰性变量descLabel:UILabel={
设l=UILabel（帧：.0）
l、 translatesAutoresizingMaskIntoConstraints=false
l、 text=“说明”
l、 字体=.systemFont（字体大小：35）
l、 textColor=.gray
返回l
}()
重写func viewDidLoad（）{
super.viewDidLoad（）
view.backgroundColor=.yellow
view.addSubview（标题标签）
view.addSubview（descLabel）
titleLabel.centerXAnchor.constraint（等于：view.centerXAnchor）.isActive=true
descLabel.leadingAnchor.constraint（等式：titleLabel.leadingAnchor）.isActive=true
NSLayoutConstraint.activate（NSLayoutConstraint.constraints）（使用VisualFormat:“V:|-（使用VFL很难使元素居中）

除非嵌入到
UIView
或
UIStackView
中，否则很难将两个元素居中放置

下面是一个将标签嵌入“容器”
UIView
的选项：

class MyVC: UIViewController {
    lazy var titleLabel: UILabel = {
        let l = UILabel(frame: .zero)
        l.translatesAutoresizingMaskIntoConstraints = false
        l.text = "Hello World"
        l.font = .systemFont(ofSize: 50)
        l.textColor = .black

        // center the text in the label - change to .left if desired
        l.textAlignment = .center

        return l
    }()

    lazy var descLabel: UILabel = {
        let l = UILabel(frame: .zero)
        l.translatesAutoresizingMaskIntoConstraints = false
        l.text = "description"
        l.font = .systemFont(ofSize: 35)
        l.textColor = .gray

        // center the text in the label - change to .left if desired
        l.textAlignment = .center

        return l
    }()

    lazy var containerView: UIView = {
        let v = UIView()
        v.translatesAutoresizingMaskIntoConstraints = false
        return v
    }()

    override func viewDidLoad() {
        super.viewDidLoad()

        view.backgroundColor = .yellow

        // give the labels and containerView background colors to make it easy to see the layout
        titleLabel.backgroundColor = .green
        descLabel.backgroundColor = .cyan
        containerView.backgroundColor = .blue

        // add containerView to view
        view.addSubview(containerView)

        // add labels to containerView
        containerView.addSubview(titleLabel)
        containerView.addSubview(descLabel)

        NSLayoutConstraint.activate([

            // constrain titleLabel Top to containerView Top
            titleLabel.topAnchor.constraint(equalTo: containerView.topAnchor),

            // constrain titleLabel Leading and Trailing to containerView Leading and Trailing
            titleLabel.leadingAnchor.constraint(equalTo: containerView.leadingAnchor),
            titleLabel.trailingAnchor.constraint(equalTo: containerView.trailingAnchor),

            // constrain descLabel Leading and Trailing to containerView Leading and Trailing
            descLabel.leadingAnchor.constraint(equalTo: containerView.leadingAnchor),
            descLabel.trailingAnchor.constraint(equalTo: containerView.trailingAnchor),

            // constrain descLabel Bottom to containerView Bottom
            descLabel.bottomAnchor.constraint(equalTo: containerView.bottomAnchor),

            // constrain descLabel Top 10-pts from titleLabel Bottom
            descLabel.topAnchor.constraint(equalTo: titleLabel.bottomAnchor, constant: 10.0),

            // constrain containerView centered horizontally and vertically
            containerView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            containerView.centerYAnchor.constraint(equalTo: view.centerYAnchor),

        ])

    }

}

结果:

这可以通过使用stackview轻松实现。在stackview中添加两个标签，并使用所有其他约束（顶部、前导、底部、尾随）在superview中垂直居中。
下面是用于您的用例的视图控制器的示例代码

class ViewController: UIViewController {

    lazy var titleLabel: UILabel = {
        let label = UILabel()
        label.translatesAutoresizingMaskIntoConstraints = false
        label.text = "Hello \nWorld"
        label.font = .systemFont(ofSize: 50)
        label.backgroundColor = .orange
        label.numberOfLines = 0
        label.textColor = .black
        return label
    }()

    lazy var descLabel: UILabel = {
        let label = UILabel()
        label.translatesAutoresizingMaskIntoConstraints = false
        label.text = "a\n b\n c\n"
        label.font = .systemFont(ofSize: 35)
        label.backgroundColor = .green
        label.numberOfLines = 0
        label.textColor = .gray
        return label
    }()

    lazy var contentView: UIStackView = {
        let stackView = UIStackView()
        stackView.axis = .vertical
        stackView.translatesAutoresizingMaskIntoConstraints = false
        stackView.spacing = 10
        stackView.distribution = .fill
        return stackView
    }()

    override func viewDidLoad() {
        super.viewDidLoad()

        self.view.backgroundColor = UIColor.white

        contentView.addArrangedSubview(titleLabel)
        contentView.addArrangedSubview(descLabel)
        self.view.addSubview(contentView)

        let constraints = [
            contentView.topAnchor.constraint(greaterThanOrEqualTo: view.safeAreaLayoutGuide.topAnchor),
            contentView.centerYAnchor.constraint(equalTo: view.centerYAnchor),
            contentView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
            contentView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
            contentView.bottomAnchor.constraint(lessThanOrEqualTo: view.safeAreaLayoutGuide.bottomAnchor)
        ]
        NSLayoutConstraint.activate(constraints)

    }
}

上面的代码将生成此视图，并继续占据顶部和按钮空间，直到它满足安全区域。此外，您可以设置垂直内容拥抱和抗压优先级，以控制要扩展或收缩的标签

仅使用两个标签将很难实现这一点。不过，将它们嵌入到
ui视图中（并垂直居中视图）很容易做到或者，更简单的是，在我的实际应用程序中使用
UIStackView
，我有一个垂直的多个视图堆栈，它们之间的间距不一致，因此stackView对我没有帮助。你可以在堆栈视图中嵌入堆栈视图。否则，在
UIView
中嵌入标签。但是…尝试用VFL将元素居中（视觉格式语言）也有问题。