UICollectionView inside UIView - xcode

Question

I am trying to implement a UICollectionView inside a UIView, but I cant find out how to do it. There is a lot of tutorials on how to use UICollectionView with a UICollectionViewController, but not how to implement one in a regular View.
How do you do that?

Answer 1

1) Drag a UICollectionView into your UIView and size it appropriately.
2) Create a property which is also an IBOutlet in your .h file for the collection view:
#property (nonatomic, retain) IBOutlet UICollectionView *myCollectionView;
3) Again in your .h file declare your delegates, so now your .h should look somethng like this:
#interface UtaQuickView : UIViewController <UICollectionViewDataSource, UICollectionViewDelegate> {
}
#property (nonatomic, retain) IBOutlet UICollectionView *myCollectionView;
4) Connect your myCollectionView IBOutlet in your storyboard.
5) (optional) If you're targeting anything older than iOS6 synthesize your myCollectionView property. If you're targeting iOS6, it will auto-synthesize it for you. This goes for all properties, not just UICollectionViews. So in iOS6, you don't need to #synthesize myCollectionView = _myCollectionView at all. You can just use _mycollectionview wherever you need to access the property.
6) In your .m file viewDidLoad, set your delegate and dataSource.
_myCollectionView.delegate = self;
_myCollectionView.dataSource = self;
7) Implement the required dataSource methods:
#pragma mark - UICollectionView DataSource
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
From there you can implement as many or as little of the UICollectionViewDelegate methods as you need. However, 2 are required according to the documentation:
#pragma mark - UICollectionViewDelegate
- (void)collectionView:(UICollectionView *)collectionView didEndDisplayingCell:(UICollectionViewCell *)cell forItemAtIndexPath:(NSIndexPath *)indexPath
- (void)collectionView:(UICollectionView *)collectionView didEndDisplayingSupplementaryView:(UICollectionReusableView *)view forElementOfKind:(NSString *)elementKind atIndexPath:(NSIndexPath *)indexPath
It's important to note that you can substitute <UICollectionViewDelegateFlowLayout> for <UICollectionViewDelegate> and still have access to all of the methods in <UICollectionViewDelegate> because <UICollectionViewDelegateFlowLayout> is a subclass of <UICollectionViewDelegate>.
UICollectionViewDataSource Protocol Documentation
UICollectionViewDelegate Protocol Documentation

Answer 2

And the Swift version
Drag a UICollectionView into your UIView and size it appropriately.
Modify your UIViewController to extend UICollectionViewDataSource and UICollectionViewDelegate
Implement the required functions
Control-Drag from your storyboard to the class to create an outlet 'collectionView'
In the viewDidLoad() wire up the delegate and datasource to self
collectionView.delegate = self and collectionView.dataSource = self
It should end up looking like this:
class CustomerViewController: UIViewController, UICollectionViewDataSource, UICollectionViewDelegate
{
#IBOutlet weak var collectionView: UICollectionView!
override func viewDidLoad() {
collectionView.delegate = self
collectionView.dataSource = self
}
func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
}
func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
}
func collectionView(collectionView: UICollectionView, didEndDisplayingCell cell: UICollectionViewCell, forItemAtIndexPath indexPath: NSIndexPath) {
}
func collectionView(collectionView: UICollectionView, didEndDisplayingSupplementaryView view: UICollectionReusableView, forElementOfKind elementKind: String, atIndexPath indexPath: NSIndexPath) {
}
}

Answer 3

Drag a UICollectionView into your UIView and size it appropriately.
Create a property which is also an IBOutlet in your .h file for the collection view:
#property (nonatomic, retain) IBOutlet UICollectionView *myCollectionView;
in UIView first you need to declare your UICollectionView cell in -(void)awakeFromNib
[myCollectionView registerNib:[UINib nibWithNibName:#"nib file of collectionView cell" bundle:nil] forCellWithReuseIdentifier:#"identifier"];
then
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
custom class *cell1=[collectionView dequeueReusableCellWithReuseIdentifier:#"identifier" forIndexPath:indexPath];
return cell1;
}

Answer 4

Drag uiviewcontroller to the stroryboard.
Create the new class file for the new uiviewcontoller
Set the newly created class to our viewcontroller. And add protocol methods to the .h file. -UICollectionViewDelegate,UICollectionViewDataSource
Drag uicollectionview to the viewcontroller, by default there will be a uicollectionviewcell with the collectionview.
Create new class for the cell customisation as the subclass of the uicollectionviewcell and set the class to the cell in the identity inspector. Also set reuse identifier in the attributes inspector, the name we should specify to identify the uicollectionviewcell. Say cell here.
Drag and drop an imageview(can be anything as your wish) inside the uicollectionviewcell, size it to fit within.
Set an image with the imageview(this image will be shown repeatedly with the collectionview).
Set the delegate and datasource with the uicollectionview to the corresponding viewcontroller.
Set datasource methods - numberOfItemsInSection and cellForItemAtIndexPath.
Return the required cell count with the numberOfItemsInSection method. Say 10 here.
Return the cell to display with the cellForItemAtIndexPath.
NSString * identifier = #"cell";
CollectionViewCellForDay * cell = [collectionView dequeueReusableCellWithReuseIdentifier:identifier forIndexPath:indexPath];
return cell;
By now, you should be able to have a visual of a 10 cell collection view :)