调整我的 UICollectionViewCell 大小的问题

Question

I am currently trying to resize my cell within my CollectionView. I have already implemented the dataSource, CollectionViewDelegate and CollectionViewDelegateFlowLayout.

This is the code I have for the latter:

   extension ViewController: UICollectionViewDelegateFlowLayout {

  func collectionView(_ collectionView: UICollectionView, layout 
collectionViewLayout: UICollectionViewLayout, sizeForItemAt 
indexPath: IndexPath) -> CGSize
    {
     return CGSize(width: 100.0, height: 100.0)
    }
} 

The problem is that when I head over to my storyboard and select my CollectionView and then go to the Attributes Inspector to switch "Estimate Size" from "Automatic" to "None," I would get three columns after running my app [Image #1].

The result I am looking for is to be able to have one middle column with a bigger cell as I show on Image #2.

Has anybody dealt with this problem before?

Answer 1

In order to show a collection view cells as a list, you can change your cell width equals to the width of the collection view. Giving constant width will not work for different device size.

  func collectionView(_ collectionView: UICollectionView, layout 
collectionViewLayout: UICollectionViewLayout, sizeForItemAt 
indexPath: IndexPath) -> CGSize
    {
       let width = collectionView.frame.width
     return CGSize(width: width, height: 100.0)
    }
}

And give your desired constraint values for the inner rectangular view to achieve the desired look. Make collectionView cell background to clear.