UICollection Compositional Layout Part 3

Create a Badge Supplementary View

  1. First we define an NSCollectionLayoutAnchor for our badge. By specifying [.top, .trailing] we position our badge in the top right corner of the parent, while the fractionalOffset positions our badge’s center in the the corner. A fractionalOffset of .zero would position the whole badge inside the parent.
  2. As encountered before, we need to create a size for our item, so here we specify that we our badge should have a fixed value for width and height
  3. We initialise our NSCollectionLayoutSupplementaryItem by assigning it the size, the anchor and an elementKind, based upon which we will identify our badge in collectionView:viewForSupplementaryElementOfKind:atIndexPath:.
  4. Now that we have our badge ready, we just need to assign it to our items. To do so just replace NSCollectionLayoutItem initialiser and add supplementaryItems and passed badge
Figure 1
Figure 2
  1. If we want to tell Compositional Layout we want supplementary views, we need to associate them with NSCollectionLayoutItem or NSCollectionLayoutGroup. This can be done either with init or later with the supplementaryItems property. Both cases expect an array of NSCollectionLayoutSupplementaryItem. This is a class that lets us define the supplementary items. You can’t add NSCollectionLayoutSupplementaryItem item on section. For section we have NSCollectionLayoutBoundarySupplementaryItem which we will see in next section
Figure 3
Figure 4
  1. create a badge , anchor it to item which is cell
  2. Then create a group assign item to a group
  3. Finally we create sectionHeader NSCollectionLayoutBoundarySupplementaryItem , give it layout headerFooterSize and give alignment to header as top and footer bottom. Note headerFooterSize is dynamic which means it will grow as the content increase this is happen because we provide estimated height instead of absolute
  4. Then we supply boundarySupplementaryItems and pass header and footer to section
struct ElementKind {
static let badge = "badge-element-kind"
static let background = "background-element-kind"
static let sectionHeader = "section-header-element-kind"
static let sectionFooter = "section-footer-element-kind"
static let layoutHeader = "layout-header-element-kind"
static let layoutFooter = "layout-footer-element-kind"
}
Figure 5
Gif 1
Figure 6
Figure 7
Figure 8
Gif 2
Figure 9
struct ElementKind {
static let badge = "badge-element-kind"
static let background = "background-element-kind"
static let sectionHeader = "section-header-element-kind"
static let sectionFooter = "section-footer-element-kind"
static let layoutHeader = "layout-header-element-kind"
static let layoutFooter = "layout-footer-element-kind"
}
Figure 10
Figure 11
Figure 12
Figure 13
Figure 14

Decoration Items

Figure 15
Figure 16

Global Header , Footer and Decorative View

Figure 17
Figure 18

Useful links

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store