UIScrollView 不滚动 w/ 编程自动布局约束

Question

我正在尝试了解如何以编程方式使用 UIScrollView。

当我为我的内容设置的尺寸不适合屏幕时，它不会滚动。


final class ProfileView: UIView {

    private var isIpad: Bool {
        return UIDevice.current.userInterfaceIdiom == .pad
    }

    private lazy var headerImageView: UIImageView = {
        let iv = UIImageView(frame: .zero)
        iv.translatesAutoresizingMaskIntoConstraints = false
        iv.heightAnchor.constraint(equalToConstant: 600).isActive = true
        iv.backgroundColor = .purple
        return iv
    }()

    private lazy var profileImageView: UIImageView = {
        let iv = UIImageView(frame: .zero)
        iv.translatesAutoresizingMaskIntoConstraints = false
        [iv.heightAnchor, iv.widthAnchor].forEach { [=10=].constraint(equalToConstant: 170).isActive = true }
        iv.layer.cornerRadius = 170 / 2
        iv.layer.borderColor = .white
        iv.layer.borderWidth = 3
        iv.layer.masksToBounds = true
        iv.contentMode = .scaleAspectFill
        iv.clipsToBounds = true
        iv.backgroundColor = .red

        return iv
    }()

    private(set) lazy var nameLabel: UILabel = {
        let label = UILabel(frame: .zero)
        label.translatesAutoresizingMaskIntoConstraints = false
        label.text = "Foo\nBar"
        label.numberOfLines = 2
        return label
    }()

    private lazy var contentScrollView: UIScrollView = {
        let sv = UIScrollView(frame: .zero)
        sv.translatesAutoresizingMaskIntoConstraints = false
        return sv
    }()

    override init(frame: CGRect) {
        super.init(frame: frame)

        configureLayout()
    }

    required init?(coder: NSCoder) {
        return nil
    }

    private func configureLayout() {

        addSubview(contentScrollView)
        [headerImageView, profileImageView, nameLabel].forEach { contentScrollView.addSubview([=10=]) }

        let compactConstraints = [
            contentScrollView.topAnchor.constraint(equalTo: safeAreaLayoutGuide.topAnchor),
            contentScrollView.leadingAnchor.constraint(equalTo: safeAreaLayoutGuide.leadingAnchor),
            contentScrollView.bottomAnchor.constraint(equalTo: safeAreaLayoutGuide.bottomAnchor),
            contentScrollView.trailingAnchor.constraint(equalTo: safeAreaLayoutGuide.trailingAnchor),

            headerImageView.topAnchor.constraint(equalTo: topAnchor),
            headerImageView.leadingAnchor.constraint(equalTo: leadingAnchor),
            headerImageView.trailingAnchor.constraint(equalTo: trailingAnchor),

            profileImageView.centerYAnchor.constraint(equalTo: headerImageView.bottomAnchor),
            profileImageView.centerXAnchor.constraint(equalTo: centerXAnchor),

            nameLabel.topAnchor.constraint(equalTo: profileImageView.bottomAnchor, constant: 16),
            nameLabel.centerXAnchor.constraint(equalTo: profileImageView.centerXAnchor),

        ]

        NSLayoutConstraint.activate(compactConstraints)
    }
}

这给了我以下 -

header 图像将名称标签和头像推离屏幕，滚动不起作用。

我读过很多关于给滚动视图一个巨大的偏移量以使其滚动的内容，但这肯定是不正确的。

Answer 1

您需要为 scrollView 创建所有子视图的约束，向 header img = profileview width 添加宽度约束，最后使标签的底部 = 滚动视图的底部以使其推断其高度

let compactConstraints = [

        contentScrollView.topAnchor.constraint(equalTo: safeAreaLayoutGuide.topAnchor),
        contentScrollView.leadingAnchor.constraint(equalTo: safeAreaLayoutGuide.leadingAnchor),
        contentScrollView.bottomAnchor.constraint(equalTo: safeAreaLayoutGuide.bottomAnchor),
        contentScrollView.trailingAnchor.constraint(equalTo: safeAreaLayoutGuide.trailingAnchor),


        headerImageView.topAnchor.constraint(equalTo:contentScrollView.topAnchor),
        headerImageView.leadingAnchor.constraint(equalTo:contentScrollView.leadingAnchor),
        headerImageView.trailingAnchor.constraint(equalTo:contentScrollView.trailingAnchor),  
        headerImageView.widthAnchor.constraint(equalTo: self.widthAnchor) // add this 

        profileImageView.centerYAnchor.constraint(equalTo: headerImageView.bottomAnchor),
        profileImageView.centerXAnchor.constraint(equalTo: centerXAnchor),

        nameLabel.topAnchor.constraint(equalTo: profileImageView.bottomAnchor, constant: 16),
        nameLabel.centerXAnchor.constraint(equalTo: profileImageView.centerXAnchor),
        nameLabel.bottomAnchor.constraint(equalTo: contentScrollView.bottomAnchor)  // and this 
]

UIScrollView 不滚动 w/ 编程自动布局约束

UIScrollView not scrolling w/ programmatic autolayout constraints

uiscrollview

autolayout

swift