Swift 5: centerXAnchor не будет центрировать мою рамку на виде

Question

Я застрял на вызове Консолидация IV от hackingwithswift.com.

Прямо сейчас я пытаюсь создать игру палача. Я думал разместить метки-заполнители в зависимости от длины слова ответа. Эти метки-заполнители будут размещены внутри рамки, которая затем будет размещена в центре основного вида.

К сожалению, передний край рамки расположен по центру. На мой взгляд, это не проблема ограничений, а проблема неправильного создания фрейма.

Мой текущий код

import UIKit

class ViewController: UIViewController {

    var answer: String!

    override func viewDidLoad() {
        super.viewDidLoad()

        // MARK: - declare all the labels here
        let letterView = UIView()
        letterView.translatesAutoresizingMaskIntoConstraints =  false
        view.addSubview(letterView)

        // MARK: - set constraints to all labels, buttons etc.

        NSLayoutConstraint.activate([

            letterView.topAnchor.constraint(equalTo: view.layoutMarginsGuide.topAnchor),
            letterView.centerXAnchor.constraint(equalTo: view.layoutMarginsGuide.centerXAnchor)

        ])

        // MARK: - populate the letterView

        // set the size of the placeholder
        answer = "Atmosphäre"
        let height = 60
        let width = 25
        // var width: Int

        for placeholder in 0..<answer.count {
            // create new label and give it a big font size
            let placeholderLabel = UILabel()
            placeholderLabel.text = "_"
            placeholderLabel.font = UIFont.systemFont(ofSize: 36)

            // calculate frame of this label
            let frame = CGRect(x: placeholder * width, y: height, width: width, height: height)
            placeholderLabel.frame = frame

            // add label to the label view
            letterView.addSubview(placeholderLabel)

        }



    }


}

Экран симулятора выглядит так:

Я уже искал ответы на stackoverflow, но не смог. Я думаю, что не знаю, что именно ищу.

Answer 1

Основная проблема в том, что letterView не имеет размера, потому что к нему не применяются ограничения ширины или высоты.

Чтобы исправить ваш код, сделайте letterView достаточно большим, чтобы содержать метки, которые вы добавлено как подпредставления путем добавления ограничений высоты и ширины после for l oop:

for placeholder in 0..<answer.count {
   ...         
}

NSLayoutConstraint.activate([
   letterView.widthAnchor.constraint(equalToConstant: CGFloat(width * answer.count)),
   letterView.heightAnchor.constraint(equalToConstant: CGFloat(height))
])

Я не уверен, что вы уже рассмотрели это в своем курсе, но лучше go об этом (что заняло бы намного меньше кода), означает использовать UIStackView вместо letterView.

Еще одна вещь, которую следует учитывать:

Если вы дадите letterView цвет фона, вы увидите, что метки фактически выровнены вне его границ:

Это потому, что вы устанавливаете у каждой метки позиция y должна быть height, когда она, вероятно, должна быть равна нулю:

let frame = CGRect(x: placeholder * width, y: 0, width: width, height: height)

Исправляя это, метки помещаются в пределы letterView: