How can I set the collection cell width to dynamic stretch to phone width

Question

How can I set the collection cell view to dynamically stretch to iphone screen width (e.g. iphone 5s, iphone 6 plus)?

I tried:

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView
                  cellForItemAtIndexPath:(NSIndexPath *)indexPath {

    (ResultCell *)[collectionView dequeueReusableCellWithReuseIdentifier:cellClass
                                                                      forIndexPath:indexPath];

    cell.bounds = CGRectMake(0,0, self.view.bounds.size.width, 150);

    return cell;
}

That does not work. I don't see the content get stretch to the right side of the screen.

I have tried adding this delegate method:

- (CGSize)collectionView:(UICollectionView *)collectionView
            layout:(UICollectionViewLayout *)collectionViewLayout
            sizeForItemAtIndexPath:(NSIndexPath *)indexPath
{
    CGSize cellSize;

    cellSize.width = self.view.bounds.size.width;

    // body view height
    cellSize.height = 150;

    return cellSize;
}

I have set breakpoints in the method, but that method never get called?

Answer 1

I had the same issue with the same use case. I finally ended up doing

- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath
{
    return CGSizeMake(collectionView.bounds.size.width, 150);
}

This changes the size of each item (cell) of the collection view. Hence you could change the size of each cell using this. Here i need the cell width to be same as of my UICollectionView so i passed the UICollectionview's width and specific height that i desired. Hope this would help.

Also there is no need to set the cell bounds in - (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath as the size gets set via - (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath

Also make sure that you have attached the desired Delegates & DataSources to the UICollectionView

Answer 2

The size of the cells are specified by the layout object of the collection view. Are you using a UICollectionViewFlowLayout? Try either setting the itemSize property of the layout object or implementing the delegate method: collectionView:layout:sizeForItemAtIndexPath:

You will be able to specify the size of the item (cell) relative to the collection view's bounds there.

Keep in mind that your collection view also needs to be set up so that it resizes with your view controller. If you're using a UICollectionViewController that should be set up automatically. Otherwise, you'll have to constrain your collection view to the bounds of its superview.

Update:

You can set the itemSize property of the layout directly on the layout:

self.layout.itemSize = CGSizeMake(CGRectGetWidth(self.collectionView.bounds), 100);

or, (better if you're handling rotation or resizing), implement the appropriate delegate call back:

- (CGSize)collectionView:(UICollectionView *)collectionView
                  layout:(UICollectionViewLayout *)collectionViewLayout
  sizeForItemAtIndexPath:(NSIndexPath *)indexPath
{
     return CGSizeMake(CGRectGetWidth(collectionView.bounds), 100);
}

I'd recommend reading the appropriate UICollectionView docs to get more familiar with how collection views and their layout's work:

• UICollectionViewDelegateFlowLayout

• UICollectionViewFlowLayout

• UICollectionView Programming Guide