【发布时间】：2020-07-26 07:01:59
【问题描述】：
我很难使用 UIStackView 获得所需的效果。这是我的设置：
带有文本字段的字段元素：
class NewEditableFuelSheetField: UIView {
var titleText: String?
var textFieldText: String?
init(titleText: String, textFieldText: String) {
super.init(frame: .zero)
self.titleText = titleText
self.textFieldText = textFieldText
self.addSubview(editableField)
}
required init?(coder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
private lazy var editableField: UIStackView = {
let title = UILabel()
title.text = self.titleText
let textField = UITextField()
textField.isEnabled = false
let stack = UIStackView(arrangedSubviews: [title, textField])
stack.axis = .vertical
stack.distribution = .fillEqually
stack.translatesAutoresizingMaskIntoConstraints = false
return stack
}()
private func configureAutoLayout() {
NSLayoutConstraint.activate([
editableField.heightAnchor.constraint(equalToConstant: 50)
])
}
}
具有固定值的字段：
class NewFixedFuelSheetField: UIView {
var title: String?
var detail: String?
init(title: String, detail: String) {
super.init(frame: .zero)
self.title = title
self.detail = detail
configureAutoLayout()
self.addSubview(fixedField)
}
required init?(coder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
private lazy var fixedField: UIStackView = {
let title = UILabel()
let detail = UILabel()
title.text = self.title
detail.text = self.detail
let stack = UIStackView(arrangedSubviews: [title, detail])
stack.axis = .vertical
stack.distribution = .fillEqually
stack.translatesAutoresizingMaskIntoConstraints = false
self.addSubview(stack)
return stack
}()
private func configureAutoLayout() {
NSLayoutConstraint.activate([
fixedField.heightAnchor.constraint(equalToConstant: 50)
])
}
}
包含一堆不可编辑字段的标题视图：
class NewFuelSheetHeaderView: UIView {
// MARK: Init
override init(frame: CGRect) {
super.init(frame: .zero)
self.addSubview(fuelSheetHeaderStack)
configureAutoLayout()
}
required init?(coder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
// MARK: Properties
// 'detail' text will be brought in from API in next ticket
private lazy var flightNumber: NewFixedFuelSheetField = {
return NewFixedFuelSheetField(title: "Flight number", detail: "VS0101")
}()
private lazy var aircraftReg: NewFixedFuelSheetField = {
return NewFixedFuelSheetField(title: "Aircraft reg", detail: "GAAAA")
}()
private lazy var date: NewFixedFuelSheetField = {
return NewFixedFuelSheetField(title: "Date", detail: "01.01.21")
}()
private lazy var time: NewFixedFuelSheetField = {
return NewFixedFuelSheetField(title: "Time", detail: "12:01")
}()
private let supplier: NewFixedFuelSheetField = {
return NewFixedFuelSheetField(title: "Supplier", detail: "i6Staging, BAPCO")
}()
private let fuelGrade: NewFixedFuelSheetField = {
return NewFixedFuelSheetField(title: "Fuel grade", detail: "Jet A")
}()
private let freezePoint: NewFixedFuelSheetField = {
return NewFixedFuelSheetField(title: "Freeze point", detail: "-40")
}()
private let specificGravity: NewFixedFuelSheetField = {
return NewFixedFuelSheetField(title: "Specific gravity", detail: "0.793")
}()
private lazy var fuelSheetHeaderFirstRow: UIStackView = {
let stack = UIStackView(arrangedSubviews: [
flightNumber,
aircraftReg,
date,
time
])
stack.axis = .horizontal
stack.distribution = .fillEqually
return stack
}()
private lazy var fuelSheetHeaderSecondRow: UIStackView = {
let stack = UIStackView(arrangedSubviews: [
supplier,
fuelGrade,
freezePoint,
specificGravity
])
stack.axis = .horizontal
stack.distribution = .fillEqually
return stack
}()
private lazy var fuelSheetHeaderStack: UIStackView = {
let stack = UIStackView(arrangedSubviews: [fuelSheetHeaderFirstRow, fuelSheetHeaderSecondRow])
stack.axis = .vertical
stack.distribution = .fillEqually
stack.translatesAutoresizingMaskIntoConstraints = false
return stack
}()
// MARK: Configuration
private func configureAutoLayout() {
NSLayoutConstraint.activate([
fuelSheetHeaderStack.topAnchor.constraint(equalTo: self.topAnchor, constant: 50),
fuelSheetHeaderStack.leftAnchor.constraint(equalTo: leftAnchor),
fuelSheetHeaderStack.rightAnchor.constraint(equalTo: rightAnchor),
fuelSheetHeaderStack.heightAnchor.constraint(equalToConstant: 200)
])
}
}
最终需要放置在标题下方的第二个视图：
class NewFuelSheetRefuelInfoView: UIView {
// MARK: Init
override init(frame: CGRect) {
super.init(frame: .zero)
self.addSubview(refuelStackView)
configureAutoLayout()
}
required init?(coder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
// MARK: Properties
private lazy var preRefuel: NewEditableFuelSheetField = {
return NewEditableFuelSheetField(titleText: "A. Pre-refuel FOB", textFieldText: "")
}()
private lazy var requiredDepartureFuel: NewEditableFuelSheetField = {
return NewEditableFuelSheetField(titleText: "B. Required departure fuel", textFieldText: "")
}()
private lazy var requiredUplift: NewEditableFuelSheetField = {
return NewEditableFuelSheetField(titleText: "C. Required uplift (B - A)", textFieldText: "")
}()
private lazy var actualUplift: NewEditableFuelSheetField = {
return NewEditableFuelSheetField(titleText: "D. Actual uplift", textFieldText: "")
}()
private lazy var actualDepartureFuel: NewEditableFuelSheetField = {
return NewEditableFuelSheetField(titleText: "E. Actual departure fuel", textFieldText: "")
}()
private lazy var refuelStackView: UIStackView = {
let stack = UIStackView(arrangedSubviews: [
preRefuel,
requiredDepartureFuel,
requiredUplift,
actualUplift,
actualDepartureFuel
])
stack.axis = .vertical
stack.distribution = .fillEqually
stack.translatesAutoresizingMaskIntoConstraints = false
return stack
}()
// MARK: Config
private func configureAutoLayout() {
NSLayoutConstraint.activate([
refuelStackView.topAnchor.constraint(equalTo: topAnchor, constant: 50),
refuelStackView.leftAnchor.constraint(equalTo: leftAnchor),
refuelStackView.rightAnchor.constraint(equalTo: rightAnchor),
refuelStackView.heightAnchor.constraint(equalToConstant: 300)
])
}
}
然后我有一个主视图将这些元素组合在一起：
class NewFuelSheetMainView: UIView {
override init(frame: CGRect) {
super.init(frame: .zero)
self.addSubview(mainStack)
configureAutoLayout()
}
required init?(coder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
private lazy var flightDetailsHeader: NewFuelSheetHeaderView = {
return NewFuelSheetHeaderView()
}()
private lazy var refuelView: NewFuelSheetRefuelInfoView = {
return NewFuelSheetRefuelInfoView()
}()
private lazy var mainStack: UIStackView = {
let stack = UIStackView(arrangedSubviews: [flightDetailsHeader, refuelView])
stack.axis = .vertical
stack.distribution = .fillEqually
stack.translatesAutoresizingMaskIntoConstraints = false
return stack
}()
private func configureAutoLayout() {
NSLayoutConstraint.activate([
mainStack.topAnchor.constraint(equalTo: topAnchor, constant: 30),
mainStack.leftAnchor.constraint(equalTo: leftAnchor),
mainStack.rightAnchor.constraint(equalTo: rightAnchor),
mainStack.bottomAnchor.constraint(equalTo: bottomAnchor)
])
}
}
最后是一个 VC 来显示主视图：
class DataEntryViewController: I6ViewController {
// MARK: Init
override init(nibName nibNameOrNil: String?, bundle nibBundleOrNil: Bundle?) {
super.init(nibName: nil, bundle: nil)
configureAutoLayout()
}
required init?(coder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
// MARK: Lifecycle
override func viewDidLoad() {
view.backgroundColor = .white
}
// MARK: Properties
private lazy var mainView: NewFuelSheetMainView = {
let mainView = NewFuelSheetMainView()
mainView.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(mainView)
return mainView
}()
// MARK: Configuration
private func configureAutoLayout() {
NSLayoutConstraint.activate([
mainView.leftAnchor.constraint(equalTo: view.leftAnchor),
mainView.rightAnchor.constraint(equalTo: view.rightAnchor),
])
}
}
在我看来，（显然我的逻辑是有缺陷的，因为它不起作用！！）这里的关键部分是在我展示两个较小视图的堆栈的主视图中。在这里，我清楚地将堆栈设置为 .vertical 并将这个垂直堆栈固定在主视图的顶部和底部。然而，第二个视图并没有出现在我所期望的第一个视图之下，它们只是出现在另一个之上：
很明显，我在这里遗漏了一个关键点，但我看不到在哪里。任何帮助将不胜感激。
【问题讨论】：
标签： swift xcode autolayout vertical-alignment uistackview