Как удалить загадочное верхнее поле в UIStackView, когда isLayoutMarginsRelativeArrangement = true?

Question

Я создаю простой компонент «панель инструментов» с горизонтальной осью UIStackView. Выглядит нормально, за исключением случаев, когда я включаю isLayoutMarginsRelativeArrangement, сверху над элементами добавляется странное поле, из-за чего высота представления стека неверна.

Я пытался дать представление стека directionalLayoutMargins свойство много разных значений, включая полное отсутствие значения. Тем не менее, этот нежелательный интервал остается. Почему существует это поле и как его удалить?

override func viewDidLoad() {
    super.viewDidLoad()

    self.stackView = UIStackView(frame: CGRect.zero)
    self.stackView.axis = .horizontal
    self.stackView.alignment = .center
    self.stackView.directionalLayoutMargins = NSDirectionalEdgeInsets(top: 0, leading: 0, bottom: 0, trailing: 0)
    self.stackView.isLayoutMarginsRelativeArrangement = true
    self.stackView.translatesAutoresizingMaskIntoConstraints = false
    view.addSubview(self.stackView)

        NSLayoutConstraint.activate([
            self.stackView.topAnchor.constraint(equalTo: view.topAnchor),
            self.stackView.bottomAnchor.constraint(equalTo: view.bottomAnchor),
            self.stackView.widthAnchor.constraint(equalTo: view.widthAnchor),
            self.stackView.heightAnchor.constraint(equalTo: view.heightAnchor)
        ])

        let title = UILabel(frame: .zero)
        title.text = "My Toolbar"
        self.stackView.addArrangedSubview(title)
        title.sizeToFit()

        let button = MDCButton()
        button.setTitle("Recipes", for: .normal)
        button.applyContainedTheme(withScheme: containerScheme)
        button.minimumSize = CGSize(width: 64, height: 48)
        self.stackView.addArrangedSubview(button)

}

Answer 1

Похоже, проблема в настройках привязки. Попробуйте удалить свой bottomAnchor и установить свой heightAnchor на размер, который вы хотите для ваших кнопок, плюс некоторые отступы, вместо того, чтобы просто соответствовать heightAnchor view:

NSLayoutConstraint.activate([
    self.stackView.topAnchor.constraint(equalTo: view.topAnchor),
    // self.stackView.bottomAnchor.constraint(equalTo: view.bottomAnchor),
    self.stackView.widthAnchor.constraint(equalTo: view.widthAnchor),
    // self.stackView.heightAnchor.constraint(equalTo: view.heightAnchor),
    self.stackView.heightAnchor.constraint(equalToConstant: 80)
])

Примечание: вам может потребоваться установить константа смещения для вашего верхнего якоря, например: self.stackView.topAnchor.constraint(equalTo: view.topAnchor, constant: 50)

Answer 2

Вот пара вещей, которые можно попробовать ...

Во-первых, StackBarViewControllerA, который создает newView (простой UIView) для хранения представления стека с меткой и кнопкой:

class StackBarViewControllerA: UIViewController {

    var stackView: UIStackView!

    override func viewDidLoad() {
        super.viewDidLoad()

        let newView = UIView()
        newView.translatesAutoresizingMaskIntoConstraints = false
        newView.backgroundColor = .cyan
        view.addSubview(newView)

        self.stackView = UIStackView(frame: CGRect.zero)
        self.stackView.axis = .horizontal
        self.stackView.alignment = .center
        self.stackView.directionalLayoutMargins = NSDirectionalEdgeInsets(top: 0, leading: 0, bottom: 0, trailing: 0)
        self.stackView.isLayoutMarginsRelativeArrangement = true
        self.stackView.translatesAutoresizingMaskIntoConstraints = false
        newView.addSubview(self.stackView)

        let g = view.safeAreaLayoutGuide

        NSLayoutConstraint.activate([

            self.stackView.topAnchor.constraint(equalTo: newView.topAnchor),
            self.stackView.bottomAnchor.constraint(equalTo: newView.bottomAnchor),
            self.stackView.widthAnchor.constraint(equalTo: newView.widthAnchor),
            self.stackView.heightAnchor.constraint(equalTo: newView.heightAnchor),

            newView.topAnchor.constraint(equalTo: g.topAnchor),
            newView.leadingAnchor.constraint(equalTo: g.leadingAnchor),
            newView.trailingAnchor.constraint(equalTo: g.trailingAnchor),

        ])

        let title = UILabel(frame: .zero)
        title.text = "My Toolbar"
        self.stackView.addArrangedSubview(title)
        title.sizeToFit()

        let button = UIButton() // MDCButton()
        button.setTitle("Recipes", for: .normal)
        button.backgroundColor = .blue
        button.heightAnchor.constraint(equalToConstant: 48).isActive = true
        //button.applyContainedTheme(withScheme: containerScheme)
        //button.minimumSize = CGSize(width: 64, height: 48)
        self.stackView.addArrangedSubview(button)
    }

}

Во-вторых, StackBarViewControllerB с использованием пользовательского StackBarView:

class StackBarView: UIView {

    var stackView: UIStackView!

    override init(frame: CGRect) {
        super.init(frame: frame)
        commonInit()
    }
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        commonInit()
    }

    func commonInit() -> Void {

        self.stackView = UIStackView(frame: CGRect.zero)
        self.stackView.axis = .horizontal
        self.stackView.alignment = .center
        self.stackView.directionalLayoutMargins = NSDirectionalEdgeInsets(top: 0, leading: 0, bottom: 0, trailing: 0)
        self.stackView.isLayoutMarginsRelativeArrangement = true
        self.stackView.translatesAutoresizingMaskIntoConstraints = false
        self.addSubview(self.stackView)

        NSLayoutConstraint.activate([
            self.stackView.topAnchor.constraint(equalTo: self.topAnchor),
            self.stackView.bottomAnchor.constraint(equalTo: self.bottomAnchor),
            self.stackView.widthAnchor.constraint(equalTo: self.widthAnchor),
            self.stackView.heightAnchor.constraint(equalTo: self.heightAnchor)
        ])

        let title = UILabel(frame: .zero)
        title.text = "My Toolbar"
        self.stackView.addArrangedSubview(title)
        title.sizeToFit()

        let button = UIButton() // MDCButton()
        button.setTitle("Recipes", for: .normal)
        button.backgroundColor = .blue
        //button.applyContainedTheme(withScheme: containerScheme)
        //button.minimumSize = CGSize(width: 64, height: 48)
        button.widthAnchor.constraint(greaterThanOrEqualToConstant: 64).isActive = true
        button.heightAnchor.constraint(greaterThanOrEqualToConstant: 48).isActive = true
        button.setContentHuggingPriority(.defaultHigh, for: .horizontal)
        self.stackView.addArrangedSubview(button)

    }

}

class StackBarViewControllerB: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        let v = StackBarView()

        v.translatesAutoresizingMaskIntoConstraints = false
        v.backgroundColor = .cyan

        view.addSubview(v)

        let g = view.safeAreaLayoutGuide

        NSLayoutConstraint.activate([

            v.topAnchor.constraint(equalTo: g.topAnchor),
            v.leadingAnchor.constraint(equalTo: g.leadingAnchor),
            v.trailingAnchor.constraint(equalTo: g.trailingAnchor),

        ])

    }

}

Оба дают такой результат (я дал ему голубой фон, чтобы мы могли видеть рамку):