This is a six-part “walkthrough” tutorial that’ll show you how to use various features of the Collection View via a drink recipe application called BevUp. This is the first part of the “walkthrough” tutorial and in it you’ll learn exactly what the Collection View is. I will also introduce you to the BevUp application we’ll create in the tutorial series.
What exactly is a Collection View?
A Collection View is an object instantiated from the UICollectionView class. It is a data-driven container like a table view, where you have total control of laying out its items as shown in Figure 1. Real world examples of these layouts are shown in Figure 2. If you know how to use the table view control, you’ll have no problem using the collection view control.
 |
 |
| Figure 1: Collection view layouts | Figure 2: Real world examples of collection views |
How components of the collection view work?
The collection view is a container for items and they are provided by a data source. You connect the datasource to the collection view via a view controller class. This class tells the collection view how many item it has and what each item is. The UICollectionViewDatasource protocol provide specific methods for writing code for providing these items to the collection view’s cells, and they could be represented as photos, documents, videos, audio files, or even some kind of custom object. Each item is a cell, a UICollectionViewCell object and you’re the one responsible for provided them in the collection view. There isn’t a default layout for a cell. You’ll have to provide it for the collection view’s cell by subclassing the UICollectionViewCell class and you will learn how to do that shortly. Ok, so the collection view’s datasource provide these cells, and they can be exactly the same size or not. They can be large, small, or a combination of both. You might have a 5 or 6,000 cells, and the collection view will take care of arranging them for you, in stacks, grids, circles, or anyway you like-the sky’s the limit.
Now the collection view’s delegate is responsible for enabling the user to interact with its cells. For example, long-pressing a cell, selecting a cell, and scrolling the cells vertically or horizontally. The UICollectionViewDelegate protocol provide specific methods for writing code to respond to these events.
 |
| Figure 3: Components of a Collection View control |
The collection view use something called a layout object. It provides rules for how cells are laid out, how much spacing should be between the cells, are there headers and footers? The default layout object is called a flow layout, it provides all the rules for creating a grid style system of rows and columns. This layout object is an instance of the UICollectionViewFlowLayout class and you can subclass it so you can define your own layout object, your own set of rules. Ok, so the layout object determine how cells are laid out, but the collection view control will actually lay them out.
You can split a collection view’s cells into sections, you can give the collection view a background image, headers and footers, and so on. That’s pretty much the core components of the collection view control.
The Collection View Application
To show you how to use the Collection View control, we’ll create an iPad application called BevUp!”. It’ll have two views as shown in Figure 4 and 5 below.
The Drink Recipes View
It is shown every time the app is launched and it will enable the app user to perform tasks listed below.
 |
|
| Figure 4: Sketch of the Drink Recipes view | |
The Recipe Detail View
It is shown in the iPad simulator, when the user click a Collection View Cell. It will enable the app user to perform tasks listed below.
 |
|
| Figure 5: Sketch of the Recipe Detail view | |
Segue Transitions and The “delete” Mode
Take a look at Figure 6, it shows how the segue that transition the user to the Recipe Detail screen. It also shows the unwind segue that transition the user back to the Drink Recipes screen. As for Figure 7, it shows how the user put the Drink Recipes view in “delete” mode.
 |
 |
| Figure 6: Segue and unwind segue | Figure 7: Sketch of the Drink Recipes view in “delete” mode |
The App Data Model
The application’s data will be stored in a plist file called DrinkList and it will contain 33 array items as shown in Figure 8 below. A single array item is in fact a drink recipe and its elements are shown in the collection view cells and the Recipe Detail view’s controls.
 |
| Figure 8: Items in the DrinkList.plist file |
Now, we will add code in the DrinkRecipesViewController.m file’s viewDidload method to load the plist file’s array items in a mutable array called drinkList. When the user search for a drink recipe by name, the app will pull array elements that match the search term from the drinkList array and put them in a mutable array called searchResults.
That’s all for this week. Next, we’ll get to work in creating the BevUp! application and implement features of the collection view control. Until then, happy coding! 🙂
No responses yet