UICollectionView In iOS 6

http://www.raywenderlich.com/22324/beginning-uicollectionview-in-ios-6-part-12



When Apple first launched the iPad in 2010, you might have been particularly impressed by the Photos app bundled with the device. It had a unique and stylish way of displaying photos via a multitude of layouts. You could view your photos in a nice grid view:

Or you could view your photo albums at the top level as stacks:

You could even transition between the two layouts with a cool pinch gesture. “Wow, I want that in my app!”, you may have thought.
Well, implementing a grid view and other alternative layouts like this was possible to get working on your own, but also quite tricky! It required a lot of code and was difficult to get working exactly right. Couldn’t there be an easier way?
Good news – now there is in iOS 6! Apple has introduced a new class called UICollectionView that makes adding your own custom layouts and layout transitions (like those in the Photos app) incredibly simple to build.
You’re by no means limited to stacks and grids, because UICollectionView is extremely customizable. You can use it to make circle layouts, cover-flow style layouts, Pulse news style layouts – almost anything you can dream up!
The bottom line is you have an exremely powerful new way to present ordered data to users, and you should start learning about it! It’s just as important (and helpful) of a class as UITableView is. The good news is if you’re familiar with UITableView, you’ll have no problem picking it up – using it is very similar to the table view data source and delegate pattern.
In this tutorial, you’ll get hands-on experience with UICollectionView by creating your own grid-based photo browsing app. By the time you are done this tutorial, you will know the basics of using UICollectionView and will be ready to start using this amazing technology in your apps!

Anatomy of a UICollectionViewController

Let’s go right to an example of one of these babies in action. The UICollectionViewController family contains several key components, as you can see below:

Take a look at these components one-by-one:

1. UICollectionView – the main view in which the content is displayed, similar to a UITableView. Note that it doesn’t necessarily have to take up the entire space inside the view controller – in the screenshot above, there’s some space above the collection view where the user can search for a term.
2. UICollectionViewCell – similartoaUITableViewCellinUITableView. Thesecells make up the content of the view and are added as subviews to the UICollectionView. Cells can either be created programmatically, inside Interface Builder, or via a combination of the two methods.
3. Supplementary Views – if you have extra information you need to display that shouldn’t be in the cells but still somewhere within the UICollectionView, you should use supplementary views. These are commonly used for headers or footers of sections.
4. Decoration View – if you want to add some extra views to enhance the visual appearance of the UICollectionView (but don’t really contain useful data), you should use decoration views. Background images or other visual embellishments are good examples of decoration views.
In addition to the above visual components, UICollectionView also has non-visual components that help with laying out content:

5. UICollectionViewLayout – UICollectionView does not know anything about how to set up cells on screen. Instead, its UICollectionViewLayout class handles this task. It uses a set of delegate methods to position every single cell in the UICollectionView. Layouts can be swapped out during runtime and the UICollectionView can even automatically animate switching from one layout to another!
6. UICollectionViewFlowLayout – You can subclass UICollectionViewLayout to create your own custom layouts (as you’ll learn about in the next tutorial), but Apple has graciously provided developers with a basic “flow-based” layout called UICollectionViewLayout. It lays elements out one after another based on their size, quite like a grid view. You can use this layout class out of the box, or subclass it to get some interesting behavior and visual effects.

You will learn more about these elements in-depth throughout this tutorial and the next. But for now, it’s time for you to get your hands into the mix with a project!