swift - ScrollView 中的 IOS 图表
问题描述
我有一系列图表要放在页面上,所以我需要一个滚动视图。
我不知道如何正确添加 then 作为子类。或者,如果这甚至是正确的方法。
我正在使用图表。https://github.com/danielgindi/Charts
这是测试代码。我确信我在做一些愚蠢的事情。
import UIKit
import Charts
class ScrollViewController: UIViewController {
// @IBOutlet weak var pieChart: PieChartView!
lazy var scrollView: UIScrollView = {
let view = UIScrollView()
view.translatesAutoresizingMaskIntoConstraints = false
view.contentSize.height = 2000
return view
}()
override func viewDidLoad() {
super.viewDidLoad()
view.addSubview(scrollView)
setupScrollView()
}
func setupScrollView(){
scrollView.topAnchor.constraint(equalTo: view.topAnchor).isActive = true
scrollView.bottomAnchor.constraint(equalTo: view.bottomAnchor).isActive = true
scrollView.leftAnchor.constraint(equalTo: view.leftAnchor).isActive = true
scrollView.rightAnchor.constraint(equalTo: view.rightAnchor).isActive = true
// add the chart
let entry1 = PieChartDataEntry(value: 3.4, label: "first")
let entry2 = PieChartDataEntry(value: 4.1, label: "second")
let dataSet = PieChartDataSet(values: [entry1, entry2 ], label: "Test chart")
let chart = UIView()
chart.frame.size = CGSize(width: 400, height: 300)
chart.frame.origin = CGPoint(x: 0, y: 100)
chart.backgroundColor = UIColor.white
let viewCustom = PieChartView()
viewCustom.data = PieChartData(dataSet: dataSet)
chart.addSubview(viewCustom)
scrollView.addSubview( chart )
}
}
使用 Swift 4.2 和 Xcode 10。
谢谢。
解决方案
ScrollViews 有时可能有点棘手。如果需要,我会参考本指南:Apple documentation for setting up UIScrollViews with autlayout
快速解决方案
- 您没有在滚动视图中正确设置图表的约束。
UIScrollView
s 在约束条件下的工作方式略有不同,并且有一些通常最好坚持的最佳实践(参见上面的链接)。但是,对您来说,一个快速的解决方法就是chart.translatesAutoresizingMaskIntoConstraints = false
在 scrollView 中为图表设置然后设置正确的约束。
详细答案(包括最佳实践UIScrollView
)
根据您的示例代码,您需要做以下几件事(我还包括了一些滚动视图的最佳实践,也如苹果文档中所述)。
首先 (如果图表应该是可交互的,请跳到下一个“点”并直接将图表添加到滚动视图,无需容器视图)。添加
UIView
为滚动视图的容器视图。将这个容器视图的前导、尾随、顶部、底部约束到滚动视图的相应锚点。此外,如果您想禁用水平滚动:将容器视图的宽度锚设置为等于 scrollView 宽度锚。记得设置translatesAutoresizingMaskIntoConstraints = false
。其次:为图表设置
translatesAutoresizingMaskIntoConstraints = false
。然后将其添加到容器或滚动视图中。并在其超级视图中设置其约束!(如果图表像标签一样动态调整大小,您只需要一个 x 和一个 y 约束,否则请确保高度和宽度也可以从您的约束中计算出来。)。如果您希望图表在滚动视图中水平居中。然后设置chart.centerXanchor.constraint(equalTo: scrollView.centerXanchor).isActive = true
chart.widthAnchor.constraint(equalTo scrollView.widthAnchor, constant: (如果需要,减去或添加一个常量)).isActive = true`。由于设置领先和最后不要在启动时设置滚动视图的 contentSize 。覆盖视图控制器的 'viewDidLayoutSubviews()',调用 'super.viewDidLayoutSubviews()' 然后设置 'scrollView.contentSize = CGSize(width: scrollView.frame.width, height: 2000)' 或任何你想要的高度,如果它不应该是动态的。
附带说明:如果您希望滚动视图也垂直反弹(为了感觉)。在 scrollView 初始化块中,设置:'scrollView.bounces = true' 和 'scrollView.alwaysBounceVertically = true'。我也没有看到让 scrollView 成为惰性变量的原因?如果每次加载时
UIViewController
都加载它,将其声明为常量会更方便。
编辑
包括一个例子。您可能希望根据您希望它的外观更改布局。(不要在 scrollViews 中将自动布局布局与非自动布局布局混合使用。这样更容易使用。)将您的更改
setupScrollView()
为这个。// Change your scrollView declaration to this if you want it to always bounce. let scrollView : UIScrollView = { let sView = UIScrollView() sView.translatesAutoresizingMaskIntoConstraints = false sView.bounces = true sView.alwaysBounceVertical = true sView.contentSize.height = 2000 // I would recommend setting `scrollView.contentSize` in `viewDidLayoutSubviews()` instead. If you are not using the container View approach. }() let containerView = UIView() // constant for the containerView. func setupScrollView(){ scrollView.topAnchor.constraint(equalTo: view.topAnchor).isActive = true scrollView.bottomAnchor.constraint(equalTo: view.bottomAnchor).isActive = true scrollView.leftAnchor.constraint(equalTo: view.leftAnchor).isActive = true scrollView.rightAnchor.constraint(equalTo: view.rightAnchor).isActive = true // Setting up containerView and disabling horizontal scrolling of the scrollView. containerView.translatesAutoresizingMaskIntoConstraints = false scrollView.addSubview(containerView) containerView.topAnchor.constraint(equalTo: scrollView.topAnchor).isActive = true containerView.bottomAnchor.constraint(equalTo: scrollView.bottomAnchor).isActive = true containerView.leftAnchor.constraint(equalTo: scrollView.leftAnchor).isActive = true containerView.rightAnchor.constraint(equalTo: scrollView.rightAnchor).isActive = true containerView.widthAnchor.constraint(equalTo: scrollView.widthAnchor).isActive = true // add the chart let entry1 = PieChartDataEntry(value: 3.4, label: "first") let entry2 = PieChartDataEntry(value: 4.1, label: "second") let dataSet = PieChartDataSet(values: [entry1, entry2 ], label: "Test chart") // Make sure your chart is setup correctly here as `chart` let chart = PieChartView() chart.data = PieChartData(dataSet: dataSet) chart.translatesAutoresizingMaskIntoConstraints = false containerView.addSubview(chart) chart.topAnchor.constraint(equalTo: containerView.topAnchor, constant: 100).isActive = true chart.centerXAnchor.constraint(equalTo: containerView.centerXAnchor).isActive = true chart.widthAnchor.constraint(equalToConstant: 400).isActive = true chart.heightAnchor.constraint(equalToConstant: 300).isActive = true // Constrain next charts top anchor to the bottom anchor of this chart if you want multiple charts on a vertical axis. }
这对你有帮助吗?
推荐阅读
- google-maps - Google Maps Android API:授权失败。确保启用了“Google Maps Android API v2”。确保以下 Android Key 存在
- python - Pygame:如何在按下键之前显示图像
- python - 如何让我的循环遍历我的列表?
- php - Symfony 3.4 处理多个输入问题
- reactjs - 在 Private Routes 中 React Rendering 两次
- python - 有没有办法将 multi_index 转换为 int 字符串/列表/数组?
- sql - ORACLE SQL 查询以两小时为基础获取间隔为 30 分钟的行
- php - PHP json_encode 2 数组
- erlang - Erlang 中的 compile(export_all) 和 export([all/0]) 有什么区别?
- css - 将 Bootstrap/Bootstrap-Vue 导入 Scoped CSS