UIStackView 在 iOS 12 中运行良好，但在 iOS 11 中却不行
Posted
技术标签:
【中文标题】UIStackView 在 iOS 12 中运行良好，但在 iOS 11 中却不行【英文标题】：UIStackView works nicely in iOS 12, but not in iOS 11 【发布时间】：2019-05-15 15:09:28 【问题描述】：在 ios 12 中，我的水平堆栈视图（包含三个元素）布局得很好：
但在 iOS 11 中，这三个元素相互堆叠：
这是保存集合视图的视图控制器，其中一行包含堆栈：
struct TestStackConstants
static let rowHeight:CGFloat = 200.0
static let heightPerHoursLine:CGFloat = 16.0
public struct OpenHours: Equatable
public let instrument: String
public let openStrings: [String] // ex: ["00:00 - 17:00", "17:15 - 24:00"]
public let dayOfWeek: String // ex: Wednesday
public let timeZone: String // ex: GMT-04:00
class TSViewController: UIViewController
fileprivate var extendedCollection: UICollectionView!
fileprivate var myTimeZone = "GMT-0:400"
fileprivate var dailyHours = [OpenHours]()
override func viewDidLoad()
super.viewDidLoad()
setupView()
let day1 = OpenHours(instrument: "USD/CAD", openStrings: ["00:00 - 12:00", "12:05 - 24:00"], dayOfWeek: "Monday", timeZone: "GMT-04:00")
let day2 = OpenHours(instrument: "USD/CAD", openStrings: ["00:00 - 24:00"], dayOfWeek: "Tuesday", timeZone: "GMT-04:00")
let day3 = OpenHours(instrument: "USD/CAD", openStrings: ["00:00 - 24:00"], dayOfWeek: "Wednesday", timeZone: "GMT-04:00")
dailyHours = [day1, day2, day3]
private func setupView()
let myLayout = UICollectionViewFlowLayout()
extendedCollection = UICollectionView(frame: .zero, collectionViewLayout: myLayout)
extendedCollection.translatesAutoresizingMaskIntoConstraints = false
self.view.addSubview(extendedCollection)
NSLayoutConstraint.activate([
extendedCollection.topAnchor.constraint(equalTo: self.view.topAnchor),
extendedCollection.bottomAnchor.constraint(equalTo: self.view.bottomAnchor),
extendedCollection.leadingAnchor.constraint(equalTo: self.view.leadingAnchor),
extendedCollection.trailingAnchor.constraint(equalTo: self.view.trailingAnchor)
])
extendedCollection.backgroundColor = .gray
extendedCollection.dataSource = self
extendedCollection.delegate = self
extendedCollection.register(TSHoursInfoCell.self, forCellWithReuseIdentifier: "infoCell")
// MARK: - Extensions
extension TSViewController: UICollectionViewDataSource
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int
return 1
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "infoCell", for: indexPath) as! TSHoursInfoCell
cell.marketTitle.text = "MARKET HOURS (" + myTimeZone + ")"
if self.dailyHours.count > 0
for (item, hours) in zip(cell.threeDays, dailyHours)
item.dayOfWeek.text = hours.dayOfWeek.uppercased()
item.hoursHeightConstraint.constant = CGFloat(hours.openStrings.count) * TestStackConstants.heightPerHoursLine
item.dailyTime.text = hours.openStrings.joined(separator: "\n")
return cell
extension TSViewController: UICollectionViewDelegate /*...*/
extension TSViewController: UICollectionViewDelegateFlowLayout
func collectionView(_ collectionView: UICollectionView,
layout collectionViewLayout: UICollectionViewLayout,
sizeForItemAt indexPath: IndexPath) -> CGSize
let returnSize = CGSize(width: collectionView.bounds.size.width, height: TestStackConstants.rowHeight)
return returnSize
这里是集合单元的定义，它包含一个标题和堆栈：
struct HoursConstants
static let insetting:CGFloat = 24.0
static let titleSmallFont = UIFont.systemFont(ofSize: 12.0)
static let titleSmallBoldFont = UIFont.boldSystemFont(ofSize: 12.0)
static let hoursWidth:CGFloat = 96.0
class TSHoursInfoCell: UICollectionViewCell
public var marketTitle: UILabel!
public var threeDays: [TSHoursDailyView]!
fileprivate let horizStack: UIStackView =
let stackView = UIStackView()
stackView.axis = .horizontal
stackView.distribution = .fillEqually
stackView.alignment = .center
stackView.spacing = 0.0
stackView.translatesAutoresizingMaskIntoConstraints = false
return stackView
()
override init(frame: CGRect)
super.init(frame: frame)
self.backgroundColor = .gray
marketTitle = UILabel(frame: .zero)
marketTitle.translatesAutoresizingMaskIntoConstraints = false
contentView.addSubview(marketTitle)
NSLayoutConstraint.activate([
marketTitle.topAnchor.constraint(equalTo: contentView.topAnchor, constant: 10.0),
marketTitle.heightAnchor.constraint(equalToConstant: 20.0),
marketTitle.leadingAnchor.constraint(equalTo: contentView.leadingAnchor, constant: HoursConstants.insetting),
marketTitle.trailingAnchor.constraint(equalTo: contentView.trailingAnchor, constant: -HoursConstants.insetting)
])
marketTitle.font = HoursConstants.titleSmallBoldFont
marketTitle.textColor = .orange
marketTitle.textAlignment = .left
contentView.addSubview(horizStack)
NSLayoutConstraint.activate([
horizStack.topAnchor.constraint(equalTo: marketTitle.bottomAnchor, constant: 7.0),
horizStack.leadingAnchor.constraint(equalTo: contentView.leadingAnchor, constant: HoursConstants.insetting),
horizStack.trailingAnchor.constraint(equalTo: contentView.trailingAnchor, constant: -HoursConstants.insetting)
])
threeDays = [TSHoursDailyView(), TSHoursDailyView(), TSHoursDailyView()]
horizStack.addArrangedSubview(threeDays[0])
horizStack.addArrangedSubview(threeDays[1])
horizStack.addArrangedSubview(threeDays[2])
required init?(coder aDecoder: NSCoder)
fatalError("init(coder:) has not been implemented")
class TSHoursDailyView: UIView
public var dayOfWeek: UILabel!
public var dailyTime: UILabel!
public var hoursHeightConstraint: NSLayoutConstraint!
override init(frame: CGRect)
super.init(frame: frame)
dayOfWeek = UILabel(frame: .zero)
dayOfWeek.translatesAutoresizingMaskIntoConstraints = false
self.addSubview(dayOfWeek)
NSLayoutConstraint.activate([
dayOfWeek.topAnchor.constraint(equalTo: self.topAnchor, constant: 5.0),
dayOfWeek.heightAnchor.constraint(equalToConstant: 16.0),
dayOfWeek.widthAnchor.constraint(equalToConstant: HoursConstants.hoursWidth)
])
dayOfWeek.font = HoursConstants.titleSmallBoldFont
dayOfWeek.textColor = .white
dayOfWeek.textAlignment = .left
dailyTime = UILabel(frame: .zero)
dailyTime.translatesAutoresizingMaskIntoConstraints = false
self.addSubview(dailyTime)
NSLayoutConstraint.activate([
dailyTime.topAnchor.constraint(equalTo: dayOfWeek.bottomAnchor, constant: 5.0),
dailyTime.widthAnchor.constraint(equalToConstant: HoursConstants.hoursWidth)
])
hoursHeightConstraint = dailyTime.heightAnchor.constraint(equalToConstant: 24.0)
hoursHeightConstraint.isActive = true
dailyTime.font = HoursConstants.titleSmallFont
dailyTime.numberOfLines = 0
dailyTime.textColor = .white
dailyTime.textAlignment = .left
required init?(coder aDecoder: NSCoder)
fatalError("init(coder:) has not been implemented")
我没有看到任何特定于 iOS 12 的内容；为什么它们的布局不同？
【问题讨论】：
我读到这个（可能重复的）问题是处理从 UIStackView 中删除元素的问题——我的堆栈是静态的 看起来没什么问题，所以尝试使用Debug View Hierarchy 来检查布局 - 看看是否有任何问题。如果没有，看看你能不能把minimal reproducible example放在一起，这样这里的人就可以看看了。
@DonMag - 我制作了一个 MC&V 示例，并使用此代码编辑了问题。屏幕截图不再精确，但足以说明差异。
【参考方案1】：
我很惊讶你的代码在 iOS 12+ 上产生了这个结果......但是，它确实发生了。
主要问题是缺少 dayOfWeek 和 dailyTime 标签的 x 位置约束。
我做了一些其他的更改可能会有所帮助...而不是使用硬编码/计算的hoursHeightConstraint.constant 添加了底部约束，因此它使用该标签的固有高度。
这是 12+ 的结果
11 日
以及修改后的代码（只需查找// DonMag: ... cmets - 只有少数，但更可靠地将整个内容发布回'cha :)
struct TestStackConstants
static let rowHeight:CGFloat = 200.0
static let heightPerHoursLine:CGFloat = 16.0
public struct OpenHours: Equatable
public let instrument: String
public let openStrings: [String] // ex: ["00:00 - 17:00", "17:15 - 24:00"]
public let dayOfWeek: String // ex: Wednesday
public let timeZone: String // ex: GMT-04:00
class TSViewController: UIViewController
fileprivate var extendedCollection: UICollectionView!
fileprivate var myTimeZone = "GMT-0:400"
fileprivate var dailyHours = [OpenHours]()
override func viewDidLoad()
super.viewDidLoad()
setupView()
let day1 = OpenHours(instrument: "USD/CAD", openStrings: ["00:00 - 12:00", "12:05 - 24:00"], dayOfWeek: "Monday", timeZone: "GMT-04:00")
let day2 = OpenHours(instrument: "USD/CAD", openStrings: ["00:00 - 24:00"], dayOfWeek: "Tuesday", timeZone: "GMT-04:00")
let day3 = OpenHours(instrument: "USD/CAD", openStrings: ["00:00 - 24:00"], dayOfWeek: "Wednesday", timeZone: "GMT-04:00")
dailyHours = [day1, day2, day3]
private func setupView()
let myLayout = UICollectionViewFlowLayout()
extendedCollection = UICollectionView(frame: .zero, collectionViewLayout: myLayout)
extendedCollection.translatesAutoresizingMaskIntoConstraints = false
self.view.addSubview(extendedCollection)
NSLayoutConstraint.activate([
extendedCollection.topAnchor.constraint(equalTo: self.view.topAnchor),
extendedCollection.bottomAnchor.constraint(equalTo: self.view.bottomAnchor),
extendedCollection.leadingAnchor.constraint(equalTo: self.view.leadingAnchor),
extendedCollection.trailingAnchor.constraint(equalTo: self.view.trailingAnchor)
])
extendedCollection.backgroundColor = .gray
extendedCollection.dataSource = self
extendedCollection.delegate = self
extendedCollection.register(TSHoursInfoCell.self, forCellWithReuseIdentifier: "infoCell")
// MARK: - Extensions
extension TSViewController: UICollectionViewDataSource
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int
return 1
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "infoCell", for: indexPath) as! TSHoursInfoCell
cell.marketTitle.text = "MARKET HOURS (" + myTimeZone + ")"
if self.dailyHours.count > 0
for (item, hours) in zip(cell.threeDays, dailyHours)
item.dayOfWeek.text = hours.dayOfWeek.uppercased()
// DonMag: remove -- using label intrinsic height
// item.hoursHeightConstraint.constant = CGFloat(hours.openStrings.count) * TestStackConstants.heightPerHoursLine
item.dailyTime.text = hours.openStrings.joined(separator: "\n")
return cell
extension TSViewController: UICollectionViewDelegate /*...*/
extension TSViewController: UICollectionViewDelegateFlowLayout
func collectionView(_ collectionView: UICollectionView,
layout collectionViewLayout: UICollectionViewLayout,
sizeForItemAt indexPath: IndexPath) -> CGSize
let returnSize = CGSize(width: collectionView.bounds.size.width, height: TestStackConstants.rowHeight)
return returnSize
struct HoursConstants
static let insetting:CGFloat = 24.0
static let titleSmallFont = UIFont.systemFont(ofSize: 12.0)
static let titleSmallBoldFont = UIFont.boldSystemFont(ofSize: 12.0)
static let hoursWidth:CGFloat = 96.0
class TSHoursInfoCell: UICollectionViewCell
public var marketTitle: UILabel!
public var threeDays: [TSHoursDailyView]!
fileprivate let horizStack: UIStackView =
let stackView = UIStackView()
stackView.axis = .horizontal
stackView.distribution = .fillEqually
// DonMag: changed alignment
stackView.alignment = .top // .center
stackView.spacing = 0.0
stackView.translatesAutoresizingMaskIntoConstraints = false
return stackView
()
override init(frame: CGRect)
super.init(frame: frame)
self.backgroundColor = .gray
marketTitle = UILabel(frame: .zero)
marketTitle.translatesAutoresizingMaskIntoConstraints = false
contentView.addSubview(marketTitle)
NSLayoutConstraint.activate([
marketTitle.topAnchor.constraint(equalTo: contentView.topAnchor, constant: 10.0),
marketTitle.heightAnchor.constraint(equalToConstant: 20.0),
marketTitle.leadingAnchor.constraint(equalTo: contentView.leadingAnchor, constant: HoursConstants.insetting),
marketTitle.trailingAnchor.constraint(equalTo: contentView.trailingAnchor, constant: -HoursConstants.insetting)
])
marketTitle.font = HoursConstants.titleSmallBoldFont
marketTitle.textColor = .orange
marketTitle.textAlignment = .left
contentView.addSubview(horizStack)
NSLayoutConstraint.activate([
horizStack.topAnchor.constraint(equalTo: marketTitle.bottomAnchor, constant: 7.0),
horizStack.leadingAnchor.constraint(equalTo: contentView.leadingAnchor, constant: HoursConstants.insetting),
horizStack.trailingAnchor.constraint(equalTo: contentView.trailingAnchor, constant: -HoursConstants.insetting)
])
threeDays = [TSHoursDailyView(), TSHoursDailyView(), TSHoursDailyView()]
horizStack.addArrangedSubview(threeDays[0])
horizStack.addArrangedSubview(threeDays[1])
horizStack.addArrangedSubview(threeDays[2])
// DonMag: un-comment to clearly see the view frames
// threeDays[0].backgroundColor = .red
// threeDays[1].backgroundColor = .blue
// threeDays[2].backgroundColor = .brown
required init?(coder aDecoder: NSCoder)
fatalError("init(coder:) has not been implemented")
class TSHoursDailyView: UIView
public var dayOfWeek: UILabel!
public var dailyTime: UILabel!
// DonMag: remove -- use label bottomAnchor to determine height
// public var hoursHeightConstraint: NSLayoutConstraint!
override init(frame: CGRect)
super.init(frame: frame)
dayOfWeek = UILabel(frame: .zero)
dayOfWeek.translatesAutoresizingMaskIntoConstraints = false
self.addSubview(dayOfWeek)
NSLayoutConstraint.activate([
dayOfWeek.topAnchor.constraint(equalTo: self.topAnchor, constant: 5.0),
dayOfWeek.heightAnchor.constraint(equalToConstant: 16.0),
dayOfWeek.widthAnchor.constraint(equalToConstant: HoursConstants.hoursWidth),
// DonMag: added -- needed x-position
dayOfWeek.leadingAnchor.constraint(equalTo: self.leadingAnchor, constant: 0.0),
])
dayOfWeek.font = HoursConstants.titleSmallBoldFont
dayOfWeek.textColor = .white
dayOfWeek.textAlignment = .left
dailyTime = UILabel(frame: .zero)
dailyTime.translatesAutoresizingMaskIntoConstraints = false
self.addSubview(dailyTime)
NSLayoutConstraint.activate([
dailyTime.topAnchor.constraint(equalTo: dayOfWeek.bottomAnchor, constant: 5.0),
dailyTime.widthAnchor.constraint(equalToConstant: HoursConstants.hoursWidth),
// DonMag: added -- needed x-position
dailyTime.leadingAnchor.constraint(equalTo: self.leadingAnchor, constant: 0.0),
// DonMag: added -- use label height to determine height of view
dailyTime.bottomAnchor.constraint(lessThanOrEqualTo: self.bottomAnchor, constant: -5.0),
])
// DonMag: remove -- use label bottomAnchor to determine height
// hoursHeightConstraint = dailyTime.heightAnchor.constraint(equalToConstant: 24.0)
// hoursHeightConstraint.isActive = true
dailyTime.font = HoursConstants.titleSmallFont
dailyTime.numberOfLines = 0
dailyTime.textColor = .white
dailyTime.textAlignment = .left
required init?(coder aDecoder: NSCoder)
fatalError("init(coder:) has not been implemented")
【讨论】：
太棒了！感谢您对如何更正它进行如此详尽的解释。 非常欢迎...实际上只花了几分钟，一旦你提出了 MCVE（这里的很多人似乎很犹豫，呃）。以上是关于UIStackView 在 iOS 12 中运行良好，但在 iOS 11 中却不行的主要内容，如果未能解决你的问题，请参考以下文章