UICollectionView custom cell UILabel missing when UIImageView has image - ios

Question

I have problems using Custom UICollectionViewCell. Custom cell has one UILabel and one UIImageView. The problem is, when I put image on UIImageView(Left screenshot), UILabel in same cell disappears like picture below. But if there's no Image source on UIImageView, UILabel is not missing.
This is code for Viewcontroller which has UICollectionView
class CatTowerVeiwController: UIViewController {
#IBOutlet weak var popCountSwitch: UISwitch!
#IBOutlet weak var collectionView: UICollectionView!
override func viewDidLoad() {
super.viewDidLoad()
let switchState = UserDefaults.standard.bool(forKey: UserDataKey.popCountVisibility)
popCountSwitch.setOn(switchState, animated: false)
collectionView.register(UINib(nibName: "CatTowerCell", bundle: nil), forCellWithReuseIdentifier: "cell")
setupFlowLayout(numberOfCells: 2.0)
}
#IBAction func doneButtonClicked(_ sender: UIButton) {
let isLabelVisible = self.popCountSwitch.isOn
UserDefaults.standard.set(isLabelVisible, forKey: UserDataKey.popCountVisibility)
self.dismiss(animated: false)
}
}
extension CatTowerVeiwController: UICollectionViewDataSource {
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return 3
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath) as! CatTowerCell
// cell.cellImage.image = #imageLiteral(resourceName: "popcat_closed")
cell.cellName.text = "Popcat"
print(cell.cellName.frame.size.height)
print(cell.cellName.frame.size.width)
return cell
}
}
extension CatTowerVeiwController: UICollectionViewDelegateFlowLayout {
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
let leftAndRightPaddings: CGFloat = 45.0
let numberOfItemsPerRow: CGFloat = 2.0
let width = (collectionView.frame.width-leftAndRightPaddings)/numberOfItemsPerRow
return CGSize(width: width, height: width)
}
private func setupFlowLayout(numberOfCells: CGFloat) {
let flowLayout = UICollectionViewFlowLayout()
flowLayout.sectionInset = UIEdgeInsets(top: 10, left: 10, bottom: 10, right: 10)
let halfWidth = UIScreen.main.bounds.width / numberOfCells
flowLayout.itemSize = CGSize(width: halfWidth * 0.8 , height: halfWidth * 0.8)
flowLayout.minimumInteritemSpacing = 0
flowLayout.minimumLineSpacing = halfWidth * 0.1
self.collectionView.collectionViewLayout = flowLayout
}
}
And this is code for custom cell
class CatTowerCell: UICollectionViewCell {
#IBOutlet weak var cellImage: UIImageView!
#IBOutlet weak var cellName: UILabel!
override func awakeFromNib() {
super.awakeFromNib()
// Initialization code
}
}
This is what I trying to make:

Answer 1

The solution was Compression Priority
The height of UILabel became 0 because UIImageView is too big
My solution is setting Vertical compression Priority of UILabel larger than UIImageView.

Answer 2

Pin your imageview's bottom anchor constraint to the label's top anchor.
And make sure there are no conflicting constraints.
label.topAnchor.constraint(equalTo: imageview.bottomAnchor).isActive = true