Layout¶
Common layout properties for a collection view as those used in the SimplePropertyCollection, KeyValue, and ImageCollection sections.
Layout Properties¶
Property | Type | Required | Default |
---|---|---|---|
LayoutType | enum |
Optional | "HorizontalFit" |
MinimumInteritemSpacing | integer |
Optional | |
NumberOfColumns | integer |
Optional | 2 |
LayoutType¶
Only applicable to ImageCollection.
- type:
enum
- default:
HorizontalFit
The value of this property must be equal to one of the known values below.
Value | Description |
---|---|
HorizontalScroll |
Display image collection in a single horizontal line. It can scroll left and right and should be used when you want users to preview a subset of a list. |
HorizontalFit |
Display image collection in a single horizontal line. The only difference from the horizontal scroll is that this variation does not scroll. It should be used when there is a specific number of cells you want to display. It can also be used if you want to preview a subset of information. |
Vertical |
Allow image collection to stack vertically. This variation should be used when all collection cells in the collection are to be displayed. |
MinimumInteritemSpacing¶
The minimum horizontal space between two items. If not provided, the SDK default will be used. Ignored by ImageCollection.
- type:
integer
NumberOfColumns¶
The number of columns to be displayed.
- In iOS, this setting is only valid in regular mode (iPad or large iPhone Landscape). In compact mode it will always be set to 1 column.
- In Android, this setting is only valid when current screen width is larger than 600dpi. When the current screen width (e.g. in phone portrait mode) is less than 600dpi, it will always be set to 1 column.
- In web, the value can only be 1 or 2. For a value greater than 2, it will be set to 2.
-
Ignored by ImageCollection.
-
type:
integer
- default:
2
Examples¶
"Layout": {
"NumberOfColumns": 3
}
"Layout": {
"MinimumInteritemSpacing": 66,
"NumberOfColumns": 1
}
"Layout": {
"LayoutType": "HorizontalScroll"
}