UICollectionView adding UICollectionCell

Question

When I try to put UICollectionCell to UICollectionView in Interface Builder I can't put it with unknown reasons. The cell is going to the tools bar without adding to UICollectionView

I am using:

iOS SDK 6.0
XCode 4.5.1
I don't use Storyboard

[Here is a simple walkthrough](http://stackoverflow.com/a/31735229/3681880) for making a `UICollectionViewCell` in a `UICollectionView`. — Suragch, Jul 30 '15 at 23:21

score 142 · Accepted Answer · answered Mar 03 '13 at 11:09

142

Only UICollectionView inside StoryBoard have UICollectionViewCell inside. If use XIB, create a new XIB with CellName.xib, add CollectionViewCell to it, specify name of UICollectionView custom class. After that use registerNib.

Sample code: https://github.com/lequysang/TestCollectionViewWithXIB

answered Mar 03 '13 at 11:09

LE SANG

10,607
7
55
78

@NAQ okay well, how do you use your class? sure you've registered your nib which is linked to a class, but the class initWithFrame is not invoked. so if you couldn't to do some additional styling on your xib outlets on init. what is the benefit of having the MyCell class in this example? – topwik May 28 '13 at 19:06
1

initWithFrame don't work in any Xib cell. Hook up IBOutlet to MyCell.h and call other methods in awakeFromNib. – LE SANG May 28 '13 at 22:43
6

I'm amazed that Apple wasn't kind enough to mention this in documentation. -1 hr of my life. – expert Aug 27 '13 at 00:30
any clue why apple lets you include a UICollectionView inside a custom XIB, but not UICollectionViewCells? – Crashalot May 18 '16 at 21:54
Wasted 3 hours on it :x – Ankit Srivastava Aug 25 '16 at 11:14
Me too, I also wanted to know why? – RainCast Sep 21 '16 at 21:02

Anil Varghese · Answer 2 · 2016-02-13T04:13:34.887

You cannot put UICollectionViewCell directly into the UiCollectionView if you are using Xib file. Its possible only in storyboard. Add a UICollectionViewCell into a separate Xib file. Give your class name. Then register either class or xib before the collection view appears

 [self.collectionView registerClass:[CollectionViewCell class] forCellWithReuseIdentifier:CELL_ID];

Typically this is done in viewDidLoad.

This is the implementation of a custom UICollectionViewCell with out using Xib

 @implementation CollectionViewCell
 @synthesize imageView = _imageView;

- (id)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self) {

    self.backgroundColor = [UIColor whiteColor];
    self.layer.shadowColor = [UIColor blackColor].CGColor;
    self.layer.shadowRadius = 5.0f;
    self.layer.shadowOffset = CGSizeMake(2.0f, 2.0f);
    self.layer.shadowOpacity = 0.5f;

    // Selected background view
    UIView *backgroundView = [[UIView alloc]initWithFrame:self.bounds];
    backgroundView.layer.borderColor = [[UIColor colorWithRed:0.529 green:0.808 blue:0.922 alpha:1]CGColor];
    backgroundView.layer.borderWidth = 10.0f;
    self.selectedBackgroundView = backgroundView;

    // set content view
    CGRect frame  = CGRectMake(self.bounds.origin.x+5, self.bounds.origin.y+5, self.bounds.size.width-10, self.bounds.size.height-10);
    UIImageView *imageView = [[UIImageView alloc] initWithFrame:frame];
    self.imageView = imageView;          
    [imageView release];
    self.imageView.contentMode = UIViewContentModeScaleAspectFill ;
    self.imageView.clipsToBounds = YES;
    [self.contentView addSubview:self.imageView];       

}
return self;
 }

what would you do if you are using a xib for which you assign a class? I have a UICollectionViewCell class as the custom class of my cell xib. i registerNib withNibName firCellWithResueIdentifier in viewDidLoad (again xib is linked/connected to a cell class). can i combine a xib layout with extra customization done in code using my cell class? it doesn't look like the straight up flow will invoke initWithFrame on a class if you just register the nib. do i have to register both the nib and class with my collection view? — topwik, May 28 '13 at 18:26
@towpse replace initWithFrame to awakeFromNib in Cell.m. Don't return — LE SANG, May 28 '13 at 22:50
@towpse What NAQ said is right. Register the nib. Then for additional customization use initWithCoder or awakeFromNib of your custom cell (in cell.m) — Anil Varghese, May 29 '13 at 03:54
thanks for the answer. seems odd you can add a UICollectionView to a custom XIB but not a UICollectionViewCell ... any reason why this is? — Crashalot, May 18 '16 at 21:48

score 0 · Answer 3 · answered Sep 21 '16 at 21:26

Okay. There is actually a workaround for this, if you really wanted to have the cell in collectionView inside xib file from interface builder:

Create a storyboard.
Create the UICollectionView and the UICollectionViewCell from interface builder.
Adjust the UI with constraints etc to make it look exactly what you wanted it to be.
Create a new xib file.
Copy everything inside the storyboard to the new xib file.

It will work perfectly.

One thing to keep in mind that step #3 is very important, because after #5 you are not supposed to drag and move around the UICollectionView, if you do, the cell will magically disappear! Other than that, it will just work perfectly.

UICollectionView adding UICollectionCell

3 Answers3

Linked