如何在Swift 4中使用锚点以编程方式向UIScrolllView添加视图

Question

我在使用UIScrollView时遇到了一些问题。尝试为某些滑块添加可滚动的内容，但没有任何效果。我认为这是因为我正在使用锚点进行布局。请给我解释一下我在做什么错。最终，我需要为iPhone SE版本提供一个可滚动区域，用户可以使用滑块。

这是我的代码，在其中创建scrollview并在其上添加所有滑块，并将锚点与scrollview关联。

    //MARK: Scroll View
    scrollView = UIScrollView(frame: CGRect(x: 0, y: 0, width: view.bounds.width, height: 812))
    scrollView.backgroundColor = .gray
    scrollView.translatesAutoresizingMaskIntoConstraints = false
    view.addSubview(scrollView)
    scrollView.topAnchor.constraint(equalTo: collectionView.bottomAnchor, constant: 0).isActive = true
    scrollView.leftAnchor.constraint(equalTo: view.leftAnchor, constant: 0).isActive = true
    scrollView.rightAnchor.constraint(equalTo: view.rightAnchor, constant: 0).isActive = true
    scrollView.bottomAnchor.constraint(equalTo: view.bottomAnchor, constant: 0).isActive = true
    scrollView.contentSize = CGSize(width: view.bounds.width, height: 812)

    //MARK: Brightness Label
    brightnessLabel = UILabel()
    brightnessLabel.text = "Brightness"
    brightnessLabel.font = UIFont(name: "Avenir", size: 14)
    brightnessLabel.translatesAutoresizingMaskIntoConstraints = false
    scrollView.addSubview(brightnessLabel)
    brightnessLabel.topAnchor.constraint(equalTo: collectionView.bottomAnchor, constant: 10).isActive = true
    brightnessLabel.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor, constant: view.bounds.width / -2).isActive = true
    brightnessLabel.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor, constant: 10).isActive = true
    brightnessLabel.heightAnchor.constraint(equalToConstant: 25).isActive = true

    //MARK: Brightness Slider
    brightnessSlider = UISlider()
    brightnessSlider.setThumbImage(UIImage(named: "sliderThumb"), for: .normal)
    brightnessSlider.tintColor = .black
    brightnessSlider.minimumValue = 0
    brightnessSlider.maximumValue = 100
    brightnessSlider.translatesAutoresizingMaskIntoConstraints = false
    brightnessSlider.setValue(50, animated: true)
    scrollView.addSubview(brightnessSlider)
    brightnessSlider.topAnchor.constraint(equalTo: brightnessLabel.bottomAnchor, constant: 5).isActive = true
    brightnessSlider.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor, constant: -10).isActive = true
    brightnessSlider.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor, constant: 10).isActive = true
    brightnessSlider.heightAnchor.constraint(equalToConstant: 25).isActive = true

    //MArk: Brightness Value Label
    brightnessValueLabel = UILabel()
    brightnessValueLabel.text = "50"
    brightnessValueLabel.font = UIFont(name: "Avenir", size: 14)
    brightnessValueLabel.translatesAutoresizingMaskIntoConstraints = false
    scrollView.addSubview(brightnessValueLabel)
    brightnessValueLabel.topAnchor.constraint(equalTo: collectionView.bottomAnchor, constant: 10).isActive = true
    brightnessValueLabel.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor, constant: -10).isActive = true
    brightnessValueLabel.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor, constant:  view.bounds.width - 30).isActive = true
    brightnessValueLabel.heightAnchor.constraint(equalToConstant: 25).isActive = true

    //MARK: Contrast Label
    contrastLabel = UILabel()
    contrastLabel.text = "Contrast"
    contrastLabel.font = UIFont(name: "Avenir", size: 14)
    contrastLabel.translatesAutoresizingMaskIntoConstraints = false
    scrollView.addSubview(contrastLabel)
    contrastLabel.topAnchor.constraint(equalTo: brightnessSlider.bottomAnchor, constant: 10).isActive = true
    contrastLabel.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor, constant: view.bounds.width / -2).isActive = true
    contrastLabel.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor, constant: 10).isActive = true
    contrastLabel.heightAnchor.constraint(equalToConstant: 25).isActive = true

    //MARK: Contrast Slider
    contrastSlider = UISlider()
    contrastSlider.setThumbImage(UIImage(named: "sliderThumb"), for: .normal)
    contrastSlider.tintColor = .black
    contrastSlider.minimumValue = 0
    contrastSlider.maximumValue = 100
    contrastSlider.translatesAutoresizingMaskIntoConstraints = false
    contrastSlider.setValue(50, animated: true)
    scrollView.addSubview(contrastSlider)
    contrastSlider.topAnchor.constraint(equalTo: contrastLabel.bottomAnchor, constant: 5).isActive = true
    contrastSlider.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor, constant: -10).isActive = true
    contrastSlider.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor, constant: 10).isActive = true
    contrastSlider.heightAnchor.constraint(equalToConstant: 25).isActive = true

    //MArk: Contrast Value Label
    contrastValueLabel = UILabel()
    contrastValueLabel.text = "50"
    contrastValueLabel.font = UIFont(name: "Avenir", size: 14)
    contrastValueLabel.translatesAutoresizingMaskIntoConstraints = false
    scrollView.addSubview(contrastValueLabel)
    contrastValueLabel.topAnchor.constraint(equalTo: brightnessSlider.bottomAnchor, constant: 10).isActive = true
    contrastValueLabel.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor, constant: -10).isActive = true
    contrastValueLabel.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor, constant:  view.bounds.width - 30).isActive = true
    contrastValueLabel.heightAnchor.constraint(equalToConstant: 25).isActive = true

    //MARK: Saturation Label
    saturationLabel = UILabel()
    saturationLabel.text = "Saturation"
    saturationLabel.font = UIFont(name: "Avenir", size: 14)
    saturationLabel.translatesAutoresizingMaskIntoConstraints = false
    scrollView.addSubview(saturationLabel)
    saturationLabel.topAnchor.constraint(equalTo: contrastSlider.bottomAnchor, constant: 10).isActive = true
    saturationLabel.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor, constant: view.bounds.width / -2).isActive = true
    saturationLabel.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor, constant: 10).isActive = true
    saturationLabel.heightAnchor.constraint(equalToConstant: 25).isActive = true

    //MARK: Saturation Slider
    saturationSlider = UISlider()
    saturationSlider.setThumbImage(UIImage(named: "sliderThumb"), for: .normal)
    saturationSlider.tintColor = .black
    saturationSlider.minimumValue = 0
    saturationSlider.maximumValue = 100
    saturationSlider.translatesAutoresizingMaskIntoConstraints = false
    saturationSlider.setValue(50, animated: true)
    scrollView.addSubview(saturationSlider)
    saturationSlider.topAnchor.constraint(equalTo: saturationLabel.bottomAnchor, constant: 5).isActive = true
    saturationSlider.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor, constant: -10).isActive = true
    saturationSlider.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor, constant: 10).isActive = true
    saturationSlider.heightAnchor.constraint(equalToConstant: 25).isActive = true

    //MArk: Saturation Value Label
    saturationValueLabel = UILabel()
    saturationValueLabel.text = "50"
    saturationValueLabel.font = UIFont(name: "Avenir", size: 14)
    saturationValueLabel.translatesAutoresizingMaskIntoConstraints = false
    scrollView.addSubview(saturationValueLabel)
    saturationValueLabel.topAnchor.constraint(equalTo: contrastSlider.bottomAnchor, constant: 10).isActive = true
    saturationValueLabel.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor, constant: -10).isActive = true
    saturationValueLabel.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor, constant:  view.bounds.width - 30).isActive = true
    saturationValueLabel.heightAnchor.constraint(equalToConstant: 25).isActive = true

    //MARK: Noise Label
    noiseLabel = UILabel()
    noiseLabel.text = "Noise"
    noiseLabel.font = UIFont(name: "Avenir", size: 14)
    noiseLabel.translatesAutoresizingMaskIntoConstraints = false
    scrollView.addSubview(noiseLabel)
    noiseLabel.topAnchor.constraint(equalTo: saturationSlider.bottomAnchor, constant: 10).isActive = true
    noiseLabel.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor, constant: view.bounds.width / -2).isActive = true
    noiseLabel.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor, constant: 10).isActive = true
    noiseLabel.heightAnchor.constraint(equalToConstant: 25).isActive = true

    //MARK: Noise Slider
    noiseSlider = UISlider()
    noiseSlider.setThumbImage(UIImage(named: "sliderThumb"), for: .normal)
    noiseSlider.tintColor = .black
    noiseSlider.minimumValue = 0
    noiseSlider.maximumValue = 100
    noiseSlider.translatesAutoresizingMaskIntoConstraints = false
    noiseSlider.setValue(50, animated: true)
    scrollView.addSubview(noiseSlider)
    noiseSlider.topAnchor.constraint(equalTo: noiseLabel.bottomAnchor, constant: 5).isActive = true
    noiseSlider.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor, constant: -10).isActive = true
    noiseSlider.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor, constant: 10).isActive = true
    noiseSlider.heightAnchor.constraint(equalToConstant: 25).isActive = true

    //MArk: Noise Value Label
    noiseValueLabel = UILabel()
    noiseValueLabel.text = "50"
    noiseValueLabel.font = UIFont(name: "Avenir", size: 14)
    noiseValueLabel.translatesAutoresizingMaskIntoConstraints = false
    scrollView.addSubview(noiseValueLabel)
    noiseValueLabel.topAnchor.constraint(equalTo: saturationSlider.bottomAnchor, constant: 10).isActive = true
    noiseValueLabel.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor, constant: -10).isActive = true
    noiseValueLabel.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor, constant:  view.bounds.width - 30).isActive = true
    noiseValueLabel.heightAnchor.constraint(equalToConstant: 25).isActive = true

如果有人想知道，这就是我的视图层次结构，实际上我需要在滚动视图上的所有项目都在滚动视图上。我在滚动视图中添加了灰色以使其可见。

Answer 1

当您使用 autolayout 时，无需指定contentSize，它将从子视图中推断出来。条件是：

• neurodsp应该附加到topmostView.topAnchor
• scrollView.topAnchor应该附加到bottommostView.bottomAnchor
• scrollView.bottomAnchor的前导和尾随应附加到任何具有宽度的视图。

我在您的代码中看到了一些问题。

• 您似乎已经将标签的开头和结尾附加到了scrollView上，这并不是您大多数时候想要做的，因为scrollView的宽度将仅与标签的宽度一样。

• 您似乎还已经在多个位置附加了scrollView的前导和尾随，这将计算导致冲突的不同前导和尾随约束。 （我非常确定，如果您检查您的日志，它将显示一些约束突破）

• 您尚未在scrollView的顶部和底部内部内的顶部和底部视图的顶部或底部附加<< / p>

Apple建议在使用scrollView时，有一个虚拟视图（contentView），该视图将固定在scrollView的顶部，顶部，底部，底部并具有指定的宽度。该视图的高度将根据您添加到该视图的视图进行动态计算。附加到UIScrollView的顶部的顶部视图的顶部和附加到scrollView的底部的底部视图的底部的相同概念。

您可以检查我的github repo，那里有一个简单的示例，该示例说明了自动布局的contentView。