ContentView 没有显示在 ScrollView 中

Question

我无法让我的ContentView显示在我的ScrollView中，我不知道我做错了什么使其不可见。 在下面的屏幕截图中，紫色视图是完美显示的ScrollView ，正如您将在我的代码中看到的那样，我的ContentView是红色的。 我试图将我的属性更改为lazy var以查看是否可行，但我仍然遇到同样的问题。 我是否在我的程序化 UI 中做错了什么以使我的ContentView不显示，或者我错过了什么？ 谢谢！

问题截图

FindEmployeeJobRequestController

// MARK: - Properties

lazy var jobInfoCardView: ShadowCardView = {
   let view = ShadowCardView()
   view.backgroundColor = .white
   view.addShadow()
   view.setHeight(height: 320)
   return view
}()
    
let scrollView: UIScrollView = {
   let sv = UIScrollView()
   sv.backgroundColor = .darkPurpleTint
   sv.isScrollEnabled = true
   return sv
}()
    
let contentView: UIView = {
   let view = UIView()
   view.backgroundColor = .red
   return view
}()

// MARK: - Helper Functions

fileprivate func configureUI() {

        view.addSubview(jobInfoCardView)
        jobInfoCardView.anchor(top: circularProgressView.bottomAnchor, left: view.leftAnchor, right: view.rightAnchor,
                               paddingTop: 52, paddingLeft: 24, paddingRight: 24)
        
        jobInfoCardView.addSubview(scrollView)
        scrollView.anchor(top: jobInfoCardView.topAnchor, left: jobInfoCardView.leftAnchor,
                          bottom: jobInfoCardView.bottomAnchor, right: jobInfoCardView.rightAnchor,
                          paddingTop: 4, paddingLeft: 4, paddingBottom: 4, paddingRight: 4)
        
        jobInfoCardView.addSubview(contentView)
        contentView.anchor(top: scrollView.contentLayoutGuide.topAnchor, left: scrollView.contentLayoutGuide.leftAnchor,
                           bottom: scrollView.contentLayoutGuide.bottomAnchor, right: scrollView.contentLayoutGuide.rightAnchor)
        contentView.anchor(left: scrollView.frameLayoutGuide.leftAnchor, right: scrollView.frameLayoutGuide.rightAnchor)

}

---

更新

我试图将我的contentView添加到我的scrollView的子视图中，但它仍然没有显示。 我什至尝试将UIStackView添加到我的contentView以查看是否可以使其可见，但仍然不可见。

更新截图

更新代码

fileprivate func configureUI() {

        scrollView.addSubview(contentView)
        contentView.anchor(top: scrollView.contentLayoutGuide.topAnchor, left: scrollView.contentLayoutGuide.leftAnchor,
                           bottom: scrollView.contentLayoutGuide.bottomAnchor, right: scrollView.contentLayoutGuide.rightAnchor)
        contentView.anchor(left: scrollView.frameLayoutGuide.leftAnchor, right: scrollView.frameLayoutGuide.rightAnchor)
        
        waitingOnEmployeeStack.axis = .vertical
        waitingOnEmployeeStack.distribution = .fillEqually
        waitingOnEmployeeStack.spacing = 4
        
        contentView.addSubview(waitingOnEmployeeStack)
        waitingOnEmployeeStack.centerX(inView: contentView)
        waitingOnEmployeeStack.anchor(top: contentView.topAnchor, paddingTop: 5)

}

Answer 1

我认为您想将 contentView 添加为 scrollView 的子视图。

fileprivate func configureUI() {
    
    view.addSubview(jobInfoCardView)
    jobInfoCardView.anchor(top: circularProgressView.bottomAnchor, left: view.leftAnchor, right: view.rightAnchor,
                           paddingTop: 52, paddingLeft: 24, paddingRight: 24)
    
    jobInfoCardView.addSubview(scrollView)
    scrollView.anchor(top: jobInfoCardView.topAnchor, left: jobInfoCardView.leftAnchor,
                      bottom: jobInfoCardView.bottomAnchor, right: jobInfoCardView.rightAnchor,
                      paddingTop: 4, paddingLeft: 4, paddingBottom: 4, paddingRight: 4)
    
    scrollView.addSubview(contentView)
    contentView.anchor(
        top: scrollView.contentLayoutGuide.topAnchor,
        left: scrollView.contentLayoutGuide.leftAnchor,
        bottom: scrollView.contentLayoutGuide.bottomAnchor,
        right: scrollView.contentLayoutGuide.rightAnchor
    )
    contentView.anchor(
        left: scrollView.frameLayoutGuide.leftAnchor,
        right: scrollView.frameLayoutGuide.rightAnchor
    )
    
}

Answer 2

我认为您可能想将contentView添加为scrollView的子视图而不是jobInfoCardView的子视图

Answer 3

情侣笔记...

我强烈推荐使用标准的约束语法——至少在你学习的时候。 我们不知道您的.anchor(...)是否在做正确的事情，当您查看代码时，并不完全清楚可能发生的情况。 一旦你真正掌握了自动布局的窍门，你可能会发现使用“辅助函数”更容易（我个人不这样做）。

另外 -使用评论，以便您和我们都知道您的意图是什么。

看看这个...

您还没有展示ShadowCardView可能是什么，所以我们将从一个普通的UIView子类开始：

class ShadowCardView: UIView {
}

还有一个例子 controller class：

class ViewController: UIViewController {
    
    lazy var jobInfoCardView: ShadowCardView = {
        let view = ShadowCardView()
        view.backgroundColor = .white
        return view
    }()
    
    let scrollView: UIScrollView = {
        let sv = UIScrollView()
        sv.backgroundColor = .purple // .darkPurpleTint
        return sv
    }()
    
    let contentView: UIView = {
        let view = UIView()
        view.backgroundColor = .red
        return view
    }()
    
    let circularProgressView: UIView = {
        let view = UIView()
        view.backgroundColor = .green
        return view
    }()

    override func viewDidLoad() {
        super.viewDidLoad()
        
        view.backgroundColor = UIColor(red: 0.2, green: 0.6, blue: 0.8, alpha: 1.0)
    
        // we'll be using auto-layout constraints for all views
        [jobInfoCardView, scrollView, contentView, circularProgressView].forEach { v in
            v.translatesAutoresizingMaskIntoConstraints = false
        }
        
        // add views
        view.addSubview(circularProgressView)
        view.addSubview(scrollView)
        
        scrollView.addSubview(contentView)
        
        contentView.addSubview(jobInfoCardView)
        
        // respect safe area
        let safeG = view.safeAreaLayoutGuide
        
        // to make things a little more readable
        let contentG = scrollView.contentLayoutGuide
        let frameG = scrollView.frameLayoutGuide
        
        NSLayoutConstraint.activate([
            
            // let's put the circularProgressView 20-points from the Top
            circularProgressView.topAnchor.constraint(equalTo: safeG.topAnchor, constant: 20.0),
            // 60-points on each side
            circularProgressView.leadingAnchor.constraint(equalTo: safeG.leadingAnchor, constant: 60.0),
            circularProgressView.trailingAnchor.constraint(equalTo: safeG.trailingAnchor, constant: -60.0),
            // and give it 1:1 ratio
            circularProgressView.heightAnchor.constraint(equalTo: circularProgressView.widthAnchor),
            
            // let's put the scrollView 20-points from the Bottom of the progress view
            scrollView.topAnchor.constraint(equalTo: circularProgressView.bottomAnchor, constant: 20.0),
            // 20-points on each side
            scrollView.leadingAnchor.constraint(equalTo: safeG.leadingAnchor, constant: 20.0),
            scrollView.trailingAnchor.constraint(equalTo: safeG.trailingAnchor, constant: -20.0),
            // and give it 1:1 ratio
            scrollView.heightAnchor.constraint(equalTo: scrollView.widthAnchor),

            // constrain all 4 sides of contentView to scrollView's Content Layout Guide
            //  and we'll use 12-points "padding" so we can see its frame inside the scrollView
            contentView.topAnchor.constraint(equalTo: contentG.topAnchor, constant: 12.0),
            contentView.leadingAnchor.constraint(equalTo: contentG.leadingAnchor, constant: 12.0),
            contentView.trailingAnchor.constraint(equalTo: contentG.trailingAnchor, constant: -12.0),
            contentView.bottomAnchor.constraint(equalTo: contentG.bottomAnchor, constant: -12.0),
            
            // set the Width of contentView to the Width of scrollView's Frame Layout Guide
            //  mius 24-points (12 on each side)
            contentView.widthAnchor.constraint(equalTo: frameG.widthAnchor, constant: -24.0),
            
            // constrain all 4 sides of jobInfoCardView to contentView
            jobInfoCardView.topAnchor.constraint(equalTo: contentView.topAnchor, constant: 0.0),
            jobInfoCardView.leadingAnchor.constraint(equalTo: contentView.leadingAnchor, constant: 0.0),
            jobInfoCardView.trailingAnchor.constraint(equalTo: contentView.trailingAnchor, constant: 0.0),
            jobInfoCardView.bottomAnchor.constraint(equalTo: contentView.bottomAnchor, constant: 0.0),

        ])
        
    }
    
}

运行时，它看起来像这样（绿色视图是您的circularProgressView ，紫色视图是滚动视图）：

这几乎就是你已经得到的。 那是因为 - 目前 - ShadowCardView没有控制其大小的内容。 所以，它甚至是不可见的。

让我们将ShadowCardView更改为：

class ShadowCardView: UIView {
    let stackView: UIStackView = {
        let v = UIStackView()
        v.axis = .vertical
        v.spacing = 20
        return v
    }()
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        commonInit()
    }
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        commonInit()
    }
    private func commonInit() {
        stackView.translatesAutoresizingMaskIntoConstraints = false
        addSubview(stackView)
        NSLayoutConstraint.activate([
            // constrain all 4 sides of stackView to self
            //  and we'll use 8-points "padding" so we can see its frame
            stackView.topAnchor.constraint(equalTo: self.topAnchor, constant: 8.0),
            stackView.leadingAnchor.constraint(equalTo: self.leadingAnchor, constant: 8.0),
            stackView.trailingAnchor.constraint(equalTo: self.trailingAnchor, constant: -8.0),
            stackView.bottomAnchor.constraint(equalTo: self.bottomAnchor, constant: -8.0),
        ])
        
        // give the stackView a border so we can see its frame
        stackView.layer.borderColor = UIColor.systemBlue.cgColor
        stackView.layer.borderWidth = 1
        
        // add some labels
        for i in 1...30 {
            let v = UILabel()
            v.text = "Label \(i)"
            v.backgroundColor = .cyan
            stackView.addArrangedSubview(v)
        }
    }
}

我们添加了一个带有 30 个标签的垂直堆栈视图（以及适当的约束），output 现在是：

我们可以滚动：