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
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:
contentView.topAnchor.constraint(equalTo: scrollView.topAnchor),
- This constraint pins the content view at the top of the scroll view.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/.