ios - Swift:UIStackView 重叠所有视图而不是垂直堆叠它们
问题描述
我正在尝试为我的应用程序创建一个统计页面,该页面将根据用户拥有的数据类型动态创建各种图表。为此,我根据本教程堆叠多个 ViewController:https ://swiftwithmajid.com/2019/02/27/building-complex-screens-with-child-viewcontrollers/
我遇到了一个问题,即 ViewController 的视图作为排列的子视图添加到主 StackView 中,但不是垂直堆叠视图并允许我滚动浏览它们,它只是将它们堆叠在 z-方向。
这是 StackViewController 代码:
class StackViewController: UIViewController {
private let scrollView = UIScrollView()
private let stackView = UIStackView()
override func viewDidLoad() {
super.viewDidLoad()
view.addSubview(scrollView)
scrollView.addSubview(stackView)
setupConstraints()
stackView.axis = .vertical
}
private func setupConstraints() {
scrollView.translatesAutoresizingMaskIntoConstraints = false
stackView.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activate([
scrollView.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor),
scrollView.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor),
scrollView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor),
scrollView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor),
stackView.leadingAnchor.constraint(equalTo: scrollView.contentLayoutGuide.leadingAnchor),
stackView.trailingAnchor.constraint(equalTo: scrollView.contentLayoutGuide.trailingAnchor),
stackView.topAnchor.constraint(equalTo: scrollView.contentLayoutGuide.topAnchor),
stackView.bottomAnchor.constraint(equalTo: scrollView.contentLayoutGuide.bottomAnchor),
stackView.widthAnchor.constraint(equalTo: scrollView.frameLayoutGuide.widthAnchor)
])
}
}
extension StackViewController {
func add(_ child: UIViewController) {
addChild(child)
stackView.addArrangedSubview(child.view)
print(child.view!)
child.didMove(toParent: self)
}
func remove(_ child: UIViewController) {
guard child.parent != nil else {
return
}
child.willMove(toParent: nil)
stackView.removeArrangedSubview(child.view)
child.view.removeFromSuperview()
child.removeFromParent()
}
}
这里是我创建每个 View Controller 并将其添加到 StackViewController 的地方。现在,我运行一个循环并一遍又一遍地添加单个视图控制器的副本:
class PrototypeViewController: StackViewController {
override func viewDidLoad() {
super.viewDidLoad()
for _ in 0...10 {
setupUI()
}
}
private func setupUI() {
let storyboard = UIStoryboard(name: "ConsistencyGraph", bundle: .main)
let consistencyGraphVC = storyboard.instantiateViewController(identifier: "ConsistencyGraphVC") as! ConsistencyGraphVC
add(consistencyGraphVC)
consistencyGraphVC.setupUI(name: "sessionName", consistencyPercentage: 30, ballsHit: 10)
}
}
这是视图控制器代码:
class ConsistencyGraphVC: UIViewController {
@IBOutlet weak var mainView: UIView!
@IBOutlet weak var titleLabel: UILabel!
@IBOutlet weak var ballsHitLabel: UILabel!
@IBOutlet weak var pieChartView: PieChartView!
override func viewDidLoad() {
super.viewDidLoad()
}
open func setupUI(name: String, consistencyPercentage: Double, ballsHit: Int) {
displayName(name:name)
drawPieChart(consistencyPercentage: consistencyPercentage)
displayBallsHit(ballsHit: ballsHit)
}
private func displayName(name: String) {
let prefix = "Consistency: "
let title = prefix + name
titleLabel.text = title
}
private func displayBallsHit(ballsHit: Int) {
ballsHitLabel.text = String(ballsHit)
}
private func drawPieChart(consistencyPercentage: Double) {
let maxPercent:Double = 100
let remainingPercent = maxPercent - consistencyPercentage
let dataEntry = [PieChartDataEntry(value: consistencyPercentage, data: String(consistencyPercentage)), PieChartDataEntry(value: remainingPercent, data: nil)]
let dataSet = PieChartDataSet(entries: dataEntry)
let chartData = PieChartData(dataSet: dataSet)
let color1 = randomColor()
let color2 = randomColor()
dataSet.colors = [color1, color2]
pieChartView.data = chartData
}
private func randomColor() -> UIColor {
let red = Double(arc4random_uniform(256))
let green = Double(arc4random_uniform(256))
let blue = Double(arc4random_uniform(256))
let color = UIColor(red: CGFloat(red/255), green: CGFloat(green/255), blue: CGFloat(blue/255), alpha: 1)
return color
}
}
起初,我认为这是因为 View Controller 的大小可能不明确。然后我硬编码了每个视图控制器的宽度和高度,但仍然没有运气。
非常感谢任何和所有帮助!我不知道这怎么可能。
先感谢您!
解决方案
我终于找到了解决方案!
我需要补充:
child.view.heightAnchor.constraint(equalToConstant: child.view.frame.size.height).isActive = true
到这里的 StackViewController:
func add(_ child: UIViewController) {
addChild(child)
child.view.heightAnchor.constraint(equalToConstant: child.view.frame.size.height).isActive = true
stackView.addArrangedSubview(child.view)
child.didMove(toParent: self)
}
我不确定为什么会这样。我已经硬编码了视图的高度,但是 stackView 还希望我在添加视图之前对其进行约束。
我希望这对将来的人有所帮助!我用头撞墙好多年了……
推荐阅读
- json - BigQuery:将 JSON 对象加载为字符串
- css - CSS 媒体查询不会选择标题标签,但会通过其 ID 选择标题元素
- lua - (Roblox) 为什么我的数据存储不保存数据?
- python - 是否还有任何解决方案可以将现有的 Googlenews W2v 加载到 gensim 并使用额外的语料库对其进行微调?
- javascript - Node js - 为 CLI 应用程序实现 Inquirer.js 的问题?
- service-worker - Service Worker 可以使用哪些类型的事件监听器
- python - Tika-Pandas 桥将 PDF 内容导出到 Excel?
- java - 使用数组时出现 Java NullPointerException
- android - eclipse photon 处理 aar 有问题吗?一般日食?如何处理?
- python - 正则表达式匹配捕获组 n 次