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 { $0.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($0) }

        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)
    }
}

这给了我以下内容-

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

我读过很多有关为滚动视图提供较大的偏移量以便滚动的信息，但这肯定是不正确的。

Answer 1

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

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不滚动带有编程自动布局约束

1 个答案: