Question

在最新的Xcode（10.1）上，我无法使用编程约束将固定大小的UIView添加到我的UIStackView中。我认为这应该很简单，但是我不知道额外的约束来自何处（UIKit必须打破一些约束以布局视图）。

问题是我期望100x100的蓝色UIView。现实情况是，蓝色的UIView是100％屏幕宽度和100％屏幕高度。

我意识到UIStackView使用intrinsicContentSize，但是如何使用编程约束正确设置呢？

以下是一个正在工作的游乐场，其中添加了UIStackView和香草UIView。

注意：如果我将蓝色UIView直接添加到ViewController的view，则其大小在原点（0,0）的正确大小为100x100。将其添加到堆栈视图会导致约束冲突。

import UIKit
import PlaygroundSupport

class MyViewController : UIViewController {

    override func loadView() {
        let view = UIView()
        view.backgroundColor = .white
        self.view = view

        // vertical stack view (full screen)
        let stackView = UIStackView()
        stackView.translatesAutoresizingMaskIntoConstraints = false
        stackView.axis = .vertical
        view.addSubview(stackView)

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

        // view (100x100)
        let fixedSizeView = UIView()
        fixedSizeView.translatesAutoresizingMaskIntoConstraints = false
        fixedSizeView.backgroundColor = .blue

        stackView.addArrangedSubview(fixedSizeView)

        NSLayoutConstraint.activate([
            fixedSizeView.widthAnchor.constraint(equalToConstant: 100),
            fixedSizeView.heightAnchor.constraint(equalToConstant: 100),
            ])
    }
}
// Present the view controller in the Live View window
PlaygroundPage.current.liveView = MyViewController()

Answer 1

UIStackView的主要目的是安排其子视图。

因此，您要限制堆栈视图以“填充屏幕”，然后将“蓝色视图”添加为arranged subview ... ...此时，堆栈视图将“接管”蓝色视图。

假设由于计划添加其他视图而正在使用堆栈视图，则可以允许子视图确定堆栈视图的框架（即，不限制堆栈视图的宽度和/或高度），或者您需要更改堆栈视图的.alignment和/或.distribution属性。

这是您的游乐场页面的修改，以将100 x 100蓝色视图置于超级视图的中心：

import UIKit
import PlaygroundSupport

class MyViewController : UIViewController {

    override func loadView() {
        let view = UIView()
        view.backgroundColor = .white
        self.view = view

        // vertical stack view (full screen)
        let stackView = UIStackView()
        stackView.translatesAutoresizingMaskIntoConstraints = false
        stackView.axis = .vertical

        view.addSubview(stackView)

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

        NSLayoutConstraint.activate([
            stackView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            stackView.centerYAnchor.constraint(equalTo: view.centerYAnchor),
            ])

        // view (100x100)
        let fixedSizeView = UIView()
        fixedSizeView.translatesAutoresizingMaskIntoConstraints = false
        fixedSizeView.backgroundColor = .blue

        stackView.addArrangedSubview(fixedSizeView)

        NSLayoutConstraint.activate([
            fixedSizeView.widthAnchor.constraint(equalToConstant: 100),
            fixedSizeView.heightAnchor.constraint(equalToConstant: 100),
            ])
    }
}
// Present the view controller in the Live View window
PlaygroundPage.current.liveView = MyViewController()

，这是一个修改，其中两个视图（蓝色和红色，每个位于100 x 100）被添加到受约束到超级视图顶部的堆栈视图中，其中.alignment设置为{{ 1}}：

.center

如何将固定大小的UIView添加到UIStackView？

1 个答案: