首页 > 解决方案 > 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。

谢谢。

标签: swiftchartsios-charts

解决方案


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

快速解决方案

  • 您没有在滚动视图中正确设置图表的约束。UIScrollViews 在约束条件下的工作方式略有不同,并且有一些通常最好坚持的最佳实践(参见上面的链接)。但是,对您来说,一个快速的解决方法就是chart.translatesAutoresizingMaskIntoConstraints = false在 scrollView 中为图表设置然后设置正确的约束。

详细答案(包括最佳实践UIScrollView

根据您的示例代码,您需要做以下几件事(我还包括了一些滚动视图的最佳实践,也如苹果文档中所述)。

  • 首先 (如果图表应该是可交互的,请跳到下一个“点”并直接将图表添加到滚动视图,无需容器视图)。添加UIView为滚动视图的容器视图。将这个容器视图的前导、尾随、顶部、底部约束到滚动视图的相应锚点。此外,如果您想禁用水平滚动:将容器视图的宽度锚设置为等于 scrollView 宽度锚。记得设置translatesAutoresizingMaskIntoConstraints = false

  • 其次:为图表设置translatesAutoresizingMaskIntoConstraints = false。然后将其添加到容器或滚动视图中。并在其超级视图中设置其约束!(如果图表像标签一样动态调整大小,您只需要一个 x 和一个 y 约束,否则请确保高度和宽度也可以从您的约束中计算出来。)。如果您希望图表在滚动视图中水平居中。然后设置chart.centerXanchor.constraint(equalTo: scrollView.centerXanchor).isActive = truechart.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.
    
    }
    

这对你有帮助吗?


推荐阅读