Why don't the child elements fill in the parent ones?-CodePudding

There is a scrollView with an orange background, it has an image with a white background, a gray label and a button. ScrollView fills the entire screen, including the status bar. How can I make the image also go to the status bar, and not be attached to its bottom?

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

            image.topAnchor.constraint(equalTo: scrollView.topAnchor),
            image.leadingAnchor.constraint(equalTo: scrollView.safeAreaLayoutGuide.leadingAnchor),
            image.trailingAnchor.constraint(equalTo: scrollView.safeAreaLayoutGuide.trailingAnchor),
            image.heightAnchor.constraint(equalToConstant: 100),

            label.topAnchor.constraint(equalTo: image.bottomAnchor),
            label.leadingAnchor.constraint(equalTo: scrollView.safeAreaLayoutGuide.leadingAnchor),
            label.trailingAnchor.constraint(equalTo: scrollView.safeAreaLayoutGuide.trailingAnchor),
            label.heightAnchor.constraint(equalToConstant: 1000),

            button.topAnchor.constraint(equalTo: label.bottomAnchor),
            button.leadingAnchor.constraint(equalTo: scrollView.safeAreaLayoutGuide.leadingAnchor),
            button.trailingAnchor.constraint(equalTo: scrollView.safeAreaLayoutGuide.trailingAnchor),
            button.bottomAnchor.constraint(equalTo: scrollView.bottomAnchor)

        ])

CodePudding user response：

Head over to your favorite search engine and search for UIScrollView contentLayoutGuide frameLayoutGuide

In order to get your content to scroll, you need constraints to the scrollView's.contentLayoutGuide.

To size the content correctly - such as to fill the width of the scroll view so we have only vertical scrolling - you need Leading and Trailing constraints to the scrollView's .frameLayoutGuide.

Compare your constraints to this:

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

        image.topAnchor.constraint(equalTo: scrollView.contentLayoutGuide.topAnchor),
        
        image.leadingAnchor.constraint(equalTo: scrollView.contentLayoutGuide.leadingAnchor),
        image.trailingAnchor.constraint(equalTo: scrollView.contentLayoutGuide.trailingAnchor),
        image.heightAnchor.constraint(equalToConstant: 100),
        
        // make the image view the Width of the scroll view
        image.widthAnchor.constraint(equalTo: scrollView.frameLayoutGuide.widthAnchor),
        
        label.topAnchor.constraint(equalTo: image.bottomAnchor),
        label.leadingAnchor.constraint(equalTo: scrollView.contentLayoutGuide.leadingAnchor),
        label.trailingAnchor.constraint(equalTo: scrollView.contentLayoutGuide.trailingAnchor),
        label.heightAnchor.constraint(equalToConstant: 1000),

        // make the label the Width of the scroll view
        label.widthAnchor.constraint(equalTo: scrollView.frameLayoutGuide.widthAnchor),

        button.topAnchor.constraint(equalTo: label.bottomAnchor),
        button.leadingAnchor.constraint(equalTo: scrollView.contentLayoutGuide.leadingAnchor),
        button.trailingAnchor.constraint(equalTo: scrollView.contentLayoutGuide.trailingAnchor),

        // make the button the Width of the scroll view
        button.widthAnchor.constraint(equalTo: scrollView.frameLayoutGuide.widthAnchor),
        
        button.bottomAnchor.constraint(equalTo: scrollView.contentLayoutGuide.bottomAnchor)
        
    ])