Game Piece Collection View

Here is an example of UICollectionViews used as armies on a board game.

Each grouping of armies is a collection view – here are two collection views:

Generally collection views contain unique objects defined by some meaningful text. In this case, the data source method collectionView:cellForItemAtIndexPath: simply adds a UIView (SPYArmyView) to the cell’s content view and gives it a color.

The action happens in the custom view layout – SPYBrigadeViewLayout.

For each item returned from the data source, a single army unit is added to the stack. The data source only needs to know the total quantity of armies and the color.

The layout uses these private properties:

View Layout Properties
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
@property int maxColumnStack;
@property int minColumnStack;
@property int unitPieceHeight;
@property int unitPieceWidth;
@property int extraHeight;
@property int extraWidth;
@property float halfUnitPieceHeight;
@property float halfUnitPieceWidth;
@property float columnHeightOffset;
@property float aisleWidthOffset;
@property int maxColumnCount;
@property int zIndexDirection;
@property float transformScaleFactor;

In this case, maxColumnStack = 4 and maxColumnCount = 3.

Here is a GitHub Gist link to the UICollectionViewController file, another for the UICollectionViewLayout, and another for the UIView that represents the content of an individual cell.