Often there are cases when you need to display your list of items in non-linear layout. For examples, you may want to have a grid of items. For that purpose, RadListView defines three types of item layouts which are fully UI virtualized and optimized for mobile. The following layout types are available:
- Linear layout - this is the most common layout used with a RadListView component. Items are ordered horizontally or vertically one at a time.
- Grid layout - this is a layout in which items are ordered in columns and rows. Depending on the scrolling orientation (vertical or horizontal), the amount of columns or rows is predefined.
- Staggered layout - this is a fancier version of the Grid layout where items are also ordered in rows or columns depending on the scrolling direction whereas no free spaces are preserved between neighboring items in the direction of scrolling.
RadListView exposes the
listViewLayout property which accepts objects inheriting from
ListViewLayoutBase. Currently the following classes are available:
Each layout object exposes
itemWidth properties which can be used to explicitly define the size of the items. Note that these properties do not always work depending on the layout type currently used, as well as on the platform (Android or iOS).
ListViewLinearLayout is done the following way in XML:
Example 1: Setting ListViewLinearLayout on RadListView:
<lv:RadListView.listViewLayout> <lv:ListViewLinearLayout scrollDirection="Vertical"/> </lv:RadListView.listViewLayout>
dynamicItemSizeproperty which, when set to
false, makes the layout use the
itemWidthproperties thus making all items have fixed height. This improves the scrolling performance on iOS.
ListViewGridLayout is done the following way in XML:
Example 2: Setting ListViewGridLayout on RadListView:
<lv:RadListView.listViewLayout> <lv:ListViewGridLayout scrollDirection="Vertical" itemHeight="200" spanCount="2"/> </lv:RadListView.listViewLayout>
spanCount property to a number will make the
ListViewGridLayout order the items in three columns or rows depending on the scrolling direction. You can also use the
itemWidth properties here for size tuning.
ListViewStaggeredLayout is done the following way in XML:
Example 3: Setting ListViewStaggeredLayout on RadListView:
<lv:RadListView.listViewLayout> <lv:ListViewStaggeredLayout scrollDirection="Vertical" spanCount="3"/> </lv:RadListView.listViewLayout>
Defining an explicit item size here is not needed since the essence of a staggered layout is that items are freely measured and positioned according to their desired size as shown on the pictures below. Also note the second Label in the
itemTemplate which enables text-wrapping for its content to allow for arbitrary item size depending on the length of the text. The result is visible on the pictures below:
Figure 1: ListViewStaggeredLayout in action:
Want to see this scenario in action?
Check our SDK examples repo on GitHub. You will find this and many other practical examples with NativeScript UI.