CollectionView in iOS 6 (Complete Theory)

The Collection View have been introduced as part of iOS 6. 

Why we need UICollectionView?

For years , iOS developers have used the UITableView component to create a huge variety of interfaces.

But still if you want to present data in multiple columns, for example, you need to combine entire rows of data into a single cell.

There is no way to make a UITableView scroll its content horizontally.

Well, apparently Apple realized this too, iOS 6 includes a new class called UICollectionView that is built to address theses shortcomings, Like a table view, this class lets you display a bunch of "cells" of data and will handle things like queueing up unused cells for later use. UICollectionView uses a halter class to do layout.

At the abstract level, a collection view consists of four key elements

1. Cells

2. Supplementary Views

3. Decoration Views

4. Layout Object

Cell : A cell is a representation of an item of data to be displayed (for example an image or a set of text based data).

Supplementary Views : Supplementary views are objects that provide additional information about a section in a collection view. These are somewhat similar to section headers and footers in table views but are more general purpose and provide a greater level of flexibility in terms of positioning and content.

Decoration Views : Decoration views can be used to provide a decorative background for the collection view which scrolls along with the content.

Note - Standard Flow layout class does not support decoration views.

So, Mainly three requirement for UICollectionView

1. UICollectionViewDataSource

2. UICollectionViewDelegate

3. UICollectionViewFlowLayout

UICollectionViewDataSource : The collection view instance needs a data source object from which to obtain the data items to be displayed.

UICollectionViewDelegate : The collection view instance needs a delegate object to handle user interaction with the collection.

UICollectionViewFlowLayout : The most important requirement for the UICollectionView class is a layout object to control the layout and organization of the cells.

By default, the UICollectionViewFlowLayout class is used by instances of the UICollectionView class.

Some Important classes and protocols for UICollectionView

1. UICollectionView class

2. UICollectionViewCell class

3. UICollectionViewFlowLayout class

4. UICollectionViewLayoutAttributes class

5. UICollectionViewDataSource protocol

6. UICollectionViewDelegate protocol

7. UICollectionViewFlowLayout protocol

1. UICollectionView  : The UICollectionView class is responsible for managing the data items that are to be displayed to the user.

2. UICollectionViewCell : UICollectionViewCell class is responsible for displaying whatever data is provided to the UICollectionView instance by the data source with one cell corresponding to one data item.

It has three parts 

2.1 Content View

2.2 SelectedBackground View

2.3 Background View

3. UICollectionViewFlowLayout  : The UICollectionViewFlowLayout class is the default layout class for collection views and is designed to layout cells in a grid-like manner.

By default, flow is implemented in a manner similar to that of “line wrapping” in a text editor.When one row of cells is full, the cells flow onto the next row and so on until all cells capable of fitting into the currently visible display region are visible. The flow layout class supports both horizontal and vertical scrolling configurable via the scrollDirection property. also supports the spacing between lines of cells in the grid.

4. UICollectionViewLayoutAttributes : Each item in a collection view has associated with it a set of attributes, below listed some important attributes

• alpha – the transparency of the item.
• center – the location of the center of the item.
• frame – the CGRect frame in which the item is displayed.
• hidden – whether or not the item is currently visible.
• indexPath – the index path location of the item in the collection view.
• representedElementCategory – The type of item for which the attributes apply (i.e. for a cell, supplementary or decoration view).
• size – the size of the item.
• transform3D – the current transform of the item. Attribute can be used to perform tasks such as rotating or scaling the item.
• zIndex – controls the position of the item in the z axis

5. UICollectionViewDataSource : The UICollectionViewDataSource protocol needs to be implemented by the class responsible for supplying the collection view. This  basically consists of a number of methods that define information such how many items of data are to be displayed, how the data is divided into different sections and, most importantly, supplies the collection view with the cell objects to be displayed.

below listed some important methods

Mandatory Methods

• collectionView:numberOfItemsInSection: - Returns the number of items to be displayed in the specified section of the collection view.

• collectionView:cellForItemAtIndexPath : This method is called by the collection view when it is ready to display a cell at the specified index path location in the collection view. It is required to return a cell object configured appropriately for the referenced index.

Optional methods

• numberOfSectionsInCollectionView: - Indicates to the collection view the number of sections into which the collection view is to be divided.

• collectionView:viewForSupplementaryElementOfKind:atIndexPath :Called by the collection view to request a supplementary view of the specified kind. Returns an appropriately configured object to be displayed. In terms of the UICollectionViewFlowLayout class, the layout will request a supplementary view for either a header (UICollectionElementKindSectionHeader) or footer (UICollectionElementKindSectionFooter).

6. UICollectionViewDelegate : The UICollectionViewDelegate protocol defines a set of optional methods relate primarily to handling user interaction with the collection view elements (such as selecting a specific cell).

below listed some important methods

• collectionView:shouldSelectItemAtIndexPath: - Returns a boolean value indicating whether the specified item is selectable by the user.
• collectionView:didSelectItemAtIndexPath: - Called by the collection view when the specified item has been selected by the user.
• collectionView:shouldDeselectItemAtIndexPath: - Returns a boolean value to indicate whether the specified item may be deselected by the user.
• collectionView:didDeselectItemAtIndexPath: - Called by the collection view when the specified item has been selected by the user.
• collectionView:shouldHighlightItemAtIndexPath: - Returns a boolean value indicating whether the specified item should be highlighted as a pre-cursor to possible selection by the user.
• collectionView:didHighlightItemAtIndexPath: - Called by the collection view when the specified item has been highlighted.
• collectionView:didUnhighlightItemAtIndexPath: - Called by the collection view when the specified item has been un-highlighted.
• collectionView:didEndDisplayingCell:forItemAtIndexPath: - Called by the collection view when the specified cell has been removed from the collection view.
• collectionView:didEndDisplayingSupplementaryView:forElementOfKind:atIndexPath: - Called by the collection view when the specified supplementary view has been removed from the collection view.

7. UICollectionViewFlowLayout : The UICollectionViewFlowLayout class has a number of properties that can be set to globally set default characteristics for items within a collection view (for example item spacing, line spacing, inter-cell spacing, supplementary view header and footer sizing etc).

below listed some important methods

• collectionView:layout:sizeForItemAtIndexPath: - Required to return to the flow layout object the size attributes for the item at the specified index path.
• collectionView:layout:insetForSectionAtIndex: - Required to return the inset value for the specified collection view section.
• collectionView:layout:minimumLineSpacingForSectionAtIndex: - Required to return the inset value for the specified collection view section.
• collectionView:layout:minimumInteritemSpacingForSectionAtIndex: - Required to return the interim spacing between cells in a row for the specified collection view section.
• collectionView:layout:referenceSizeForHeaderInSection: - Required to return the size for the header supplementary view for specified collection view section. Note that if a size is not specified, the view will not appear.
• collectionView:layout:referenceSizeForFooterInSection: - Required to return the size for the footer supplementary view for specified collection view section. Note that if a size is not specified, the view will not appear.

So this is what Apple guys added new Lib class added for iOS developer

You may love to go for Simple Tutorial for UICollectionView I have created for beginner.

or soon I'll add Advance UICollectionView Tutorial here, so stay tune with me :)

I would love here your thoughts!!