Now, you need to change the size of the collection view cell and collection view section header so that it more closely resembles the Explore screen that was shown in the app tour in Chapter 9, Setting Up the Basic Structure. To set the layout of the collection view cells, you use the Size inspector. Follow these steps:
- Select Collection View in the document outline. Click the Size inspector:
- The Collection View size settings will be displayed:
Configure the Collection View size settings, as follows:
- Cell Size: The width is 196 and the height is 196.
- Estimate Size: None.
- Header Size: The width is 0 and the height is 100.
- Min Spacing: For cells, this is 0, while for lines, this is 7.
- Section Insets: Set the top, bottom, left, and right to 7.
Remember to press Return after changing each value.
The units that are used in the Size inspector are points. Each point may refer to one or more pixels on the device screen. For the iPhone 11, the screen is 414 points wide and 896 points high, although the actual screen resolution is 828 x 1,792 pixels.
Cell Size determines the size of the collection view cell. Header Size determines the size of the collection view section header. Min Spacing determines the space between cells. Section Insets determines the space between the section containing the cells to the sides of the enclosing view. These settings are specific to the iPhone 11. In Chapter 24, Getting Started with Mac Catalyst, you will calculate the optimum cell size based on the dimensions of the device screen.
Build and run your project:
Note that, although there is no data in the cells and no button in the header, it looks similar to the Explore screen that was shown in the app tour in Chapter 9, Setting Up the Basic Structure. You will configure the cells to display data in the next part of this book. For now, let's add a button to the collection view section header, which will be used later to display the Locations screen.