Search code examples
iosswiftiphonescrollview

Black screen when adding scrollView


I tried adding scrollView and got a black screen, what could be the problem?:

import UIKit

class RecipeViewController: UIViewController {
    private let scrollView = UIScrollView()
    private let contentView = UIView()
    var meal: Meal?
    
    var mealImageView: UIImageView = {
        let image = UIImageView()
        image.contentMode = .scaleAspectFill
        image.translatesAutoresizingMaskIntoConstraints = false
        image.clipsToBounds = true
        image.layer.cornerRadius = 9
        image.backgroundColor = .gray
        return image
    }()
    
    init(meal: Meal) {
        super.init(nibName: nil, bundle: nil)
        self.meal = meal
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        setupScrollView()
        setupSubviews()
    }
    
    private func setupScrollView() {
        let padding: CGFloat = 20
        scrollView.translatesAutoresizingMaskIntoConstraints = false
        contentView.translatesAutoresizingMaskIntoConstraints = false
        contentView.backgroundColor = .white
        view.addSubview(scrollView)
        scrollView.addSubview(contentView)

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

            contentView.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor, constant: padding),
            contentView.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor, constant: -padding),
            contentView.bottomAnchor.constraint(equalTo: scrollView.bottomAnchor),
            contentView.widthAnchor.constraint(equalTo: scrollView.widthAnchor, constant: -padding * 2)
        ])
    }

    private func setupSubviews() {
        contentView.backgroundColor = .white
        contentView.addSubview(mealImageView)
        contentView.addSubview(recipeLabel)

        NSLayoutConstraint.activate([
            mealImageView.topAnchor.constraint(equalTo: contentView.safeAreaLayoutGuide.topAnchor, constant: 10),
            mealImageView.leadingAnchor.constraint(equalTo: contentView.leadingAnchor, constant: 10),
            mealImageView.trailingAnchor.constraint(equalTo: contentView.trailingAnchor, constant: -10),
            mealImageView.heightAnchor.constraint(equalToConstant: contentView.frame.size.height / 3)
        ])
    }
}

Before adding scrollView and contentView, I had a parent view and mealImageView. Everything worked fine: Screenshot

After I did view - scrollView - contentView - mealImageView and got this: Screenshot


Solution

  • I have noticed that some parts of the code you provided are still missing, such as where recipeLabel is defined. It appears that you are still developing it and facing this issue.


    In general, when using a UIScrollView, it is necessary to anchor it to the parent view in all four directions. Similarly, the content view of the UIScrollView must also be pinned in all four directions with the UIScrollView.

    From what I can see, it seems that you are missing the following constraints:

    1. contentView.topAnchor.constraint(equalTo: scrollView.topAnchor), - This constraint pins the content view at the top of the scroll view.
    2. mealImageView.bottomAnchor.constraint(equalTo: contentView.bottomAnchor), - This constraint pins the bottom of the image view to the content view's bottom edge, which allows the content view to know where the bottom will end.

    In addition, you may need to modify the mealImageView's height constraint, as it is not currently correct. While debugging, you can update it to some hardcoded value.

    I hope this information helps you resolve the issue. Please refer to this resource for further information: https://monkey.work/blog/2020-11-08-uiscrollview/.