A “Collection View” displays any number of identical parts as a grid. This grid is scrollable and usually covers the entire screen. Single entries (cells) can be tapped optionally. For example, a tap can be used to go from an image overview to an image detail page.
Of course, you can also configure the appearance of the “Collection View”.
To show the properties of the Collection View, click the Properties tab (the slider icon) in the upper right sidebar.
Here you give the element a name. This name is only used within appdoo. For example, you can quickly see in the outline where each Collection View is located. You can also edit the name by double-clicking on the Collection View in the outline. We recommend that you assign unique names when working with Layout Constraints and Data Links.
Here you specify the number of cells in the Collection View. This value is not used if you have activated the “Use Data Source” checkbox. If this is the case, the number of cells is determined dynamically by the content of the data source.
Data Source List
If the checkbox “Use Data Source” is activated, there is a list of the Data Sources of your screen below. Select a Data Source from this list by clicking on it. The selected entry is shown inverted.
New Data Source
By clicking on this button, the possible types of a new Data Source are shown and you can create a corresponding new Data Source by clicking on a type. The following types are available:
- Textual List
- Atom Feed
- RSS 2.0 Feed
- Data Filter
Use a Navigation Target
In addition to displaying values in the Collection View, you may also want to allow the user of your app to navigate further. For example, from an images gallery (this Collection View) to a detail page. To realize this, the checkbox “Use a Navigation Target” must be activated. This will first ask you whether you want to use an existing screen as the target or whether you want a new screen to be created automatically. You will then be offered further settings. For example, you can change the selection for the target screen once again and also specify the effect with which the new screen is to be displayed.
- Modal Presentation
You can choose between different transitions for the transition from the current screen to the target screen:
- Push from Bottom
- Modal Presentation
Here you can specify whether the user of your app can scroll vertically (default) or horizontally within the Collection View.
Here you define the outer space of the entire grid. Depending on the value specified here and the width of the screen on which the Collection View is displayed, the number of cells in a row and their spacing from each other varies. The following image (enlarge) illustrates this. On the left side the value 0 was specified and on the right side the value 20 was specified.
Here you define the minimum distance that should be around a cell. Around the following image (enlarge) this distance was defined with the value 20. Now the second row of the grid is no longer displayed directly below the first but with a corresponding distance.
Here you define the background color of your Collection View.
All information about this area can be found on the separate Geometry page.
The following properties of the element can be set using the data links:
- Selected Cell (0-Index)
- Selected Cell (1-Index)
All information about this area can be found on the separate Data Links page.