List

When designing an app, you usually need to fit a large amount of content onto a small screen, so content is typically placed on a scrollable view.

The Scroll View used for this purpose is called a List. A List consistently arranges content to effectively deliver information to users.

A List consists of multiple Sections arranged in order, and each Section contains Cells that display content.

Since you can specify layout properties separately for each Section, you can create Lists that support virtually any layout you can imagine.

To edit a List, after placing the List on the Scene -- Lists are typically placed to fill the entire Scene -- you can complete the List by adding as many Sections as needed, configuring the layout for each Section, dragging and dropping UI elements into Sections to fill in content, and creating Section Headers and Footers if needed.

In a List, you design by adding pre-built UI Components via drag and drop and adjusting the Section Layout.

Adding a List to a Scene

Add a List by dragging and dropping from the UI Library and placing it where you want. However, in most cases, a List is placed to fill the entire screen. Use the Simple Auto Layout > Fill feature in the Floating Toolbar to make it fill the screen.

If you need a new Scene with an empty List, press Add List Scene from the Add button in the upper right corner to see a new Scene with a List ready.

Adding Cells to a Section

When you add a List, you'll see that it contains one Section. The Header/Footer and Cell visible at this point are all Placeholders that only appear in the Editor to help with editing. If you preview, you can confirm that these Placeholders are not visible.

Here, let's try adding Cells.

Adding Cells is very easy. You can add any kind of UI and Component from the UI Library.

Before adding Cells, there's one important thing to know.

List editing has a List Drop Mode. In the upper right corner of the Editor, you can see the List Drop Mode with two modes: Add and Edit.

Add Mode is used when adding Cells to a Section, and Edit Mode is used when adding UI elements onto an existing Cell, or when adding Section Headers/Footers via drag and drop. This distinction was introduced because adding a Cell and adding new UI within a Cell are both done through drag and drop, creating a need for separate modes.

After confirming that the List Drop Mode is set to Add, drag and drop any UI into a Section. You'll see it added as a Cell in the Section.

It's recommended to use pre-made Components as the UI for Cells.

This is because Cells mostly consist of the same UI repeated with only the content changing. Of course, you can compose Cells with different UIs as well, so feel free to design however you like.

When you add a Component, it is converted to a separate Instance, so you can override only the parts that need to change. Later, when you modify the Component's design, the changes will be reflected across all instances.

After adding a few Cells, you'll initially see that the Cells are only arranged horizontally.

Within a Section, you can create not only horizontal layouts but also tall vertical lists and many other types of layouts.

Adding Headers/Footers to a Section and List Drop Mode

Change the List Drop Mode to Edit.

Each Section can have a Header or Footer area.

After switching the List Drop Mode to Edit, drag and drop the desired UI element from the UI Library to the Header Placeholder or Footer Placeholder area, and it will be applied immediately.

Let's review the List Drop Mode once more.

In Add Mode, dragging and dropping a UI adds it as a Cell in the Section.

In Edit Mode, dragging and dropping a UI adds it as a Subview of a Cell, or allows you to set it as a Header/Footer.

Adding Sections to a List

With the List selected, you can add a new Section with the desired Section Type immediately through the Add Section button in the Floating Toolbar.

Duplicating and Reordering Sections and Cells

Before looking at Section Layout, let's learn how to easily manage content through duplication and reordering.

Duplication and reordering are all done in the Floating Toolbar.

Take note of the Duplicate button and Reorder button in the Floating Toolbar.

It's also important to check in the Outline View whether the currently selected element is a Section or a Cell.

All direct children of a List are Sections, and below each Section, the Header, Cell List, and Footer are arranged in order.

When a Section or Cell is selected, try the Duplicate button and Reorder button.

Press the Duplicate button and you'll see the same Section or Cell quickly duplicated and added.

Use the Reorder button to move the Section or Cell forward or backward.

Finally, as you might expect, you can also delete a Section or Cell at once using the Delete button in the Floating Toolbar.

Changing Section Layout

All Section Layout changes are made in the Inspector.

With a Section selected, you can check the Section Layout properties in the Inspector.

Change the Type.

• Vertical: Creates a vertically oriented list.
• Horizontal: Creates a horizontally oriented list.
• Flow: Cells are arranged sequentially according to their individual sizes.
• Carousel: A Horizontal Type where the Cell Width is set equal to the List Width.

You can make additional settings depending on the Type selected.

Select Width Dimension, Height Dimension.

• Fixed: A fixed value. Ignores the Cell's Size settings.
• Flexible: Follows the Cell's Size settings.
• Fractional Height: Set as a ratio to the List's Height. Ignores the Cell's Size settings.
• Fractional Width: Set as a ratio to the List's Width. Ignores the Cell's Size settings.

You can create most layouts implementable through Section Layout.

You can create your desired List Layout through various combinations of Section Layouts and Auto Layout applied to Cell designs.