ScrollView中的IOS图表

Question

我有一系列想要放在页面上的图表，所以我需要一个滚动视图。

我无法弄清楚如何正确添加作为子类。或者，如果这是正确的方法。

我正在使用图表。 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。

谢谢。

Answer 1

ScrollViews有时候有点棘手。如果需要，我会参考本指南：Apple documentation for setting up UIScrollViews with autlayout

快速解决方案

• 您没有在scrollView中正确设置图表的约束。 UIScrollViews在约束方面的工作方式略有不同，并且有一些最佳实践通常最好坚持（参见上面的链接）。然而，快速解决方法只是设置chart.translatesAutoresizingMaskIntoConstraints = false然后在scrollView中为图表设置正确的约束。

Detailed answer (including best practices for UIScrollView)

根据您的示例代码，您需要执行以下几项操作（我还包括一些滚动视图的最佳实践，如Apple文档中所述）。

• 首先（如果图表应该是可交互的，请跳到下一个“点”并直接将图表添加到scrollView而不使用容器视图）。将UIView添加为scrollView的容器视图。将此容器视图的前导，尾随，顶部，底部约束到scrollView的相应锚点。此外，如果要禁用水平滚动：将容器视图的宽度锚设置为等于scrollView宽度锚。记得设置translatesAutoresizingMaskIntoConstraints = false。
• 其次：为图表设置translatesAutoresizingMaskIntoConstraints = false。然后将其添加到容器或滚动视图。并在其超级视图中设置其约束！ （如果图表的动态大小与标签类似，则只需要一个x和一个y约束，否则也要确保高度和宽度也可以从约束中计算出来。）。如果希望图表在scrollView中水平居中。设置chart.centerXanchor.constraint(equalTo: scrollView.centerXanchor).isActive = true然后map.widthAnchor.constraint（equalTo scrollView.widthAnchor，constant :(如果需要，减去或添加一个常量））。isActive = true`。自设置领先和
• 最后，在启动时不要设置scrollview的contentSize。覆盖视图控制器的'viewDidLayoutSubviews（）'，调用'super.viewDidLayoutSubviews（）'然后设置'scrollView.contentSize = CGSize（width：scrollView.frame.width，height：2000）'或者你想要的任何高度，如果它不充满活力。
• 作为旁注：如果你想让scrollView也垂直弹跳（为了感觉）。在scrollView初始化块中，设置：'scrollView.bounces = true'和'scrollView.alwaysBounceVertically = true'。另外我没有看到使scrollView变得懒惰的原因？如果你每次加载UIViewController时加载它，它更方便地将它声明为常量。

Edit

• 包括一个例子。您可能希望根据您希望的外观来更改布局。 （不要在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.
  
  }

这对你有帮助吗？