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

Answer 1

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;
 }

Answer 2

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

Answer 3

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

1. Create a storyboard.
2. Create the UICollectionView and the UICollectionViewCell from interface builder.
3. Adjust the UI with constraints etc to make it look exactly what you wanted it to be.
4. Create a new xib file.
5. 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.