0

I placed a CollectionView inside a TableViewCell. I added a Label inside the CollectionViewCell and set up all the constraints using Xib. However, the CollectionView still relies on the width and height values in the Show Size Inspector section. I have set the Estimate Size value to Automatic in the Show Size Inspector tab, but the CollectionViewCell continues to be dependent on the Width and Height values within the Show Size Inspector. When I correctly set all the constraints, it should be dynamic. What am I doing wrong?

Simulator SS:

enter image description here

MainVC:

final class MainVC: UIViewController {

    @IBOutlet private weak var tableView: UITableView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        registerCells()
    }
    
    private func registerCells() {
        tableView.register(cellClass: CategoryListCell.self)
    }
}

extension MainVC: UITableViewDataSource {
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 1
    }
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        if let cell = tableView.dequeue(CategoryListCell.self, indexPath: indexPath) {
            return cell
        }
        return UITableViewCell()
    }
}

CategoryListCell(XIB):

enter image description here

CategoryListCell:

class CategoryListCell: UITableViewCell {

    @IBOutlet private var collectionView: UICollectionView!
    let categories: [String] = [
        "All",
        "Nature",
        "Horror",
        "Crovd",
        "Apartments",
        "Planets"
    ]
    
    override func awakeFromNib() {
        super.awakeFromNib()
        registerCell()
        let collectionFlowLayout = UICollectionViewFlowLayout()
        collectionFlowLayout.estimatedItemSize = UICollectionViewFlowLayout.automaticSize
        collectionView.collectionViewLayout = collectionFlowLayout
    }

    override func setSelected(_ selected: Bool, animated: Bool) {
        super.setSelected(selected, animated: animated)
        
    }
    
    private func registerCell() {
        collectionView.register(cellClass: CategoryListItemCell.self)
    }
}

extension CategoryListCell: UICollectionViewDataSource {
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return categories.count
    }
    
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        if let cell = collectionView.dequeue(CategoryListItemCell.self, indexPath: indexPath) {
            cell.prepareCell(with: categories[indexPath.row])
            return cell
        }
        return UICollectionViewCell()
    }
}

CategoryListItemCell(XIB):

enter image description here

CategoryListItemCell:

final class CategoryListItemCell: UICollectionViewCell {
    
    @IBOutlet private var categoryTitleLabel: UILabel!
    @IBOutlet private var bottomLineView: UIView!
    
    override func awakeFromNib() {
        super.awakeFromNib()
        bottomLineView.translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.activate([
            bottomLineView.widthAnchor.constraint(equalTo: categoryTitleLabel.widthAnchor)
        ])
    }
    
    func prepareCell(with model: String) {
        categoryTitleLabel.text = model
    }
}
1
  • Without actually trying to build your XIBs, from your screen-caps it looks like you are setting a Width constraint on Bottom Line View to 4.0 ... in your CategoryListItemCell class, delete the awakeFromNib() code; in your XIB, delete the Width: 4.0 constraint; also in your XIB, constrain Bottom Line View width equal to Category Title Label width. Commented Dec 27, 2023 at 15:02

1 Answer 1

0

I replicated your XIBs, and the issue is that you have your Bottom Line View constrained to width = 4.

Then, in your class awakeFromNib() you are setting the categoryTitleLabel width equal to the bottomLineView width -- so the label width is then also 4.

Change the constraints in your XIB to this (I set the label background to yellow so we can see it):

enter image description here

Note: I also set the label's Vertical Content Hugging Priority to Required (1000).

and your class becomes:

final class CategoryListItemCell: UICollectionViewCell {
    
    @IBOutlet private var categoryTitleLabel: UILabel!
    @IBOutlet private var bottomLineView: UIView!

    func prepareCell(with model: String) {
        categoryTitleLabel.text = model
    }
}

The result -- view background is light-gray, table is white, collection view background is green:

enter image description here

Sign up to request clarification or add additional context in comments.

1 Comment

Thank you sir. I saw my problem. I understood now.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.