ios - 添加 UILabels 来查看时 UIScrollView 无法正常工作

Question

我正在以编程方式创建 UIScrollView。当我将所有标签和按钮添加到 UIScrollView 时，它不会再滚动，并且如果它超出 View ，我将看不到任何内容。我不熟悉以编程方式创建 View 和 UIScrollViews。我省略了一些代码，例如 UILabels，因为它是重复的，并且它们都与 stepTwo UILabel 匹配。

  lazy var scrollView: UIScrollView = {
    let view = UIScrollView()
    view.translatesAutoresizingMaskIntoConstraints = false
    view.contentSize.height = 1200
    return view
}()
 let stepTwo: UILabel = {
    let label = UILabel()

    let attributedTitle = NSMutableAttributedString(string: "Step 2:\n", attributes: [NSAttributedString.Key.font: UIFont.systemFont(ofSize: 45)])

    attributedTitle.append(NSAttributedString(string: "See Your Doctor", attributes: [NSAttributedString.Key.font: UIFont.boldSystemFont(ofSize: 20)]))

    label.attributedText = attributedTitle
    label.numberOfLines = 2
    return label
}()
 override func viewDidLoad(){
    super.viewDidLoad()
    view.addSubview(scrollView)
    setupScrollView()
    setupScrollViewLabels()
}
 func setupScrollView(){

     scrollView.anchor(top: view.topAnchor, left: view.leftAnchor, bottom: view.bottomAnchor, right: view.rightAnchor, paddingTop: 200, paddingLeft: 0, paddingBottom: 0, paddingRight: 0, width: 0, height: 0)

}
func setupScrollViewLabels(){
    scrollView.addSubview(stepOne)
    scrollView.addSubview(stepOneDetails)
    scrollView.addSubview(reportButton)
    scrollView.addSubview(stepTwo)
    scrollView.addSubview(stepTwoDetails)

    stepOne.topAnchor.constraint(equalTo: scrollView.topAnchor).isActive = true

    stepOne.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor).isActive = true

    stepOne.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor).isActive = true
    stepOne.bottomAnchor.constraint(equalTo: scrollView.bottomAnchor).isActive = true

    stepOne.widthAnchor.constraint(equalTo: scrollView.widthAnchor).isActive = true


    stepOne.anchor(top: scrollView.topAnchor, left: view.leftAnchor, bottom: scrollView.bottomAnchor, right: view.rightAnchor, paddingTop: 10, paddingLeft: 20, paddingBottom: 0, paddingRight: 20, width: 0, height: 0)

    stepOneDetails.anchor(top: stepOne.bottomAnchor, left: view.leftAnchor, bottom: nil, right: view.rightAnchor, paddingTop: 10, paddingLeft: 20, paddingBottom: 0, paddingRight: 10, width: 0, height: 0)
    reportButton.anchor(top: stepOneDetails.bottomAnchor, left: view.leftAnchor, bottom: nil, right: view.rightAnchor, paddingTop: 30, paddingLeft: 20, paddingBottom: 0, paddingRight: 20, width: 0, height: 50)

    stepTwo.anchor(top: reportButton.bottomAnchor, left: view.leftAnchor, bottom: nil, right: view.rightAnchor, paddingTop: 25, paddingLeft: 20, paddingBottom: 0, paddingRight: 20, width: 0, height: 0)

    stepTwoDetails.anchor(top: stepTwo.bottomAnchor, left: view.leftAnchor, bottom: nil, right: view.rightAnchor, paddingTop: 10, paddingLeft: 20, paddingBottom: 0, paddingRight: 10, width: 0, height: 0)
}

Answer 1

首先，不要设置 ScrollView 的.contentHeight。使用自动布局和约束，让系统为您进行计算。

其次，确保有一个从上到下完整的约束“链”。您的顶部元素(标签)需要限制在 ScrollView 的顶部，底部元素(标签)需要限制在 ScrollView 的底部。所有其他垂直约束应该来自其上方元素的底部。

第三，我强烈建议不要使用任何类型的“约束便利”函数/扩展(例如 .anchor(top: left: Bottom: . ...) 你正在使用)。至少在您完全理解约束如何工作之前，请使用以下格式:

    NSLayoutConstraint.activate([

        // stepOne to top + 10 padding and leading/trailing + 20 padding
        stepOne.topAnchor.constraint(equalTo: scrollView.topAnchor, constant: 10.0),
        stepOne.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor, constant: 20.0),
        stepOne.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor, constant: 20.0),

        // and so on...
    ])

只需多输入一点点，可读性就会提高很多，您就可以了解每个约束应该做什么。

第四，在处理布局时，我还建议在 View 、标签等上设置背景颜色。这样可以更轻松地查看框架和间距。

所以 - 这是一个使用您发布的代码作为基础的示例。我将元素之间的垂直间距设置得比代码中的大……在 iPhone X 上，没有足够的内容可以滚动。这应该可以做到。如果它仍然无法在“X”上滚动，请在 iPhone 7(模拟器或设备)上运行它。有很多注释解释了约束设置。

class AnotherViewController: UIViewController {

    lazy var scrollView: UIScrollView = {
        let view = UIScrollView()
        view.translatesAutoresizingMaskIntoConstraints = false
        // don't do this... let auto-layout and constraints handle the scrollable area
        // view.contentSize.height = 1200

        //so we can see it
        view.backgroundColor = .yellow

        return view
    }()

    let stepOne: UILabel = {
        let label = UILabel()

        let attributedTitle = NSMutableAttributedString(string: "Step 1:\n", attributes: [NSAttributedString.Key.font: UIFont.systemFont(ofSize: 45)])
        attributedTitle.append(NSAttributedString(string: "This is Step 1", attributes: [NSAttributedString.Key.font: UIFont.boldSystemFont(ofSize: 20)]))
        label.attributedText = attributedTitle
        label.numberOfLines = 2
        return label
    }()

    let stepOneDetails: UILabel = {
        let label = UILabel()

        let attributedTitle = NSMutableAttributedString(string: "Step 1 Details:\n", attributes: [NSAttributedString.Key.font: UIFont.systemFont(ofSize: 45)])
        attributedTitle.append(NSAttributedString(string: "This is Step 1 Details", attributes: [NSAttributedString.Key.font: UIFont.boldSystemFont(ofSize: 20)]))
        label.attributedText = attributedTitle
        label.numberOfLines = 2
        return label
    }()

    let stepTwo: UILabel = {
        let label = UILabel()

        let attributedTitle = NSMutableAttributedString(string: "Step 2:\n", attributes: [NSAttributedString.Key.font: UIFont.systemFont(ofSize: 45)])
        attributedTitle.append(NSAttributedString(string: "See Your Doctor a 2nd time", attributes: [NSAttributedString.Key.font: UIFont.boldSystemFont(ofSize: 20)]))
        label.attributedText = attributedTitle
        label.numberOfLines = 2
        return label
    }()

    let stepTwoDetails: UILabel = {
        let label = UILabel()

        let attributedTitle = NSMutableAttributedString(string: "Step 2 Details:\n", attributes: [NSAttributedString.Key.font: UIFont.systemFont(ofSize: 45)])
        attributedTitle.append(NSAttributedString(string: "This is Step 2 Details", attributes: [NSAttributedString.Key.font: UIFont.boldSystemFont(ofSize: 20)]))
        label.attributedText = attributedTitle
        label.numberOfLines = 2
        return label
    }()

    let reportButton: UIButton = {
        let b = UIButton()
        b.setTitle("Report Button", for: .normal)
        b.backgroundColor = .blue
        return b
    }()

    override func viewDidLoad(){
        super.viewDidLoad()
        view.addSubview(scrollView)
        setupScrollView()
        setupScrollViewLabels()
    }

    func setupScrollView(){

        NSLayoutConstraint.activate([
            scrollView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 200.0),
            scrollView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor, constant: 0.0),
            scrollView.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor, constant: 0.0),
            scrollView.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor, constant: 0.0),
            ])

    }

    func setupScrollViewLabels(){
        scrollView.addSubview(stepOne)
        scrollView.addSubview(stepOneDetails)
        scrollView.addSubview(reportButton)
        scrollView.addSubview(stepTwo)
        scrollView.addSubview(stepTwoDetails)

        // we're using auto-layout
        reportButton.translatesAutoresizingMaskIntoConstraints = false

        // for each of the labels
        [stepOne, stepOneDetails, stepTwo, stepTwoDetails].forEach {

            // we're using auto-layout
            $0.translatesAutoresizingMaskIntoConstraints = false

            // set background colors so we can see the frames of the elements
            $0.backgroundColor = .cyan

        }

        NSLayoutConstraint.activate([

            // stepOne to top + 10 padding and leading/trailing + 20 padding
            stepOne.topAnchor.constraint(equalTo: scrollView.topAnchor, constant: 10.0),
            stepOne.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor, constant: 20.0),
            stepOne.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor, constant: 20.0),

            // stepOneDetails to stepOne + 40 padding and leading/trailing + 20 padding
            stepOneDetails.topAnchor.constraint(equalTo: stepOne.bottomAnchor, constant: 40.0),
            stepOneDetails.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor, constant: 20.0),
            stepOneDetails.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor, constant: 20.0),

            // reportButton to stepOneDetails + 60 padding and leading/trailing + 20 padding
            reportButton.topAnchor.constraint(equalTo: stepOneDetails.bottomAnchor, constant: 60.0),
            reportButton.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor, constant: 20.0),
            reportButton.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor, constant: 20.0),

            // reportButton height to 50
            reportButton.heightAnchor.constraint(equalToConstant: 50.0),

            // stepTwo to reportButton + 50 padding and leading/trailing + 20 padding
            stepTwo.topAnchor.constraint(equalTo: reportButton.bottomAnchor, constant: 50.0),
            stepTwo.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor, constant: 20.0),
            stepTwo.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor, constant: 20.0),

            // stepTwoDetails to stepTwo + 40 padding and leading/trailing + 20 padding
            stepTwoDetails.topAnchor.constraint(equalTo: stepTwo.bottomAnchor, constant: 40.0),
            stepTwoDetails.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor, constant: 20.0),
            stepTwoDetails.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor, constant: 20.0),

            // also must define a width-basis for the scrollable area (the .contentSize),
            //  so use stepOne label, and make it the width of the scrollView minus 40 (20-pts on each side)
            stepOne.widthAnchor.constraint(equalTo: scrollView.widthAnchor, constant: -40.0),

            // and we have to constrain the last element to the bottom of the scrollView
            //  with 10 padding (note: it must be negative)
            stepTwoDetails.bottomAnchor.constraint(equalTo: scrollView.bottomAnchor, constant: -10.0),

            ])

    }

}