使用布局约束以编程方式将视图添加到滚动视图

Posted 2023-02-23

【中文标题】使用布局约束以编程方式将视图添加到滚动视图

【英文标题】：Hot to add a View to a Scrollview programmatically using layout constraints

【发布时间】：2016-11-10 11:21:33

【问题描述】：

我正在尝试以编程方式在 UIScrollView 中插入一个视图，但它没有出现在这里是我的代码：

mainScrollView.translatesAutoresizingMaskIntoConstraints = false


        self.view.addSubview(mainScrollView)

        //Add Trailing
        let trailingConstraint = NSLayoutConstraint(item: mainScrollView, attribute: .trailing, relatedBy: .equal, toItem: self.view, attribute: .trailing, multiplier: 1, constant: 0)
        self.view.addConstraint(trailingConstraint)

        //Add Leading
        let leadingConstraint = NSLayoutConstraint(item: mainScrollView, attribute: .leading, relatedBy: .equal, toItem: self.view, attribute: .leading, multiplier: 1, constant: 0)
        self.view.addConstraint(leadingConstraint)

        //Add Top
        let topConstraint = NSLayoutConstraint(item: mainScrollView, attribute: .top, relatedBy: .equal, toItem: self.view, attribute: .top, multiplier: 1, constant: 0)
        self.view.addConstraint(topConstraint)

        //Add Bottom
        let bottomConstraint = NSLayoutConstraint(item: mainScrollView, attribute: .bottom, relatedBy: .equal, toItem: self.view, attribute: .bottom, multiplier: 1, constant: 0)
        self.view.addConstraint(bottomConstraint)

        let contentView = UIView()
        contentView.translatesAutoresizingMaskIntoConstraints = false
        contentView.backgroundColor = .blue
        mainScrollView.addSubview(contentView)

        //Add Trailing
        let trailingConstraintContent = NSLayoutConstraint(item: contentView, attribute: .trailing, relatedBy: .equal, toItem: mainScrollView, attribute: .trailing, multiplier: 1, constant: 0)
        mainScrollView.addConstraint(trailingConstraintContent)

        //Add Leading
        let leadingConstraintContent = NSLayoutConstraint(item: contentView, attribute: .leading, relatedBy: .equal, toItem: mainScrollView, attribute: .leading, multiplier: 1, constant: 0)
        mainScrollView.addConstraint(leadingConstraintContent)

        //Add Top
        let topConstraintContent = NSLayoutConstraint(item: contentView, attribute: .top, relatedBy: .equal, toItem: mainScrollView, attribute: .top, multiplier: 1, constant: 0)
        mainScrollView.addConstraint(topConstraintContent)

        //Add Bottom
        let bottomConstraintContent = NSLayoutConstraint(item: contentView, attribute: .bottom, relatedBy: .equal, toItem: mainScrollView, attribute: .bottom, multiplier: 1, constant: 0)
        mainScrollView.addConstraint(bottomConstraintContent)

第一个 ScrollView 被插入是因为我添加了背景颜色并且我可以看到它，但是我看不到添加为背景颜色蓝色的 contentview。

有什么帮助吗？

更新

我尝试了以下方法，但没有成功：

mainScrollView.translatesAutoresizingMaskIntoConstraints = false
        let contentView = UIView()
        contentView.translatesAutoresizingMaskIntoConstraints = false

        mainScrollView.backgroundColor = .red
        contentView.backgroundColor = .blue

        self.view.addSubview(mainScrollView)
        mainScrollView.addSubview(contentView)

        let viewsDictionary = ["mainScrollView": mainScrollView, "contentView": contentView]

        let mainScrollViewVerticalConstraint = NSLayoutConstraint.constraints(withVisualFormat: "V:|[mainScrollView]|", options: [], metrics: nil, views: viewsDictionary)
        let mainScrollViewHorizontalConstraint = NSLayoutConstraint.constraints(withVisualFormat: "H:|[mainScrollView]|", options: [], metrics: nil, views: viewsDictionary)
        self.view.addConstraints(mainScrollViewVerticalConstraint)
        self.view.addConstraints(mainScrollViewHorizontalConstraint)

        let contentViewVerticalConstraint = NSLayoutConstraint.constraints(withVisualFormat: "V:|[contentView]|", options: [], metrics: nil, views: viewsDictionary)
        let contentViewHorizontalConstraint = NSLayoutConstraint.constraints(withVisualFormat: "H:|[contentView]|", options: [], metrics: nil, views: viewsDictionary)
        mainScrollView.addConstraints(contentViewVerticalConstraint)
        mainScrollView.addConstraints(contentViewHorizontalConstraint)

【问题讨论】：

我认为你应该为 contentView 添加宽度和高度

但是，如果我说 contentview 的特征、引导和上下，它应该获得 scrollView 的所有空间吗？

是的，但还不够。 scrollView 需要知道内容的宽度和高度才能滚动。让我们设置scrollView的contentSize或者设置contentView的宽高

我的回答有帮助吗？

【参考方案1】：

添加子视图时要记住的重要一点是固定它们以使自动布局能够评估高度，这是因为滚动视图通过确定子视图的高度总和来确定内容大小（在垂直的情况下）。 所以你应该在 VFL 中指定高度。例如。

let contentViewVerticalConstraint=NSLayoutConstraint.constraints(withVisualFormat: "V:|[contentView(300)]", options: [], metrics: nil, views: viewsDictionary)

【讨论】：

我尝试添加它，但我看不到里面的其他颜色视图：S

【参考方案2】：

使用 .xib 文件创建自定义视图 为 .xib 中的自定义视图子组件应用约束（自动布局）

创建自定义视图即时

MyView *myview = [[[NSBundle mainBundle] loadNibNamed:@"nibName" owner:nil options:nil] objectAtIndex:0];

将其屏幕宽度的框架设置为

CGRect screenSize = [UIScreen mainScreen].bounds.size; myView = CGRectMake(0.0, 0.0, screenSize.width, 100.0);

添加到父视图

[parentView addSubView:myView];

【讨论】：

我需要自动布局和编程，视图是从 json 生成的。