[VIDEO] ScrollView Example with Grid Views

Following some questions on a different thread, I am uploading this video to explain how to use a ScrollView and inside have Grid Views.

Time Stamps

00:00 - 00:19: Create a second Grid View just to have 2 in the ScrollView.
00:20 - 00:26: Connect Grid View with the same data and make it horizontal. Note: You could connect it to a different List or a Datasource.
00:28 - 00:36: Add a ScrollView and inside a View. View need to be a subview of the ScrollView and also be the ONLY subview of it. This View will work as a Content View and everything inside it will be scrollable.
00:38 - 00:40: Set the Pin Constraints of the ScrollView. You can set any mix of Constraints but the device should be able to calculate the size of it without calculating the content of it, so you need to have 2 Constraints per Axis. Usually, if you want the whole Screen to be scrollable, then you set Top, Bottom, Left and Right to 0.
00:40 - 01:04: Set the Constraints of the Content View. This is the most important step to implement the ScrollView.

  • Content View must have Top, Bottom, Left and Right Constraints with ScrollView equal to 0. In the video (00:42 - 00:50) we add first the Pin Constraints and then convert them to Constraints Mode, so Kodika automatically created the 4 constraints with the ScrollView but you can do it also manually.
  • (00:52 - 00:58) Set the height of the Content View. This is the size of the content that will be scrollable.
  • (00:59 - 01:03) Add an Equal Width Constraint between the Content View and the Scroll View. We need to set this so the Content View doesn’t scroll horizontally. The Grid Views will continue to be scrollable.
  • Note: You can revert the last 2 steps if you want to have a Horizontal Scrollable ScrollView, so have a hardcoded width and an Equal Height Constraint.

01:04 - 01:13: Add the Grid Views in the Content View, so they are part of the scrollable content.
01:16 - 01:24: In this example we add also a Label. Note: You need to add the Label in the Content View and not directly in the design and also NEED to set the Constraints of it.

1 Like

Thx. This works as I had in mind.
Great tip to make a view as the single subview of the scrollview to make it work and to play with the pin constraints.
Are there more of these hidden tips to make things work?

1 Like

There are lots of tips/hacks that you can use in Kodika, as it is based on native Swift code, so anything possible in code, is also possible in Kodika.

I ran into an annoying bug: while working in this Scroll view > View setup up, I must avoid to press Command-Z (UNDO). If you do, all elements in the View are placed on top (pin mode = 0) and added Grid Views als get a fixed height of 0.

See screenshots.


And rebuilding the view in its original state always is a lot of work.

gr.E.

Hi Erik,
Yeah, it is a recently known bug which we will fix in the next release. For now, the only solution is when this happens to hard kill the app in order to not save the broken view.

Interesting: hard killing the app before doing anything else does not save the screen changes?
What does save the screen?

  • I assume returning to the main screen
  • Pressing the Code button
  • Pressing the Play/Simulator button
  • switching iPhone dimensions
1 Like

Thats is correct but it is not a feature :slight_smile:

There are multiple events that save a screen or an app. The best way to be sure that your screen is saved is either to go back or run the app.
In general, when you run the app from anywhere in Kodika, the app is saved locally and also synced to the cloud in order to run it on your device.