This is Part 3 in a series highlighting CollectionView, a super powered list control with recycled rows providing you best of class on each platform suited to fit all sorts of needs.
Continuing onward with dynamic layout changes let's look at providing versatility to display layouts of the collection.
CollectionView supports colWidth and rowHeight properties allowing you to switch up your layouts anytime.
<CollectionView colWidth="50%" rowHeight="30%" />
These properties can be a percentage string or a number with a fixed size like 100 (for precisely 100 dip in height for each row).
These settings would provide a 2 column layout where each column takes up 50% of the available control width and each row takes up 30% of the CollectionView area itself for both iOS and Android. Really powerful options through such simplicity!
For example, let's say we want a 3 column layout where each column takes up 33.33% (about a 1/3) of control space and each row takes up about 18% of the height:
<CollectionView colWidth="33.33%" rowHeight="18%" />
If we want to dynamically change the layout by way of a user interface toggle switch we can data bind these properties:
<CollectionView colWidth="{{ colWidth }}" rowHeight="{{ rowHeight }}" />
Provided a Button which changes these bindings with something like this:
<Button text="Change Layout" tap="{{ changeLayout }}" />
function changeLayout() {
colWidth = '100%';
rowHeight = 100;
}
Using whichever flavor you're comfortable with for binding syntax (Angular, React, Solid, Svelte or Vue), this would change the layout of your CollectionView.
However you might notice something strange where the layout doesn't fully update on each dynamic update:
CollectionView provides a refresh method which can sometimes correct layout issues of this sort. However where it does not, we can apply a nice tip to cause the layout to properly measure using the visibility mode available on all NativeScript controls.
function changeLayout() {
colWidth = '100%';
rowHeight = 100;
collectionView.visibility = CoreTypes.Visibility.collapse;
setTimeout(() => {
collectionView.visibility = CoreTypes.Visibility.visible;
}, 1);
}
This is a nifty tip that will simply cause a layout pass on the next JavaScript tick (learn more: https://nodejs.dev/en/learn/understanding-processnexttick/#:~:text=js event loop%2C one important,we call it a tick.)
Because NativeScript conveniently operates just like the natural platform on the UI thread this achieves exactly what we want...plus it's lightning fast and synchrounous!
We will look at "Pull to refresh and infinite loading" next!
Founded in 2016 by open source collaborators, nStudio is recognized for establishing a healthy open source governance model to serve the global communities interest around NativeScript. If you are in need of professional assistance on your project, nStudio offers services spanning multiple disciplines and can be reached at [email protected].