UICollectionView Custom Cell to fill width In Swift

Question

I've been trying to figure-out how can i make the cell fill the width, as you can see in the picture the width between the cells is too big. i am using custom cell with only one imageView.

I tried to customize it from the storyboard but i guess there is no option for that or it should be done programmatically.

my UICollectionViewController :

 @IBOutlet var collectionView2: UICollectionView!      let recipeImages = ["angry_birds_cake", "creme_brelee", "egg_benedict", "full_breakfast", "green_tea", "ham_and_cheese_panini", "ham_and_egg_sandwich", "hamburger", "instant_noodle_with_egg.jpg", "japanese_noodle_with_pork", "mushroom_risotto", "noodle_with_bbq_pork", "starbucks_coffee", "thai_shrimp_cake", "vegetable_curry", "white_chocolate_donut"]      override func viewDidLoad() {         super.viewDidLoad()          // Uncomment the following line to preserve selection between presentations         // self.clearsSelectionOnViewWillAppear = false          // Do any additional setup after loading the view.      }       override func didReceiveMemoryWarning() {         super.didReceiveMemoryWarning()         // Dispose of any resources that can be recreated.     }  override func numberOfSectionsInCollectionView(collectionView: UICollectionView) -> Int {         //#warning Incomplete method implementation -- Return the number of sections         return 1     }       override func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {         //#warning Incomplete method implementation -- Return the number of items in the section          return recipeImages.count     }      override func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {         let cell = collectionView.dequeueReusableCellWithReuseIdentifier(reuseIdentifier, forIndexPath: indexPath) as! RecipeCollectionViewCell          // Configure the cell         cell.recipeImageView.image = UIImage(named: recipeImages[indexPath.row])          return cell     } 

Answer 1

You need to do this programatically.

Implement UICollectionViewDelegateFlowLayout in your view controller and provide the size in collectionView:layout:sizeForItemAtIndexPath:

func collectionView(_ collectionView: UICollectionView,                         layout collectionViewLayout: UICollectionViewLayout,                         sizeForItemAt indexPath: IndexPath) -> CGSize {         let kWhateverHeightYouWant = 100         return CGSizeMake(collectionView.bounds.size.width, CGFloat(kWhateverHeightYouWant)) } 

You will also want to call collectionView.collectionViewLayout.invalidateLayout() inside your view controller's viewWillLayoutSubviews() so that when the main view's dimensions change (on rotation, for example), the collection view is re-laid out.

Swift 4 Update

func collectionView(_ collectionView: UICollectionView,                             layout collectionViewLayout: UICollectionViewLayout,                             sizeForItemAt indexPath: IndexPath) -> CGSize {             let kWhateverHeightYouWant = 100             return CGSize(width: collectionView.bounds.size.width, height: CGFloat(kWhateverHeightYouWant)) } 

Answer 2

Inside your view controller override viewDidLayoutSubviews method

@IBOutlet weak var collectionView: UICollectionView!  override func viewDidLayoutSubviews() {     super.viewDidLayoutSubviews()      if let layout = collectionView.collectionViewLayout as? UICollectionViewFlowLayout {         let itemWidth = view.bounds.width / 3.0         let itemHeight = layout.itemSize.height         layout.itemSize = CGSize(width: itemWidth, height: itemHeight)         layout.invalidateLayout()     } } 

(collectionView property is your collectionView)