UICollectionView inside UIView

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

1. Drag a UICollectionView into your UIView and size it appropriately.

2. Modify your UIViewController to extend UICollectionViewDataSource and UICollectionViewDelegate

3. Implement the required functions

4. Control-Drag from your storyboard to the class to create an outlet 'collectionView'

5. 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) {

        }
    }