UICollectionView, simply fit cell to width?

Question

Here's a simple UICollectionView in yellow

enter image description here

The red arrow sets the width of the cell. (TBC: clicking on the pink cell: for 'size' select 'Default', then what you set at the red arrow becomes the size of the cell.)

Example, for an upright iPhone set width to 320.

But this seems crazy ... surely I can set the cell width based on the width of the UICollectionView?

There's no problem autosizing the view itself ..

enter image description here

That works fine.

But it seems crazy that I can't set the width of the CELL to be "same as the view". It seems hard to believe one has to set it manually, in code?

TBC In other words, as Nikita points out,

-(CGSize) collectionView:(UICollectionView *)collectionView
     layout:(UICollectionViewLayout *)collectionViewLayout
     sizeForItemAtIndexPath:(NSIndexPath *)indexPath
    {
    return self.view.frame.size;
    }

(indeed you also typically need this ...)

-(UIEdgeInsets)collectionView:(UICollectionView *)collectionView
   layout:(UICollectionViewLayout*)collectionViewLayout
   insetForSectionAtIndex:(NSInteger)section
    {
    return UIEdgeInsetsMake(0,0,0,0);   //t,l,b,r
    }

In fact - you have to do that in code?! There's no way to do that in Storyboard, with autolayout, or anything else?!

In swift, you can do it like this `func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets { return .zero }` — Pini Cheyni, Apr 24 '19 at 13:01

score 33 · Accepted Answer · edited Oct 31 '16 at 21:23

33

I think you need to take a look at

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

of UICollectionViewLayout where you can set size based on orientation and current frame.

It would indeed seem that you simply have to do this in code.

edited Oct 31 '16 at 21:23

Fattie

27,874
70
431
719

answered Jul 23 '14 at 16:07

Nikita Took

3,980
25
33

2

Thanks for the prompt answer; I hear you. But again - it seems incredible you have to do that in code? In iOS, every single other type of view (as far as I know), you can simply indicate it stretches to fill the container view it is in, right? thanks again... – Fattie Jul 23 '14 at 16:17
2

@JoeBlow I think it's not a case with Cells. They are not designed to stretch to parent's size. But if you find a solution - let me know please:) – Nikita Took Jul 23 '14 at 16:18
LOL right on ... maybe that's all there is to it. For my next question, why the hell will the cell not sit on the bottom of the view!? Damn! – Fattie Jul 23 '14 at 16:19
In that case it might more interesting to use a UITableView. Collection view are made to build matrix not vector – jfgrang Mar 19 '15 at 12:32
@jfgrang tableview has lots of limitations on order, animation, etc that collection view doesn't. Sometimes that's the only possible way :) – Nikita Took Mar 23 '15 at 11:07
1

@NikitaTook I agree but in some cases UITableView also is better than collection view like tableViewFooter and section footers/headers. It is not because UICollectionView exist that we should stop considering using table views. – jfgrang Mar 24 '15 at 13:15
1

It's obvious to me that this should simply work. I am using the same storyboard for iPhone and iPad. On iPhone, the behavior will be that the cell matches the screen width. On iPad, I will use a different cell xib with different layout. Yes, this means that I'm essentially turning the collection view into a table view on the iPhone, but that's simply what I wish to do in this case. – bneely Jul 12 '15 at 21:55
Use CGSizeMake class to create a CGSize quick and easy. – levibostian Dec 15 '15 at 02:07
@user25 If you have a solution, post answer. But if you don't got anything constructive to add , I'd suggest just to ignore it and move on. – Filnor Feb 21 '18 at 15:12

Tjp · Answer 2 · 2017-06-12T18:15:06.860

There is a simple way to do this. Here is the swift code. Assumes you want one item wide and in the example my cells are 64 pts high, and I want 8 pts for side margins, and finally collectionView is the name of your UICollectionView.

Insert this into viewDidLoad :

    let layout = collectionView?.collectionViewLayout as! UICollectionViewFlowLayout
    layout.itemSize = CGSize.init(width: (UIScreen.main.bounds.width - 16), height: 64.0)

This will set all the cells to default to that size. You can still override individual cells if you subclass UICollectionViewLayout or UICollectionViewFlowLayout, as mentioned in other answers. But if you simply want to have more table view like behavior this should work.

score -2 · Answer 3 · answered Oct 14 '16 at 08:08

-2

I my case cell inset making extra shapes

answered Oct 14 '16 at 08:08

GauravSTomar

604
1
7
26

UICollectionView, simply fit cell to width?

3 Answers3

Linked