Decoration views are one of the great new features of collection views. Unlike cells and supplementary views (e.g. headers and footers), decoration views are layout-driven rather than data-driven. You can think of them as the shelves in the iBooks Store interface. Background views are another good candidate for implementing as decoration views.
So how exactly do you add decoration views to your collection view? It’s actually pretty simple.
- Create your decoration view. It should be a subclass of
UICollectionReusableView.
- Create your own
UICollectionViewLayout subclass if you don’t already have one. This can be a subclass of UICollectionViewFlowLayout if that’s what you’re using.
- Register your decoration view with your layout either by class name or nib.
- Return the appropriate attributes for your decoration view in
layoutAttributesForElementsInRect:
- Implement
layoutAttributesForDecorationViewOfKind:atIndexPath: to return attributes for the specified decoration view.
In my sample project IntroducingCollectionViews, the first layout, GridLayout, is an iBooks Store-style layout derived from UICollectionViewFlowLayout. The layout has shelves underneath each row of cells that are implemented as decoration views. I will go through the steps above to show how I implemented the shelf views in the GridLayout class.
Create the decoration view
I created a ShelfView class derived from UICollectionReusableView. It’s a very simple view (no subviews) — I just set backgroundColor to a color from a pattern image and add a drop shadow. (Performance tip: I set the shadowPath for the drop shadow on the backing layer. See here for why that’s important.)
Subclass UICollectionViewLayout
I created GridLayout as a subclass of UICollectionViewFlowLayout. The superclass handles the heavy lifting of positioning all the cells and headers and footers, but I have to handle the decoration views.
Register the decoration view
In the init method for GridLayout I register the shelf view by class.
[self registerClass:[ShelfView class] forDecorationViewOfKind:
[ShelfView kind]]
(Where kind is a convenience class method I added to return the kind string. Kind becomes important when you have multiple decoration view classes in your collection view.)
Implement layoutAttributesForElementsInRect:
This method is the meat of a layout. It’s where the layout tells the collection view about all items (cells, supplementary views, and decoration views) that are to appear within a given rect (generally the current visible rect based on the collection view’s current contentOffset). The collection view in turn takes over instantiating (or reusing) all necessary views and setting their position, size, and other visible characteristics (alpha, transform, zIndex, etc.).
Because I’m deriving from UICollectionViewFlowLayout, I can just call super to get the attributes for all the cells and supplementary views. I just need to add the decoration views (if any) to that array. But in order to know which decoration views might fall within a given rect, I need to do some calculations ahead of time. To do that I need to override prepareLayout. This is the method that gets called every time the layout becomes invalidated and is where you can calculate where all the collection elements should go.
In prepareLayout I calculate where the shelves will go (don’t forget to call super). Unfortunately, this means replicating much of the flow layout positioning since I want to position each shelf directly under each row (line) of speakers (actually each shelf goes under the speaker name label of each SpeakerCell). I calculate the frame of every shelf rect in the entire content area and store them in a dictionary keyed on index path where section is of course the section the shelf resides in and row is the 0-based index of the shelf within each section moving top to bottom. (This will be important when it’s time to implement layoutAttributesForDecorationViewOfKind:atIndexPath:)
Meanwhile, back in layoutAttributesForElementsInRect: I of course call super and then I enumerate through all my shelf rects and for any shelf rect that intersects with the specified rect (meaning a decoration view should appear at that position), I create a set of layout attributes for that decoration view and add it to the array of attributes returned by super. To create the attributes I call
[UICollectionViewLayoutAttributes
layoutAttributesForDecorationViewOfKind:[ShelfView kind]
withIndexPath:key]
Where I just pass in the kind and the index path (which happens to be the key of the dictionary I’m enumerating through). Then I set the frame to be the rect I have stored and also set zIndex to 0 (I set zIndex to be 1 on all the cells and supplementary views to make sure they appear in front of the shelves).
Implement layoutAttributesForDecorationViewOfKind:atIndexPath:
This one is pretty easy. Because I stored my shelf rects in a dictionary keyed on index path, I just use the passed index path to fetch the shelf rect and then I just create the attributes exactly as I did for layoutAttributesForElementsInRect: (Actually I have yet to see this particular method ever get called. I have a breakpoint set on it and have never had it be triggered.)
Summary
And that’s what it takes to add decoration views to a collection view. Decoration views are a cool new feature of collection views and are just one of the improvements of UICollectionView over its predecessor for data display on iOS, UITableView.
Once again, the sample project is on GitHub here. The wood paneling backgrounds are part of a set of retina-ready repeatable assets by Glyphish.
Go forth and make amazing collection view layouts!
When the iPhone 5 was announced last September, it was the first iPhone to ship without an Apple dock, and also the first iPhone that would not fit via an adapter in Apple’s so-called “Universal” dock. As an iOS developer, it’s useful for me to keep my phones upright and charging at my desk, ready to be debugged via Xcode, so I’ve always bought a dock for each iPhone generation. Furthermore I’ve always gone with Apple’s docks because they were available on launch, cheap enough, compact, and work well. But with the iPhone 5 for the first time I had to look for 3rd party docking options. Then I stumbled upon these directions for a LEGO phone dock that would integrate a Lightning cable. Because I love LEGO’s and the parts were cheaper than any other dock, I went ahead and ordered the parts from LEGO’s Pick-A-Brick store (I had to make some substitutions due to availability).
Another nice touch is having two grill pieces that don’t block the speaker and microphone, so that you can use the phone in speaker phone mode while docked. I also like that the front portions are smoothly tiled over with nary a stud in sight.
Early this year I purchased my first standing desk. Originally I was looking at treadmill desks as a way to help get in shape despite the long hours I spend at my desk each day. I didn’t feel like I had the time for a DIY project, so I was considering pre-built solutions such as this 
Customer service at GeekDesk was great and my desk arrived promptly. You assemble it yourself, but that’s easy and the build quality is great. Adding your own glass top is probably even easier than adding your own wood top because you can assemble the desk upright and merely set the glass top in place. The one thing you need are little rubber / silicone pads to put in between the metal frame and the glass top. These cushion the top but also provide the necessary friction so that the top will not slide sideways with pressure. Fortunately I already had these from my previous desk frame.
