How to display 3 cells per row in UICollectionView?
24,894
Solution 1
Swift 3.0. Works for both horizontal and vertical scroll directions and variable spacing
Declare number of cells you want per row
let numberOfCellsPerRow: CGFloat = 3
Configure flowLayout
to render specified numberOfCellsPerRow
if let flowLayout = collectionView?.collectionViewLayout as? UICollectionViewFlowLayout {
let horizontalSpacing = flowLayout.scrollDirection == .vertical ? flowLayout.minimumInteritemSpacing : flowLayout.minimumLineSpacing
let cellWidth = (view.frame.width - max(0, numberOfCellsPerRow - 1)*horizontalSpacing)/numberOfCellsPerRow
flowLayout.itemSize = CGSize(width: cellWidth, height: cellWidth)
}
Solution 2
//Make use of UICollectionViewDelegateFlowLayout Protocol
class RVC: UICollectionViewController {
//some code
}
extension RVC: UICollectionViewDelegateFlowLayout{
func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize
{
var collectionViewSize = collectionView.frame.size
collectionViewSize.width = collectionViewSize.width/3.0 //Display Three elements in a row.
collectionViewSize.height = collectionViewSize.height/4.0
return collectionViewSize
}
For more information go through below link.
UICollectionView Set number of columns
Comments
-
FlySoFast almost 4 years
I used a custom flow layout according to this post. Here is my implementation:
@implementation CustomLayout -(void)prepareLayout{ [super prepareLayout]; // [self invalidateLayout]; if(self.collectionView){ CGSize newItemSize=self.itemSize; // Number of items per row int itemsPerRow=3; float totalSpacing=self.minimumLineSpacing*(itemsPerRow-1); newItemSize.width=(self.collectionView.bounds.size.width -totalSpacing)/itemsPerRow; if(self.itemSize.height>0){ float itemAspectRatio=self.itemSize.width/self.itemSize.height; newItemSize.height=newItemSize.width/itemAspectRatio; } [self setItemSize:newItemSize]; } } @end
This is what I've got: What did I miss? I've come across some other SO posts but no luck so far.
-
FlySoFast over 8 yearsthen how about larger screens like iPhone 6 plus or iPad? My app tends to run on many devices.
-
IOS developer over 8 yearsso you have to do like self.view.frame.size.width/3 for any type of device width.
-
IOS developer over 8 yearsyou just have to calculate only for two device iPhone and iPad.
-
IOS developer over 8 yearsfor iphone 6 and iphone 6 plus you just have to remove launch image source.
-
FlySoFast over 8 yearswell..basically that is what I was doing in the code above: calculate the width and with superview' width and the spaces between the cells.
-
IOS developer over 8 yearsjust look at my below screen shot
-
xdeleon about 6 yearsTested this on a few different devices, but not all. Fails on iPad Air, iPad 5th Gen, both running iOS 11.2. Xcode 9.2, Swift 4. I make this call in viewDidLoad().
-
xdeleon about 6 yearsTested this on iPhone X and iPhone SE. Both running 11.2, with Xcode 9.2/Swift 4. On both devices it did not work.