以编程方式创建布局，使用堆栈视图和约束不起作用

Posted 2021-04-17

我正在尝试在Swift中以编程方式创建此布局。

https://codepen.io/anon/pen/NXRQbJ

第一个矩形很小。其他2个矩形大小相同但比第一个矩形大。

这是整个View Controller。我没有使用故事板。我的所有代码都在这个视图控制器中。

import UIKit

class ViewController: UIViewController {

    lazy var stackView: UIStackView = {
        let stackView = UIStackView(arrangedSubviews: [smallRectangleView, bigRectangleView, bigRectangleView2])
        stackView.alignment = .fill
        stackView.distribution = .fillProportionally
        stackView.axis = .vertical
        stackView.translatesAutoresizingMaskIntoConstraints = false
        return stackView
    }()

    var smallRectangleView: UIView = {
        let view = UIView()
        view.backgroundColor = .orange
        view.translatesAutoresizingMaskIntoConstraints = false
        return view
    }()

    var bigRectangleView: UIView = {
        let view = UIView()
        view.backgroundColor = .green
        view.translatesAutoresizingMaskIntoConstraints = false
        return view
    }()

    var bigRectangleView2: UIView = {
        let view = UIView()
        view.backgroundColor = .purple
        view.translatesAutoresizingMaskIntoConstraints = false
        return view
    }()

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
        setupLayout()
        print(stackView.frame)
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }

    func setupLayout() {
        // Stack View
        view.addSubview(stackView)
        stackView.topAnchor.constraint(equalTo: view.topAnchor).isActive = true
        stackView.bottomAnchor.constraint(equalTo: view.bottomAnchor).isActive = true
        stackView.leadingAnchor.constraint(equalTo: view.leadingAnchor).isActive = true
        stackView.trailingAnchor.constraint(equalTo: view.trailingAnchor).isActive = true

        // Small Recntangle View
        let heightConstraint1 = NSLayoutConstraint(item: smallRectangleView, attribute: .height, relatedBy: .equal, toItem: bigRectangleView, attribute: .height, multiplier: 4.0, constant: 0.0)

        // Big Rectangle View
        let heightConstraint2 = NSLayoutConstraint(item: bigRectangleView, attribute: .height, relatedBy: .equal, toItem: bigRectangleView2, attribute: .height, multiplier: 0.0, constant: 0.0)

        view.addConstraints([heightConstraint1, heightConstraint2])
    }
}

heightConstraint1和heightConstraint2导致错误。我不知道为什么。

// Small Recntangle View
let heightConstraint1 = NSLayoutConstraint(item: smallRectangleView, attribute: .height, relatedBy: .equal, toItem: bigRectangleView, attribute: .height, multiplier: 4.0, constant: 0.0)

// Big Rectangle View
let heightConstraint2 = NSLayoutConstraint(item: bigRectangleView, attribute: .height, relatedBy: .equal, toItem: bigRectangleView2, attribute: .height, multiplier: 0.0, constant: 0.0)

view.addConstraints([heightConstraint1, heightConstraint2])

当我在模拟器上运行此应用程序时，没有任何显示。它只是一个空白的白色屏幕。同样在调试器中存在约束问题。

答案

主要问题似乎是stackView.distribution。我把它从.fillProportionally改为.fill。我怀疑问题在于，由于你的限制并导致冲突，这些观点已经彼此相对。

我做的其他更改，你的一个约束中的multiplier需要是0.25而不是4，而在第二个中，乘数需要是1而不是0。

我还使用NSLayoutConstraint.activate激活最后2个约束，而不是将它们添加到view。通常，您希望激活约束而不是将它们添加到视图中。让ios找出要添加它们的视图。

class ViewController: UIViewController {

    lazy var stackView: UIStackView = {
        let stackView = UIStackView(arrangedSubviews: [smallRectangleView, bigRectangleView, bigRectangleView2])
        stackView.alignment = .fill
        stackView.distribution = .fill
        stackView.axis = .vertical
        stackView.translatesAutoresizingMaskIntoConstraints = false
        return stackView
    }()

    var smallRectangleView: UIView = {
        let view = UIView()
        view.backgroundColor = .orange
        view.translatesAutoresizingMaskIntoConstraints = false
        return view
    }()

    var bigRectangleView: UIView = {
        let view = UIView()
        view.backgroundColor = .green
        view.translatesAutoresizingMaskIntoConstraints = false
        return view
    }()

    var bigRectangleView2: UIView = {
        let view = UIView()
        view.backgroundColor = .purple
        view.translatesAutoresizingMaskIntoConstraints = false
        return view
    }()

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
        setupLayout()
        print(stackView.frame)
    }

    func setupLayout() {
        // Stack View
        view.addSubview(stackView)
        stackView.topAnchor.constraint(equalTo: view.topAnchor).isActive = true
        stackView.bottomAnchor.constraint(equalTo: view.bottomAnchor).isActive = true
        stackView.leadingAnchor.constraint(equalTo: view.leadingAnchor).isActive = true
        stackView.trailingAnchor.constraint(equalTo: view.trailingAnchor).isActive = true

        // Small Recntangle View
        let heightConstraint1 = NSLayoutConstraint(item: smallRectangleView, attribute: .height, relatedBy: .equal, toItem: bigRectangleView, attribute: .height, multiplier: 0.25, constant: 0.0)

        // Big Rectangle View
        let heightConstraint2 = NSLayoutConstraint(item: bigRectangleView, attribute: .height, relatedBy: .equal, toItem: bigRectangleView2, attribute: .height, multiplier: 1.0, constant: 0.0)

        NSLayoutConstraint.activate([heightConstraint1, heightConstraint2])
    }
}

另一答案

您还可以继续使用iOS 9+约束而不是旧版NSLayoutConstraint(item:，而无需更改原始实现：

func setupLayout() {
    let topViewHeight:CGFloat = 50.0
    let screenheight = view.bounds.height

    // Stack View
    view.addSubview(stackView)

    stackView.topAnchor.constraint(equalTo: view.topAnchor).isActive = true
    stackView.bottomAnchor.constraint(equalTo: view.bottomAnchor).isActive = true
    stackView.leadingAnchor.constraint(equalTo: view.leadingAnchor).isActive = true
    stackView.trailingAnchor.constraint(equalTo: view.trailingAnchor).isActive = true

    smallRectangleView.heightAnchor.constraint(equalToConstant: topViewHeight).isActive = true

    bigRectangleView.heightAnchor.constraint(equalToConstant: (screenheight - topViewHeight) / 2).isActive = true

    bigRectangleView2.heightAnchor.constraint(equalToConstant: (screenheight - topViewHeight) / 2).isActive = true

}