How to make an horizontal list

Help
#1

Hi there,

I want to make an horizontal list of static buttons. Something similar to this UX paradigm: https://uxdesign.cc/best-practices-for-horizontal-lists-in-mobile-21480b9b73e5

How should I do this? I have tried Scroll View, which seems to have the right config options, but I don’t manage to get the buttons positioned/sized properly.
I also tried Stack view but that did not do the trick either.

Any suggestions?

Thx. E.

#2

Hi Erik,
the best way to do this would be a Grid View and use the Horizontal Scroll Direction

#3

So this only works with a datasource with dynamic data?
I want to make something similar like in the iOS App Store > Games but the clickable content is static and does not come from a database/API. Would this be possible?
Ideally the buttons is like 75% of the screen width and the next button is visible at the side and when swiping it snaps to the next button?

horizontal buttons in app store

1 Like
#4

Hi Erik,
No, Grid View can work without a Datasource or an API. You will need although to create a List of Data to display.

I created a video on how to do it, and here are some time stamps about each section.

Time Stamps

00:00 - 00:20: Create a Model to hold the static data that each Grid Cell will display. You can use any Type that a Design Element can display.

00:25 - 03:35: Create the Function in the Screen that will be called when Screen is loaded and will populate your array with the static data.

03:40 - 03:50: Add a Grid View

03:50 - 04:03: Connect the Screen property that you created in the Function with the Grid View, so every time it changes, the Grid View will be updated. Also, create a Cell that will be used to show the Grid Model Data.

04:05 - 04:37: Edit the design of the Grid Cell and connect the data of the Grid Model to the design.

04:42 - 04:53: Set the created function to automatically run When Screen First Loads.
Note: In the video there was an old Event Action there from a different example; just ignore it :slight_smile:

04:55 - 05:00: Run the app, but it is not working because we need another one step.

05:02 - 05:20: At the end of the Function, we need to set the List again to itself to reload the Grid View.

05:22 - 05:30: Now it works, but it scrolls vertically.

05:30 - 05:35: Change Grid View to scroll Horizontally.

05:44 - 06:00: Fine-tune the design. Make the Image to fill the whole ImageView by changing the Content Mode.

I am attaching you also an explanation of the created Function.

grid func
grid func1071×759 124 KB

  1. Create/Initialize an empty List / Array.
  2. Create a new empty Grid model and assign it to temp property.
  3. Set the properties of the temp.
  4. Add the temp in the grid models list. Now data of the temp are saved in the List so you can re-edit it.
  5. Repeat steps 2,3,4 for every button that you need.
  6. Assign self.grid models to itself in order for the Grid View to reload.

Please feel free to ask more questions, if any step was not clear.

#5

Following your explanation and video, it works.
I have made this in a test app.

Q1: Is there a way to copy screen function, model and cells from one app to another?
Or between screens in an app?

Q2: I want to have the cells behave as a button that navigates to another screen. I would think I have to change the model and add a Screen Navigation to it? But that is not possible? How would I need to do this?

#6

No, there is no way to copy Data things. You can only copy/paste Design Elements.

There are multiple ways to do this. Do you want all of the buttons to go to the same screen and change a parameter or go to a different Screen?

#7

Every button should have its own target screen.

#8

If you want each button to have a different target screen then the best solution is to

  1. Create a execute a Function when a Grid View Item is Selected.
  2. In the function have some login to go to each Screen based on a title or any other property.

I just created a video showing these steps and added some Time Stamps explaining each step.

00:00 - 00:35: Create 2 new Screens to use in the example
00:36 - 00:53: Create 2 Screen Navigations (one for each Screen). Note: Select the Push in Navigation style, if you want to automatically have a Back button.
00:53 - 00:56: Be sure to Enable the Navigation Controller in the Launch Screen
01:09 - 01:17: Create a new Function
01:18 - 01:28: Create a new Function Argument which during the Execution of the Function by the Grid View, it will hold the selected Grid Model.
01:30 - 02:06: Write the Logic using Code Blocks to differentiate the Screen Navigation to be used, based on the title of the selected Grid Model.
02:10 - 02:23: Copy-paste the name of the title from the other Function.
02:27 - 02:34: Select to Execute a Function when an Item is Selected in the Grid View
02:35 - 02:42: Connect the Selected Item of the Grid View with the Function Argument of the selected Function.

#9

This works indeed. Make sure that in Grid View settings, the Allow Selection switch is turned on! Otherwise, you can click the cell until forever. :grinning_face_with_smiling_eyes:

1 Like
#10

@erikwillemse You can also check [VIDEO] ScrollView Example with Grid Views if you want to have multiple Grid views in the same Screen.