代码之家 › 专栏 › 技术社区 › Tigran

如何使用Swift 4中的锚以编程方式向uiscrollview添加视图

autolayout uiscrollview swift iphone ios

Tigran · 技术社区 · 6 年前

我对UIScrollView有些问题。尝试添加可滚动的是一些滑块,但没有工作。我想是因为我用锚来布置。请向我解释,我做错了什么。最后,我需要一个用户可以使用滑块的iPhone SE版本的可滚动区域。

    //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

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

1 回复 | 直到 6 年前

Rakesha Shastri 6 年前

当你使用 自动布局

topmostView.topAnchor 应该附加到 scrollView.topAnchor
bottommostView.bottomAnchor 应该附加到 scrollView.bottomAnchor
领先和落后 scrollView 应附加到任何具有宽度的视图。

您似乎已经将标签的前导和尾随附加到了scrollView,这在大多数情况下并不是您想要执行的操作,因为scrollView的宽度将仅与标签的宽度相同。
您似乎还在多个位置附加了scrollView前导和尾随,这将计算导致冲突的不同前导和尾随约束。(我很确定如果你查看你的日志,它会显示一些约束破坏)
您没有附加最顶部和最底部视图的顶部或底部这个 滚动视图 滚动视图 从上到下。

UIScrollView ,有一个虚拟视图(contentView),它将固定在 滚动视图 并具有指定的宽度。该视图的高度将根据添加到其中的视图动态计算。最上面视图的顶部与 contentView 的最底部视图的顶部和底部 内容视图 的底部。

repo 其中有一个极简主义的例子解释了使用自动布局。