IOS 个图表在 ScrollView 中

IOS charts in ScrollView

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

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

速解

  • 您没有在 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.
    
    }
    

这对你有帮助吗?