垂直滚动视图不滚动（无情节提要）

Question

我需要帮助来创建不带故事板的滚动视图。这是我设置滚动视图的代码；我没有设置滚动视图的 contentSize，因为我希望滚动视图的内容大小是动态的，具体取决于 TextView 中的文本量。相反，我所做的是尝试将 'contentView' 添加到滚动视图并将我所有的 UI 元素添加到 contentView 中。任何帮助将不胜感激。

import Foundation
import UIKit
import UITextView_Placeholder

class ComposerVC: UIViewController {
  
  private var scrollView: UIScrollView = {
    let scrollView = UIScrollView(frame: UIScreen.main.bounds)
    scrollView.translatesAutoresizingMaskIntoConstraints = false
    return scrollView
  }()
  
  private var contentView: UIView = {
    let content = UIView()
    content.translatesAutoresizingMaskIntoConstraints = false
    return content
  }()
  
  private var title: UITextView = {
    let title = UITextView()
    title.translatesAutoresizingMaskIntoConstraints = false
    title.placeholder = "Untitled"
    title.textColor = UIColor(hexString: "#50E3C2")
    title.font = UIFont(name: "Rubik-BoldItalic", size: 32)
    title.backgroundColor = .clear
    title.isScrollEnabled = false
    return title
  }()
  
  private var divider: UIView = {
    let divider = UIView()
    divider.translatesAutoresizingMaskIntoConstraints = false
    divider.backgroundColor = UIColor(hexString: "#50E3C2")
    return divider
  }()
  
  private var content: UITextView = {
    let title = UITextView()
    title.translatesAutoresizingMaskIntoConstraints = false
    title.placeholder = "Begin writing here..."
    title.textColor = .white
    title.font = UIFont(name: "Avenir-Book", size: 15)
    title.backgroundColor = .clear
    title.isScrollEnabled = false
    return title
  }()
  
  override func viewDidLoad() {
    setupUI()
    setupUIConstraints()
    title.delegate = self
  }
  
  private func setupUI() {
    view.backgroundColor = UIColor(hexString: "#131415")
    view.addSubview(scrollView)
    scrollView.addSubview(contentView)
    contentView.addSubview(title)
    contentView.addSubview(divider)
    contentView.addSubview(content)
  }
  
  private func setupUIConstraints() {
    
    scrollView.leadingAnchor.constraint(equalTo: view.leadingAnchor).isActive = true
    scrollView.topAnchor.constraint(equalTo: view.topAnchor).isActive = true
    scrollView.trailingAnchor.constraint(equalTo: view.trailingAnchor).isActive = true
    scrollView.bottomAnchor.constraint(equalTo: view.bottomAnchor).isActive = true
    
    contentView.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor).isActive = true
    contentView.topAnchor.constraint(equalTo: scrollView.topAnchor).isActive = true
    contentView.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor).isActive = true
    contentView.bottomAnchor.constraint(equalTo: scrollView.bottomAnchor).isActive = true
    contentView.widthAnchor.constraint(equalTo: view.widthAnchor).isActive = true
    
    title.topAnchor.constraint(equalTo: contentView.topAnchor, constant: 95).isActive = true
    title.leftAnchor.constraint(equalTo: contentView.leftAnchor, constant: 35).isActive = true
    title.rightAnchor.constraint(equalTo: contentView.rightAnchor, constant: -35).isActive = true
    
    divider.topAnchor.constraint(equalTo: title.bottomAnchor, constant: 15).isActive = true
    divider.centerXAnchor.constraint(equalTo: contentView.centerXAnchor).isActive = true
    divider.heightAnchor.constraint(equalToConstant: 1).isActive = true
    divider.widthAnchor.constraint(equalTo: contentView.widthAnchor, multiplier: 0.8).isActive = true
    
    content.topAnchor.constraint(equalTo: divider.bottomAnchor, constant: 15).isActive = true
    content.leftAnchor.constraint(equalTo: contentView.leftAnchor, constant: 35).isActive = true
    content.rightAnchor.constraint(equalTo: contentView.rightAnchor, constant: -35).isActive = true
  }
}

extension ComposerVC: UITextViewDelegate {
  func textViewDidChange(_ textView: UITextView) {
    let fixedWidth = textView.frame.size.width
    let newSize = textView.sizeThatFits(CGSize(width: fixedWidth, height: CGFloat.greatestFiniteMagnitude))
    textView.frame.size = CGSize(width: max(newSize.width, fixedWidth), height: newSize.height)
  }
}

Answer 1

假设您使用的是 iOS 11+，您的 contentView 应该将其锚点限制在 scrollView 的 contentLayoutGuide 上。像这样：

contentView
    .leadingAnchor
    .constraint(equalTo: scrollView.contentLayoutGuide.leadingAnchor).isActive = true
contentView
    .topAnchor
    .constraint(equalTo: scrollView.contentLayoutGuide.topAnchor).isActive = true
contentView
    .trailingAnchor
    .constraint(equalTo: scrollView.contentLayoutGuide.trailingAnchor).isActive = true
contentView
    .bottomAnchor
    .constraint(equalTo: scrollView.contentLayoutGuide.bottomAnchor).isActive = true

另外，它的宽度应该限制在 scrollView 的 frameLayoutGuide 而不是视图的宽度，像这样：

contentView
.widthAnchor
.constraint(equalTo: scrollView.frameLayoutGuide.widthAnchor).isActive = true

这应该使 scrollView 检测到适合的内容大小。

Answer 2

一些提示：

不要对变量使用现有名称...您的代码 as-is、private var title: UITextView 会导致问题（title 已经是视图控制器属性）。
使用暗示对象的 var 名称...例如titleTextView 和 contentTextView 而不是 title 和 content
在开发过程中 - 特别是当您在布局时 - 为您的 UI 元素提供对比背景颜色，以便您可以在运行时轻松查看它们的框架。
当使用 code-created 视图时，设置 .clipsToBounds = true ...如果您没有看到您添加的任何子视图，您就知道框架/约束缺少一些东西。

我没有你的 UITextView_Placeholder 导入，但这应该不会影响这里的任何东西...

所以，首先，将您的 viewDidLoad() 更改为：

override func viewDidLoad() {
    setupUI()
    setupUIConstraints()
    titleTextView.delegate = self
    
    // contrasting colors during development
    scrollView.backgroundColor = .red
    titleTextView.backgroundColor = .yellow
    contentTextView.backgroundColor = .green
    divider.backgroundColor = .blue
    contentView.backgroundColor = .cyan
}

当你运行它时，你应该看到（滚动视图背景是红色的，并且没有占位符的东西）：

它 看起来 正确，只是没有 cyan-colored contentView.

现在，剪辑 contentView 的子视图：

private var contentView: UIView = {
    let content = UIView()
    content.translatesAutoresizingMaskIntoConstraints = false
    // add this line
    content.clipsToBounds = true
    return content
}()

结果：

所有东西都去哪儿了？好吧，我们没有看到青色 contentView 现在我们没有看到任何 subviews ... 如果我们使用 Debug View Hierarchy 我们可以发现 contentView 的高度为零。

通过限制 setupUIConstraints() 中第二个文本视图的底部来解决这个问题（我已将其重命名为 contentTextView 而不是 content）：

    contentTextView.bottomAnchor.constraint(equalTo: contentView.bottomAnchor, constant: -95).isActive = true

我们得到：

现在青色 contentView 的高度由其子视图的正确设置约束控制。

附带说明：在正确设置约束并禁用文本视图滚动的情况下，您不需要：

extension ComposerVC: UITextViewDelegate {
  //func textViewDidChange(_ textView: UITextView) {
  //...
  //}
}

文本视图会根据其文本自动调整自身大小：

这是完整的编辑代码：

class ComposerVC: UIViewController {
    
    private var scrollView: UIScrollView = {
        let scrollView = UIScrollView(frame: UIScreen.main.bounds)
        scrollView.translatesAutoresizingMaskIntoConstraints = false
        return scrollView
    }()
    
    private var contentView: UIView = {
        let content = UIView()
        content.translatesAutoresizingMaskIntoConstraints = false
        // add this line so we know if the constraints are set correctly
        content.clipsToBounds = true
        return content
    }()
    
    private var titleTextView: UITextView = {
        let title = UITextView()
        title.translatesAutoresizingMaskIntoConstraints = false
//      title.placeholder = "Untitled"
        title.textColor = UIColor(hexString: "#50E3C2")
        title.font = UIFont(name: "Rubik-BoldItalic", size: 32)
        title.backgroundColor = .clear
        title.isScrollEnabled = false
        return title
    }()
    
    private var divider: UIView = {
        let divider = UIView()
        divider.translatesAutoresizingMaskIntoConstraints = false
        divider.backgroundColor = UIColor(hexString: "#50E3C2")
        return divider
    }()
    
    private var contentTextView: UITextView = {
        let title = UITextView()
        title.translatesAutoresizingMaskIntoConstraints = false
//      title.placeholder = "Begin writing here..."
        title.textColor = .white
        title.font = UIFont(name: "Avenir-Book", size: 15)
        title.backgroundColor = .clear
        title.isScrollEnabled = false
        return title
    }()
    
    override func viewDidLoad() {
        setupUI()
        setupUIConstraints()
        titleTextView.delegate = self
        
        // contrasting colors during development
        scrollView.backgroundColor = .red
        titleTextView.backgroundColor = .yellow
        contentTextView.backgroundColor = .green
        divider.backgroundColor = .blue
        contentView.backgroundColor = .cyan
    }
    
    private func setupUI() {
        view.backgroundColor = UIColor(hexString: "#131415")
        view.addSubview(scrollView)
        scrollView.addSubview(contentView)
        contentView.addSubview(titleTextView)
        contentView.addSubview(divider)
        contentView.addSubview(contentTextView)
    }
    
    private func setupUIConstraints() {
        
        scrollView.leadingAnchor.constraint(equalTo: view.leadingAnchor).isActive = true
        scrollView.topAnchor.constraint(equalTo: view.topAnchor).isActive = true
        scrollView.trailingAnchor.constraint(equalTo: view.trailingAnchor).isActive = true
        scrollView.bottomAnchor.constraint(equalTo: view.bottomAnchor).isActive = true
        
        contentView.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor).isActive = true
        contentView.topAnchor.constraint(equalTo: scrollView.topAnchor).isActive = true
        contentView.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor).isActive = true
        contentView.bottomAnchor.constraint(equalTo: scrollView.bottomAnchor).isActive = true
        contentView.widthAnchor.constraint(equalTo: view.widthAnchor).isActive = true
        
        titleTextView.topAnchor.constraint(equalTo: contentView.topAnchor, constant: 95).isActive = true
        titleTextView.leftAnchor.constraint(equalTo: contentView.leftAnchor, constant: 35).isActive = true
        titleTextView.rightAnchor.constraint(equalTo: contentView.rightAnchor, constant: -35).isActive = true
        
        divider.topAnchor.constraint(equalTo: titleTextView.bottomAnchor, constant: 15).isActive = true
        divider.centerXAnchor.constraint(equalTo: contentView.centerXAnchor).isActive = true
        divider.heightAnchor.constraint(equalToConstant: 1).isActive = true
        divider.widthAnchor.constraint(equalTo: contentView.widthAnchor, multiplier: 0.8).isActive = true
        
        contentTextView.topAnchor.constraint(equalTo: divider.bottomAnchor, constant: 15).isActive = true
        contentTextView.leftAnchor.constraint(equalTo: contentView.leftAnchor, constant: 35).isActive = true
        contentTextView.rightAnchor.constraint(equalTo: contentView.rightAnchor, constant: -35).isActive = true
        
        contentTextView.bottomAnchor.constraint(equalTo: contentView.bottomAnchor, constant: -95).isActive = true
    
    }
}

extension ComposerVC: UITextViewDelegate {
//  func textViewDidChange(_ textView: UITextView) {
//      let fixedWidth = textView.frame.size.width
//      let newSize = textView.sizeThatFits(CGSize(width: fixedWidth, height: CGFloat.greatestFiniteMagnitude))
//      textView.frame.size = CGSize(width: max(newSize.width, fixedWidth), height: newSize.height)
//  }
}

垂直滚动视图不滚动（无情节提要）

Vertical ScrollView not scrolling (No Storyboard)

uiscrollview

ios

swift