UIScrollView 项目没有从后台移动

Posted 2023-03-15

【中文标题】UIScrollView 项目没有从后台移动

【英文标题】：UIScrollView Item not moving from the background

【发布时间】：2018-10-18 01:09:58

【问题描述】：

我设置了约束，以便在您加载时拥有一个占据屏幕的图表，但您可以向下滚动以查看更多信息。但是，我可以看到滚动条在移动，而图表没有移动！

var scrollView: UIScrollView 
    let scroll = UIScrollView()
    self.view.addSubview(scroll)
    scroll.snp.makeConstraints  (make) in
        make.edges.equalTo(self.view)
    
    return scroll


var contentView: UIView 
    let content = UIView()
    self.scrollView.addSubview(content)
    content.snp.makeConstraints  (make) in
        make.top.bottom.equalTo(self.scrollView)
        make.left.right.equalTo(self.view)
        make.width.equalTo(self.scrollView)
    
    // self.scrollView.contentSize = content.frame.size
    return content

override func viewDidLoad() 
    super.viewDidLoad()
    self.contentView.addSubview(self.chart)

    self.chart.snp.makeConstraints  (make) in
        // http://snapkit.io/docs/
        // https://github.com/SnapKit/SnapKit/issues/448
        make.top.equalTo(self.contentView)
        make.left.right.equalTo(self.contentView)
        make.height.equalTo(self.view).offset(-(self.tabBarController?.tabBar.frame.height)!)
    
    self.scrollView.contentSize = CGSize(width: self.view.frame.width, height: 3000) // Testing

所以滚动条会移动，但内容不会。

【问题讨论】：

你能张贴一个截图或一个小视频来说明什么是不工作的吗？

@CatalinaT。固定

【参考方案1】：

很遗憾，你做错了很多事情。

首先，当你使用这个结构时：

var scrollView: UIScrollView 
    let scroll = UIScrollView()
    self.view.addSubview(scroll)
    scroll.snp.makeConstraints  (make) in
        make.edges.equalTo(self.view)
    
    return scroll

每次你引用scrollView你正在创建另一个滚动视图的实例。运行您的代码，并使用 Debug View Hierarchy，您将得到以下结果：

red 视图是滚动视图，blue 视图是内容视图。如您所见，这绝对不是您想要的。

下面是一个示例，说明您可以如何做您想做的事情：

class ViewController: UIViewController 

    var scrollView: UIScrollView = 
        let scroll = UIScrollView()
        scroll.backgroundColor = .red
        return scroll

    ()

    var contentView: UIView  = 
        let content = UIView()
        content.backgroundColor = .blue
        return content
    ()

    var chart: UILabel = 
        let v = UILabel()
        v.numberOfLines = 0
        v.text = "This is the\nChart View"
        v.backgroundColor = .cyan
        v.textAlignment = .center
        return v
    ()

    var bottomLabel: UILabel = 
        let v = UILabel()
        v.text = "The Bottom Label"
        v.backgroundColor = .yellow
        v.textAlignment = .center
        return v
    ()

    override func viewDidLoad() 
        super.viewDidLoad()

        // add scrollView
        self.view.addSubview(scrollView)

        // constrain to safe area (so it doesn't extend below the tab bar)
        scrollView.snp.makeConstraints  (make) in
            make.edges.equalTo(self.view.safeAreaLayoutGuide)
        

        // add contentView to scrollView
        self.scrollView.addSubview(contentView)

        // constrain all 4 edges to scrollView
        // this will allow auto-layout to control / define the .contentSize
        contentView.snp.makeConstraints  (make) in
            make.edges.equalTo(self.scrollView)
        

        // constrain contentView's width to scrollView's width
        // but we *don't* constrain its height
        contentView.snp.makeConstraints  (make) in
            make.width.equalTo(self.scrollView)
        

        // add the chart to contentView
        self.contentView.addSubview(self.chart)

        // constrain chart to top, left and right of contentView
        // constrain its height to scrollView's height (so it initially fills the visible area
        chart.snp.makeConstraints  (make) in
            make.top.equalTo(self.contentView)
            make.left.right.equalTo(self.contentView)
            make.height.equalTo(self.scrollView)
        

        // now, we'll add a label to scrollView
        self.contentView.addSubview(self.bottomLabel)

        // constrain the label left and right with 20-pts, and a height of 40
        bottomLabel.snp.makeConstraints  (make) in
            make.left.equalTo(self.contentView).offset(20)
            make.right.equalTo(self.contentView).offset(-20)
            make.height.equalTo(40)
        

        // constrain the label's TOP 20-pts below the BOTTOM of chart view
        bottomLabel.snp.makeConstraints  (make) in
            make.top.equalTo(self.chart.snp.bottom).offset(20)
        

        // constrain the BOTTOM of the label 20-pts from the bottom of contentView
        bottomLabel.snp.makeConstraints  (make) in
            make.bottom.equalTo(self.contentView).offset(-20)
        

        // with those constraints, contentView's height is now:
        // chart's height + 20 + label's height + 20
        // and because contentView's bottom is constrained to scrollView's bottom,
        // that becomes scrollView's contentSize

    

我添加了一个UILabel 作为chart 视图，并在其下方添加了另一个标签来显示如何使用自动布局来定义滚动内容。

初始视图：

向上滚动：

以及生成的视图层次结构：

我在代码中包含的 cmets 应该阐明它是如何以及为什么这样做的。

【讨论】：

很棒的答案！非常感谢。

提示：您可以将所有约束合并到一个 make 循环中。

是的，您可以将它们组合起来。但是，特别是在刚刚学习时，将事物分开（以及清晰的 cmets）会很有帮助，以便更容易理解我们在做什么以及为什么这样做。

为什么需要顶部和底部约束？为什么我不能只包括一个顶部和高度。我试过了，它没有用。

具体有哪些？