UIScrollView не работает должным образом при добавлении UILabels для просмотра

Question

Я создаю свой UIScrollView программно.Когда я добавляю все свои метки и кнопку в UIScrollView, он больше не прокручивается, и я не вижу ничего, если он проходит мимо представления.Я новичок в программном создании представлений и 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

Во-первых, не устанавливайте .contentHeight вашего вида прокрутки.Используйте автоматическое расположение и ограничения, и пусть система сделает за вас вычисления.

Во-вторых, убедитесь, что у вас есть полная «цепочка» ограничений сверху вниз.Ваш верхний элемент (метка) должен быть ограничен верхней частью вида прокрутки, а нижний элемент (метка) должен быть ограничен нижней частью вида прокрутки.Все остальные вертикальные ограничения должны быть снизу элемента над ним.

В-третьих, я настоятельно рекомендую , а не , используя любую функцию "удобства ограничения" /расширение (например, .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...
    ])

Только немного больше печатания, намного удобочитаемее, и вы узнаете, что должно делать каждое ограничение.

В-четвертых, работая над макетом, я также рекомендую устанавливать цвета фона для видов, надписей и т. Д. Упрощает просмотр рамок и интервалов.

Итак, вотпример использования вашего размещенного кода в качестве основы.Я сделал вертикальный интервал между элементами больше, чем вы имели в своем коде ... на iPhone 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),

            ])

    }

}