我正在尝试在 Swift 中以编程方式创建此布局。
https://codepen.io/anon/pen/NXRQbJ
第一个矩形很小。其他 2 个矩形的大小相同,但比第一个矩形大。
这是整个视图控制器。我没有使用故事板。我所有的代码都在这个视图控制器中。
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
改为 just .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])
}
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句