How to resize collection view cells to fit the device screen size?

Question

I noticed that cells will always follow the definition in the size inspector. Even if I already applied UICollectionViewDelegateFlowLayout.

So what does it look like. But I want the cells to look more like the ones on the smaller iphone screen.

Answer 1

swift

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize { let height = view.frame.size.height let width = view.frame.size.width // in case you you want the cell to be 40% of your controllers view return CGSize(width: width * 0.4, height: height * 0.4) } 

Goal c

 - (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath { CGFloat height = self.view.frame.size.height; CGFloat width = self.view.frame.size.width; // in case you you want the cell to be 40% of your controllers view return CGSizeMake(width * 0.4, height * 0.4); } 

Answer 2

Swift 4

You can do something like this:

 class yourClassName: UIViewController, UICollectionViewDelegate, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout { func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize { return CGSize(width: self.myCollectionView.frame.height / 6 * 5, height: self.myCollectionView.frame.height / 6 * 5) } } 

self.myCollectionView is a link from your collection view. Item is important to implement UICollectionViewDelegateFlowLayout

And since it will not match another cell, you will only have one row.

Answer 3

You should try using a simple equation when setting the cell size instead of number, for example:

 func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize { return CGSize(width: view.frame.width / 2, height: 350) } 

dividing it by 2 will mean that the cell will always be half the size of the screen, taking away the appearance of the MinimumLineSpacing functions and / or UIEdgeInset methods that you called. Hope this helps.

Answer 4

One way to do this is to keep the aspect ratio of the cell and set the size as follows:

 func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize { if (screenheight < 667) { return CGSize(width: 155, height: 200) } else if (screenheight < 736) { return CGSize(width: 182, height: 220) } else { return CGSize(width: 200, height: 230) } } 

Answer 5

In swift 3, you can resize the collection view cell to fit the screen using the collectionViewLayout property.

those.

  let numberOfCell = 3 let cellSpecing = 10 if let layout = collectionView.collectionViewLayout as? UICollectionViewFlowLayout { layout.itemSize = CGSize(width: (screenSize.width - (cellSpecing * (numberOfCell + 1))) / numberOfCell, height: cellHeight) layout.invalidateLayout() } 

Answer 6

According to my experience, you should use the UICollectionView methods to get the collection cell size for a specific device, as described below, you can get the dynamic width and height of the collection view cell.

 // Dynamic width & height - (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath { float cellSize = collectionView.frame.size.width/values.count; return CGSizeMake(cellSize - 10, collectionView.frame.size.height); } //For top/bottom/left/right padding method - (UIEdgeInsets)collectionView:(UICollectionView*)collectionView layout:(UICollectionViewLayout *)collectionViewLayout insetForSectionAtIndex:(NSInteger)section { return UIEdgeInsetsMake(0, 0, 0, 1); } - (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout insetForSectionAtIndex:(NSInteger)section { float width = collectionView.frame.size.width; float spacing = [self collectionView:collectionView layout:collectionViewLayout minimumInteritemSpacingForSectionAtIndex:section]; int numberOfCells = (width + spacing) / (cellSize + spacing); int inset = (width + spacing - numberOfCells * (cellSize + spacing) ) / 2; return UIEdgeInsetsMake(0, inset, 0, inset); } - (CGFloat)collectionView:(UICollectionView *) collectionView layout:(UICollectionViewLayout *)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger) section { return 1.0; } 

Hope this helps you create your cell based on the size of the device.

Answer 7

in Swift 4

You can simply extend your view controller from UICollectionViewDelegateFlowLayout and implement this method:

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

in this example, I make the width of the cells equal to the width of the CollectionView you can adapt depending on your needs.

Answer 8

  func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize { let theWidth = (_screenSize.width - (15*3))/2 // it will generate 2 column let theHeight = (_screenSize.height - (10*2))/3 // it will generate 3 Row return CGSize(width: theWidth ,height: theHeight) }