An introduction to Collection Views (UICollectionView)

One of the new UIKit components of iOS 6 is Collection Views. This is a new tool you can use to manage different views on the screen in a grid or other shape format. When the number of views exceed the space on the screen, collection views, being a subclass of UIScrollView, display the cell in a scrollview.

A typical example of a collection view is represented by the Photo app, where the pictures are presented in a grid. The user can scroll up and down the pictures and then, for example, select one of them.

Very similar to table views, collection views brings together a set of cells. Each cell is represented by the UICollectionViewCell class. However, differently than the table view cells, the collection view cells come with no predefined style. They are simply an empty view. It’s responsibility of the developer to design the cells depending on the scope of the app.

Now, the content of each cell is provided by a datasource object as it happens for a table view and the methods you have to implement in your datasource class are very similar to the methods you implement in the datasource of a table view. So, let’s give a look at these methods:

As you can see, the names of these methods are very similar to the datasource methods of the tableview. The last method needs some more explanation, but let’s check first each of them.

The first method returns the number of sections in the collection view. Similar to the tableviews, collection views are organized in sections. Each section contains a given number of cells. You pass this number using the second method of the above list: the number of cells for each section.

You can also associate special views to each section. These views are the Supplementary View. Tableviews have a header and a footer for each section. Instead, collection views just have supplementary views that you can use as header or footer or both, or you can use for other purpose.

The third of the above listed methods is what provides the collection view cell to the collection view for each index path. This is the place where you pass the actual content to the collection view to display.

Finally, the fourth method returns the supplementary view for each index path. The kind of supplementary view is defined by the layout object that supports the supplementary view.

Let’s build an example with a collection view and its datasource. We are going to create the cell and see how to dequeue them from the memory.

Launch Xcode and create a new single view iPad project. Name it Collector. Use ARC and Storyboard. Go to the Storyboard and drag a collection view object from the Library and drop it to the view controller view. You could use a UICollectionViewController instead of creating your own view controller with a collection view on it, but I prefer this way so you can understand better the implementation details.

We could use Nib files instead of Storyboard. The implementation of the collection view (as other UIKit elements) will be slightly different. If you have any questions about Nib, just contact us.

Collection View

Figure 1. Collection view geometry.

Now, select the collection view just dropped on the view controller and go to the Size Inspector. As you can see (Fig. 1), you get a lot of controls on the size of each element. You can change the cell size, the header size, the footer size and so on. Let’s change here the cell size to 150x150. You can change these values dynamically using the UICollectionViewDelegateFlowLayout. This is a protocol that you have to use in combination with the UICollectionViewFlowLayout class.

Let’s clarify this point. Collection Views use three helpers to work: the data source (UICollectionViewDataSource), the delegate (UICollectionViewDelegate) and the layout (UICollectionViewLayout). The data source as we saw previously is used to provide the collection view with the content. The delegate is instead used to interact with the collection view (select a cell, add o remove a cell and so on). The layout is used to provide the collection view with the geometry information (cell size, spacing between cells and so). The UICollectionViewLayout is an abstract class (that means you cannot use it directly, but you have so subclass it). You need to create a subclass and describe there your custom layout. Now, Apple provides us with the grid layout and it calls it, the Flow Layout. So, there is a couple of extra classes you can use to manage this grid layout: UICollectionViewFlowLayout and the UICollectionViewDelegateFlowLayout. In this post, we can see how to use the grid layout. To learn how to create your own custom layout… well, the Apple documentation explains how or you can come to one of our training classes (check here next available classes).

Let’s go back to the exercise. We need to create a cell. Since we are using Storyboard, this is quite easy. You can edit the cell directly on the collection view object we just added to the view controller. Indeed, if you select the cell object as in the following Figure 2, you can edit it and add views to it.

Collection View

Figure 2. Editing a cell in Storyboard.

Let’s, for example, add a label to the cell and center it as shown in Figure 3. I also change the background of the cell to yellow, so you can see it.

Collection View

Figure 3. Refining a cell in Storyboard.

Now, we need to hook the cell to the source code. Let’s then add a new class (subclass of UICollectionViewCell) to our project. Let’s call it MyCell. Add to this class a property to connect to the label:

Go back to Storyboard and change the type of the cell to MyCell and connect the outlet to the label object as shown in Figure 4.

Collection View

Figure 4. Connect the outlet to the cell label

The last very important step is to add a reusable identifier to the collection view cell object as shown in Figure 5.

Collection View

Figure 5. Reusable identifier

Ok, now we need only to add the intelligence to all this. Go back to the ViewController.h and add an outlet and connect it to the collection view:

Now, we need to make this view controller be conform to the datasource protocol. Go back to the Storyboard and right-click the collection view. Connect the dataSource outlet to the view controller. Then, open the ViewController.h and add UICollectionViewDataSource to the class interface:

We can now implement our datasource methods. As explained previously, we need to pass the number of sections to the collection view. For this example, we will use just 2 sections. So, add the following piece of code to the view controller:

Next, we need to tell the collection view how many items per section. For the moment, let’s add 100 items for each section:

Finally, we need to display the content on each cell. Here, for simplicity, we just display the index of the item in that label we add in the Storyboard:

Make sure that the identifier is the one you used in the Storyboard. Now, just a quick note. If you are not using the Storyboard, you need to register the collection view to either the cell class or the Nib file using one of the following methods:

If you just run Xcode, it should compile ed execute the app.

Conclusion

We have seen the basic concepts to build the collection view functionality. There is much more. You can create really custom shapes of collection views and change their shape dynamically using, for example, the touch gestures or the accelerometer. You can really have a lot of fun and invent new way to present the content to your user. Check the Apple documentation or check here our training classes to learn more advanced iOS topics.

Keep coding,
Geppy

iOS Consulting | INVASIVECODE

iOS Training | INVASIVECODE

(Visited 21 times, 1 visits today)