How LayoutCode solved UICollectionView Compositional Layout Complexity

UICollectionView compositional layout is a powerful feature in iOS development. You can create various complex layouts, but it is quite complicated to use. It is because the syntax is quite hard to remember, it takes some time for initial setup and it is difficult to visualize the final result. The complexity increases when there are nested layout items in a section layout.

Collection View in LayoutCode is created based on NSCollectionView/UICollectionView compositional layout for macOS/iOS. By using LayoutCode, those complexity decreased tremendously, you can update any attributes and instantly see the final design. Collection View retained similar terms and attributes from UICollectionView, such as you need datasource, cell view and section layout to have a working Collection View.

1. Datasource: Datasource manage data of the collection view, such as section count, cell count in a section or select cell view in a section.
2. Cell View: Cell view provides the visual representation for each item of section in the Collection View. Header, footer, background and supplementary view are also considered as cell view.
3. Section Layout: A section layout comprised of root group, which comprised of layout groups and layout items. A complex section layout may have nested layout groups and layout items.

In this post, we will compare steps required to create a UICollectionView compositional layout by using manual coding and by using LayoutCode. Figure 1 shows an example of a simple Collection View with a table layout. Figure 1 will be used as a reference throughout this post. Figure 2 shows Collection View with more complex layout with 3 different cell views, 2 different header views, a footer view, 3 different section layouts.

How to create UICollectionView compositional layout using Swift

It will be a long post to write full details on how to create a UICollectionView compositional layout by coding manually using Swift. Instead, we will show simplified steps to create a UICollectionView by coding using Swift with table layout similar in Figure 1.

1. Create cell and header views classes, setup its properties and constraints either using code, interface builder or storyboard
2. Create cell model classes and collection view datasource
3. Configure Layout: You need to write code for the root group layout, and the layout item. Both root group and layout item need to have its own size, either in fraction value, absolute value or estimated value. The values are relative to its parent container. Specifying these values can quickly become convoluted when you create a more complex layout. For a simple table layout as in Fig 1, you need to set:
   • Root group height: absolute value = 50
   • Root group width: fraction value = 1
   • Layout item width: fraction value = 1
   • Layout item height: fraction. value = 1
4. Configure datasource: Register the cells and header views to the collection view, and update the cell views properties from cell model data. Then apply the datasource data to the collection view.

These steps will become more complex and hard to track especially when you are creating a collection view with multiple sections, header, footers, layouts or different types of cell views. It also will take some time to initially set up necessary classes and datasource.

How to create Collection View using LayoutCode

Here are the steps necessary to create a table layout collection view as shown in Figure 1 by using LayoutCode.

1. Create the necessary cell view and header view, add its children views and set up necessary constraints.
   
2. Add user variables from cell view which act as cell model in the generated code. Also, by using user variables each cell can be customized with a different set of data. In this case, image and title can be added.
3. Create section layout and create additional layout groups and layout items if needed. Set the attribute values for the section layout, root group and layout item.
   
   We are using table layout in Figure 1 as example, so the attributes values need to be set are same as when creating the layout manually using Swift, as explained above. The differences are you can see any changes at the Collection View preview instantly.
4. At Datasource Inspector, update the section count to 3. Select each section, set cell count if needed and set the cell view and header view. Alternatively, you can set the cell view by using the cell view’s artboard. For each cell in each section, you can set the image and title user variables you have added in step 2.
   
5. That is all, you can see the final design at Collection View Preview same in Figure 1.

If you want to create complex Collection View with multiple sections, different layouts, different cell views, different header and footer views and different background view, the steps are the same and the complexity to create it does not increase. You can change any data visually in one place and no need to remember any syntax. Basically, you just design what you want, then what you see is what you get. You can export the generated code by using Code Generator in the app.

What is Collection View Preset?

Collection View Preset is a powerful tool that let users to get started with Collection View quickly. There are few advantages of the tool

1. There are still learning curve to use Collection View in LayoutCode
2. Users can immediately see what kind of Collection View can be created.
3. Users can directly add the collection view’s preset or the collection view section’s preset to the project
4. Each collection view preset have their own unique attributes. The attributes are derived from the collection view cells and section layouts. By changing the attributes, the collection view is instantly updated.

One part when creating a Collection View that might be confusing to users, even for iOS developers are the attributes of layout groups and layout items. As explained in the steps to create a collection view above, each layout group and layout item have their own attributes such as size and content inset, and it is quite difficult to grasp which attributes to change to have a correct layout especially for a complex layout.

Collection View preset can be used to increase user understanding of Collection View by displaying important attributes only, which are derived from the collection view cells and section layouts. You can see the value path of the attributes by hovering the mouse over it. For example in Figure 5, by hovering over the Cell Height attribute in Basic Table Layout, you can see the attribute is from Section Layout > basicTableLayout > Root Group > absoluteHeight. To check the source of the attribute, you can add the preset to the project and edit the collection view.

Conclusion

So there you have it! That is how LayoutCode solved the UICollectionView compositional layout complexity. You can visually create cell views, section layout and datasource to create a fully working Collection View. You can easily add multiple sections, cell views or section layouts and easily change or edit them. You can also use Collection View Preset to quickly get started creating Collection View and have understanding on how section layout attributes work. You can then export the generated code in Swift by using the Code Generator. Hope you have fun reading this post!