为什么这个 ScrollView 不显示 subview ？

Question

以编程方式使用 ScrollView 进行测试，但无法理解为什么这不起作用。 Logic 希望我向主视图添加一个 ScrollView ，然后将其用作添加到其中的所有 subview 的引用。

let myView = UIView()
let myScroll = UIScrollView()

 override func viewDidLoad() {
        super.viewDidLoad()

        myScroll.translatesAutoresizingMaskIntoConstraints = false
        myScroll.backgroundColor = UIColor.cyan
        self.view.addSubview(myScroll)

        myScroll.leadingAnchor.constraint(equalTo: self.view.leadingAnchor, constant: 10).isActive = true
        myScroll.rightAnchor.constraint(equalTo: self.view.rightAnchor, constant: -10).isActive = true
        myScroll.topAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.topAnchor, constant: 10).isActive = true
        myScroll.bottomAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.bottomAnchor, constant: -10).isActive = true

        drawView(supVi: myScroll, addedVi: myView, color4View: .red, leading: 10, right: -10, top: 10, hei: -10)

    }

    func drawView(supVi: UIView, addedVi: UIView, color4View: UIColor, leading: CGFloat, right: CGFloat, top: CGFloat, hei: CGFloat) {

        supVi.addSubview(addedVi)
        addedVi.translatesAutoresizingMaskIntoConstraints = false
        addedVi.backgroundColor = color4View

        addedVi.leadingAnchor.constraint(equalTo: supVi.leadingAnchor, constant: leading).isActive = true
        addedVi.topAnchor.constraint(equalTo: supVi.topAnchor, constant: top).isActive = true
        addedVi.rightAnchor.constraint(equalTo: supVi.rightAnchor, constant: right).isActive = true
        addedVi.heightAnchor.constraint(equalToConstant: hei).isActive = true


    }

Answer 1

两个观察结果:

1. 您将高度限制设置为 -10。这没有任何意义。我相信您打算设置底部约束，而不是高度。

2. 您正在设置 ScrollView subview 的约束，但这不会设置 subview 的大小。这些约束将用于设置 ScrollView 的 contentSize(并且您的 subview 可能最终得到 CGRect 为 .zero)。

   如果您点击 ，“调试 View 层次结构”按钮，然后导航到运行时问题，您将看到“内容大小不明确”警告。

   

   您需要添加规定 subview 大小的约束。考虑:

   let myView = UIView()
   let myScroll = UIScrollView()
   
   override func viewDidLoad() {
       super.viewDidLoad()
   
       myScroll.translatesAutoresizingMaskIntoConstraints = false
       myScroll.backgroundColor = .cyan
       view.addSubview(myScroll)
   
       NSLayoutConstraint.activate([
           myScroll.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 10),
           myScroll.rightAnchor.constraint(equalTo: view.rightAnchor, constant: -10),
           myScroll.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 10),
           myScroll.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor, constant: -10)
       ])
   
       addView(myView, to: myScroll, color: .red, leading: 10, trailing: -10, top: 10, bottom: -10)
   }
   
   func addView(_ addedView: UIView, to superview: UIView, color: UIColor, leading: CGFloat, trailing: CGFloat, top: CGFloat, bottom: CGFloat) {
   
       superview.addSubview(addedView)
       addedView.translatesAutoresizingMaskIntoConstraints = false
       addedView.backgroundColor = color
   
       // these dictate the `contentSize` of the scroll view relative to the subview
   
       NSLayoutConstraint.activate([
           addedView.leadingAnchor.constraint(equalTo: superview.leadingAnchor, constant: leading),
           addedView.topAnchor.constraint(equalTo: superview.topAnchor, constant: top),
           addedView.trailingAnchor.constraint(equalTo: superview.trailingAnchor, constant: trailing),
           addedView.bottomAnchor.constraint(equalTo: superview.bottomAnchor, constant: bottom)
       ])
   
       // these define the size of the `addedView`
   
       NSLayoutConstraint.activate([
           addedView.widthAnchor.constraint(equalTo: view.widthAnchor, multiplier: 0.5),
           addedView.heightAnchor.constraint(equalTo: view.heightAnchor, multiplier: 2.0)
       ])
   }
   

   在 addView 方法中的最后两个约束中，我特意将 addedView 的宽度设置为 super View 的一半，将其高度设置为 super View 的两倍它的 super View ，所以你可以看到如何

   • 它滚动；
   • ScrollView 的 contentSize 是通过您在 addedView 和 ScrollView 之间定义的约束的魔力自动设置的；和
   • subview 的高度实际上是由我添加到原始代码片段中的这两个新约束决定的。
      

   现在，当然，我知道您不希望它的宽度是主视图的一半，高度是主视图的两倍，我只是建议您尝试一下，这样您就可以了解它是如何工作的。现在，您只需添加相对于主视图的 widthAnchor 和 heightAnchor 即可获得所需的效果。

   顺便说一句，不要摆脱 ScrollView 及其 subview 之间的约束，因为您也需要它们。但请添加上面代码片段末尾显示的这些附加约束。

3. 无关，我注意到你正在设置“前导”和“右” anchor 。如果您碰巧使用 RTL 语言，则“前导” anchor 和“右” anchor 是同一件事，并且您永远不会设置“尾随”或“左” anchor 。

   您确实想要设置“前导” anchor 和“尾随” anchor ，而不是“右” anchor 。始终使用“前导”和“尾随”(如果您出于某种原因不想支持 RTL 语言，则“左”和“右”)。