CollectionView Cells not sizing properly - ios

Question

I have created a collection view with cells that are just meant to display an image and a title underneath. Everything appears right in the interface builder and with the constraints. When the view actually loads the whole image does not load and is cut off as you can see in the images below. What I would like is for the cells to size to an xth of the screen (let's say third of the screen width for simplicity) ?
NewsController
class NewsViewController: UIViewController, UITableViewDelegate, UITableViewDataSource, UICollectionViewDataSource, UICollectionViewDelegate, UICollectionViewDelegateFlowLayout {
private static let headlineArticleReuseIdentifier = "HeadlineArticleCell"
private static let categoryCellReuseIdentifier = "NewsCategoryCell"
#IBOutlet weak var categoriesList: UICollectionView!
#IBOutlet weak var categoriesFlowLayout: UICollectionViewFlowLayout!
#IBOutlet weak var headlineArticlesPreviewList: UITableView!
private var bindings = Set<AnyCancellable>()
private var viewModel: NewsViewModel = NewsViewModel()
private var headlineArticles: [Article] = []
private var categories: [Category] = []
#IBOutlet weak var headlineTitle: UILabel!
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.
view.isSkeletonable = true
view.showGradientSkeleton()
headlineArticlesPreviewList.delegate = self
headlineArticlesPreviewList.dataSource = self
categoriesList.dataSource = self
categoriesList.delegate = self
let cancellable = viewModel.$viewState.sink(receiveValue: { state in
switch state {
case let .data(data):
self.setData(data: data)
print()
case let .error(error):
print(error)
case .loading:
self.headlineTitle.showGradientSkeleton()
self.headlineArticlesPreviewList.showGradientSkeleton()
print()
}
})
bindings.insert(cancellable)
}
private func setData(data: NewsViewModel.ViewState.Data) {
self.view.hideSkeleton()
self.headlineArticles = data.headlineArticles
self.headlineTitle.text = data.headlineCategory.displayName
self.headlineArticlesPreviewList.reloadData()
self.categories = data.categories
self.categoriesList.reloadData()
}
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
if (tableView == headlineArticlesPreviewList) {
return headlineArticles.count
} else {
return 0
}
}
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
guard let cell = headlineArticlesPreviewList.dequeueReusableCell(
withIdentifier: NewsViewController.headlineArticleReuseIdentifier,
for: indexPath)
as? HeadlineArticleTableViewCell else {
fatalError("could not cast to headline article")
}
let headlineArticle = headlineArticles[indexPath.item]
cell.setArticle(article: headlineArticle)
return cell
}
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
self.categories.count
}
func numberOfSections(in collectionView: UICollectionView) -> Int {
1
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
guard let cell = categoriesList.dequeueReusableCell(withReuseIdentifier: NewsViewController.categoryCellReuseIdentifier, for: indexPath) as? NewsCategoryCollectionViewCell else {
fatalError("could not cast to news category")
}
let newsCategory = categories[indexPath.item]
cell.setCategory(category: newsCategory)
cell.isInteractable = true
cell.cornerRadius = 8
return cell
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
let noOfCellsInRow = 3
let flowLayout = collectionViewLayout as! UICollectionViewFlowLayout
let totalSpace = flowLayout.sectionInset.left
+ flowLayout.sectionInset.right
+ (flowLayout.minimumInteritemSpacing * CGFloat(noOfCellsInRow - 1))
let size = Int((collectionView.bounds.width - totalSpace) / CGFloat(noOfCellsInRow))
return CGSize(width: size, height: size)
}
}
Constraints
Cell Image
Cell Size
What happens

Answer 1

Please add UICollectionViewDelegateFlowLayout to your code.
Swift
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
return CGSize(width: UIScreen.main.bounds.size.width * 0.4,height: UIScreen.main.bounds.size.width * 0.4)
}
objective c
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath{
return CGSizeMake([[UIScreen mainScreen] bounds].size.width * 0.4, [[UIScreen mainScreen] bounds].size.height * 0.4);
}

Answer 2

Is your collection view set to be self sizing? It looks like its using the default item sizes for the collection view. You can read more about how to implement a self sizing collectionView here
Another suggestion, if you are using fix aspect ratio: 1:1 and the imageView's width is 144, just set the height constraint as 144 also and remove the aspect ratio.
Third suggestion, look at the console, are there any LayoutConstraint errors? If so, it is likely that it cannot create the 1:1 aspect ratio and breaks a constraint. You can try lowering the aspect ratio's priority to 750, it usually helps in these situation, if not, look at the first two suggestions.
Also, I see that your label is also at a fixed height, 25, so technically, your cell is 144*(144+25) so you can set your itemSize to these values and don't use self sizing altogether.