IOS 个图表在 ScrollView 中

Question

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

我不知道如何正确地将 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。

谢谢。

Answer 1

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

速解

您没有在 scrollView 中正确设置图表的约束条件。 UIScrollViews 在约束条件下的工作方式略有不同，并且有一些通常最好坚持的最佳实践（见上文 link）。然而，一个快速解决方法就是设置 chart.translatesAutoresizingMaskIntoConstraints = false，然后在滚动视图中为图表设置正确的约束。

详细答案（包括 `UIScrollView` 的最佳实践）

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

首先 （如果图表应该是interractable跳到下一个"dot"直接将图表添加到scrollView没有容器视图）。添加 UIView 作为 scrollView 的容器视图。将此容器视图的前导、尾随、顶部、底部约束到滚动视图的相应锚点。此外，如果您想禁用水平滚动：将容器视图的宽度锚点设置为等于 scrollView 宽度锚点。记得设置translatesAutoresizingMaskIntoConstraints = false.
其次：为图表设置translatesAutoresizingMaskIntoConstraints = false。然后将其添加到容器或滚动视图中。并在它的超级视图中设置它的约束！（如果图表像标签一样动态调整大小，您只需要一个 x 和一个 y 约束，否则请确保高度和宽度也可以从您的约束中计算出来。）如果您希望图表在 scrollView 中水平居中。设置 chart.centerXanchor.constraint(equalTo: scrollView.centerXanchor).isActive = true，然后设置 chart.widthAnchor.constraint（等于 scrollView.widthAnchor，常量：（如果需要，减去或添加常量）).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 时都加载它，则将其声明为常量会更方便。

编辑

包括一个例子。您可能希望根据您希望的外观更改布局。（不要在滚动视图中将自动布局布局与非自动布局布局混合使用。使用一个更容易。）将您的 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.

}

这对你有帮助吗？

IOS 个图表在 ScrollView 中

IOS charts in ScrollView

swift

charts

ios-charts

详细答案（包括 `UIScrollView` 的最佳实践）

编辑

IOS 个图表在 ScrollView 中

IOS charts in ScrollView

swift

charts

ios-charts

详细答案（包括 UIScrollView 的最佳实践）

编辑

详细答案（包括 `UIScrollView` 的最佳实践）