UIScrollView 在 Autolayout 或缩放后停止滚动

Question

我有以下代码来设置 UIScrollView 的子视图。我首先创建了一个名为 MyScrollView 的 UIScrollView 子类。然后我添加一个名为 contentView 的视图作为子视图。我将所有其他视图添加到滚动视图作为此 contentView 的子视图。问题是在使用自动布局约束设置以下代码后，scrollView 不滚动。

public class MyScrollView:UIScrollView {


  private var contentView:UIView!

   override init(frame: CGRect) {
    super.init(frame: frame)
    self.translatesAutoresizingMaskIntoConstraints = false
    self.isScrollEnabled = true
    self.isDirectionalLockEnabled = true
    self.showsHorizontalScrollIndicator = true
    self.showsVerticalScrollIndicator = false
    self.decelerationRate = .normal
    self.delaysContentTouches = false
    self.bouncesZoom = true
    
    setupSubviews()
}


  private func setupSubviews() {

     contentView = UIView()
    contentView.backgroundColor = UIColor.clear
    contentView.translatesAutoresizingMaskIntoConstraints = false
    contentView.isUserInteractionEnabled = true
    
    self.addSubview(contentView)
    
    contentView.leadingAnchor.constraint(equalTo: self.leadingAnchor).isActive = true
    contentView.trailingAnchor.constraint(equalTo: self.trailingAnchor).isActive = true
    contentView.topAnchor.constraint(equalTo: self.topAnchor).isActive = true
    contentView.bottomAnchor.constraint(equalTo: self.bottomAnchor).isActive = true
    contentView.widthAnchor.constraint(equalTo: self.widthAnchor, multiplier: CGFloat(19), constant: CGFloat(5)).isActive = true
    contentView.heightAnchor.constraint(equalTo: self.heightAnchor, multiplier: 2.0, constant: CGFloat(5)).isActive = true
    
   // self.contentSize = CGSize(width: 10000, height: 2*frame.height)


    let subviewWidth = CGFloat(450)
    let subviewHeight = CGFloat(20)

    //Add other subviews to contentView
    (0...4).compactMap { i in
        (0...19).compactMap { j in
             let x = CGFloat(j)*(subviewWidth + 5.0) + 5.0
            let y = CGFloat(i)*(subviewHeight + 5.0) + 5.0
             let subview = UIView(frame: CGRect(x: x, y: y, width: subviewWidth, height: subviewHeight))
                contentView.addSubview(subview)
      }
  }

    

问题是当自动布局约束如上所述设置时，滚动视图不会滚动。如果没有设置约束，它会滚动，但在缩放后，滚动会再次被禁用。我只是在滚动视图委托中设置了这个。

  public func viewForZooming(in scrollView: UIScrollView) -> UIView? {
    return scrollView.subviews.first //contentView
}

Answer 1

对于您的方法...

您希望将contentView 限制在滚动视图的内容布局指南中。这将自动确定“可滚动”区域。

由于您没有为 contentView 的子视图使用自动布局，因此每次添加新子视图时都需要更新 .contentView 宽度和高度约束。

这是一个例子。我们将创建一个MyScrollView，距离顶部/前导/尾随 40 分，高度为 240 分。

子视图有绿色背景，内容视图有蓝色背景，滚动视图有红色背景（这样我们可以很容易地看到框架）。

我们将从一个子视图开始，以便轻松查看发生的情况。一开始，只有一个小子视图，不会滚动。

每次点击任意位置时，我们都会向 contentView 添加一个新的 Subview，背景为黄色，并根据需要更新 contentView 的宽度和高度约束。您会看到蓝色内容视图变大以匹配子视图。一旦子视图导致内容视图大于滚动视图的宽度或高度，滚动就会自动进行。

public class MyScrollView: UIScrollView {
    
    private var contentView:UIView!
    
    // contentView's Width and Height constraints
    //  we'll update the .constant values when we add subviews
    private var cvWidthConstraint: NSLayoutConstraint!
    private var cvHeightConstraint: NSLayoutConstraint!
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        commonInit()
    }
    public required init?(coder: NSCoder) {
        super.init(coder: coder)
        commonInit()
    }
    func commonInit() -> Void {
        self.translatesAutoresizingMaskIntoConstraints = false
        self.isScrollEnabled = true
        self.isDirectionalLockEnabled = true
        self.showsHorizontalScrollIndicator = true
        self.showsVerticalScrollIndicator = false
        self.decelerationRate = .normal
        self.delaysContentTouches = false
        self.bouncesZoom = true
        
        setupSubviews()
        
    }
    
    private func setupSubviews() {
        
        contentView = UIView()
        contentView.backgroundColor = UIColor.clear
        contentView.translatesAutoresizingMaskIntoConstraints = false
        contentView.isUserInteractionEnabled = true
        
        self.addSubview(contentView)
        
        // constrain contentView to scroll view's Content Layout Guide
        //  this determines the "scrollable" area
        contentView.leadingAnchor.constraint(equalTo: self.contentLayoutGuide.leadingAnchor).isActive = true
        contentView.trailingAnchor.constraint(equalTo: self.contentLayoutGuide.trailingAnchor).isActive = true
        contentView.topAnchor.constraint(equalTo: self.contentLayoutGuide.topAnchor).isActive = true
        contentView.bottomAnchor.constraint(equalTo: self.contentLayoutGuide.bottomAnchor).isActive = true

        // create contentView's Width and Height constraints
        cvWidthConstraint = contentView.widthAnchor.constraint(equalToConstant: 0.0)
        cvHeightConstraint = contentView.heightAnchor.constraint(equalToConstant: 0.0)
        
        // activate them
        cvWidthConstraint.isActive = true
        cvHeightConstraint.isActive = true
        
        //Add other subviews to contentView
        
        // we'll start with ONE subview, so we can easily see what's happening
        let subviewWidth = CGFloat(240)
        let subviewHeight = CGFloat(20)

        let subview = UILabel(frame: CGRect(x: 5, y: 5, width: subviewWidth, height: subviewHeight))
        subview.textAlignment = .center
        subview.text = "First"
        subview.backgroundColor = .green
        contentView.addSubview(subview)

        // so we can see the frames
        self.backgroundColor = .red
        self.contentView.backgroundColor = .blue
        
        // update the contentView constraints
        updateContent()
    }
    
    private func updateContent() -> Void {
        // array of subviews
        let views = contentView.subviews
        // get the
        //  max Y of the subview frames
        //  max X of the subview frames
        guard let maxYValue = views.lazy.map({ $0.frame.maxY }).max(),
              let maxXValue = views.lazy.map({ $0.frame.maxX }).max()
        else { return }
        
        // update contentView Width and Height constraints
        cvWidthConstraint.constant = maxXValue + 5.0
        cvHeightConstraint.constant = maxYValue + 5.0
    }
    
    func addLabel(frame _frame: CGRect, text: String) -> Void {

        // add a new subview
        let subview = UILabel(frame: _frame)
        subview.textAlignment = .center
        subview.text = text
        subview.backgroundColor = .yellow
        contentView.addSubview(subview)
        
        // update the contentView constraints
        updateContent()

    }
}


class ExampleViewController: UIViewController {
    
    let myScrollView = MyScrollView()
    
    var count: Int = 1
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        view.addSubview(myScrollView)
        
        let g = view.safeAreaLayoutGuide
        
        NSLayoutConstraint.activate([

            // constrain custom scroll view Top / Leading / Trailing
            //  40-pts from the safe-area edges
            myScrollView.topAnchor.constraint(equalTo: g.topAnchor, constant: 40.0),
            myScrollView.leadingAnchor.constraint(equalTo: g.leadingAnchor, constant: 40.0),
            myScrollView.trailingAnchor.constraint(equalTo: g.trailingAnchor, constant: -40.0),
            
            // scroll view Height: 240-pts
            myScrollView.heightAnchor.constraint(equalToConstant: 240.0),
        ])
        
        // add tap gesture recognizer so we can add a new subview
        //  every time we tap
        let t = UITapGestureRecognizer(target: self, action: #selector(self.testAddSubview))
        view.addGestureRecognizer(t)
    }
    
    @objc func testAddSubview() -> Void {
        let s = "New Subview \(count)"
        let x: CGFloat = CGFloat(count) * 60.0
        let y: CGFloat = CGFloat(count) * 35.0
        myScrollView.addLabel(frame: CGRect(x: x, y: y, width: 200, height: 30), text: s)
        count += 1
    }
}

启动时 - 一个子视图 - 无滚动：

添加一个新的子视图后 - 蓝色内容视图更大，但不足以滚动：

添加 4 个新的子视图后 - 现在我们可以滚动了：