当isLayoutMarginsRelativeArrangement = true时如何在UIStackView中删除神秘的上边距？

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)

}

<< img src =“ https://image.soinside.com/eyJ1cmwiOiAiaHR0cHM6Ly9pLnN0YWNrLmltZ3VyLmNvbS9HcFJOTi5qcGcifQ==” alt =“在此处输入图像描述”>

Answer 1

这里有几件事可以尝试...

首先，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),

        ])

    }

}

都给出这个结果（我给了它青色的背景，所以我们可以看到框架）：

Answer 2

看来问题出在您的锚设置。尝试删除您的bottomAnchor并将您的heightAnchor设置为按钮所需的大小以及一些填充，而不是仅匹配view的heightAnchor：

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)