List

When designing an app, in most cases you need to fit a large amount of content into a small screen, so you arrange the content on a scrolling screen.

The Scroll View used for this is called a List, and a List serves to lay out content consistently and deliver information to users effectively.

A List takes the form of multiple Sections arranged in sequence, and each Section is a sequence of Cells that display content.

Because you can set Layout properties separately for each Section, you can build a List that supports almost any Layout you can imagine.

When it comes to how to Edit a List, you can complete a List by placing the List on the Page — a List is usually placed to fill the Page — and then adding as many Sections as you want, setting up the Layout for each Section, filling each Section with content by dragging and dropping UI elements onto it, and creating a Section Header or Section Footer 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 Page

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

If you need a new Page with an empty List, press Add List Page from the Add button at the top right, and you'll get a new Page with a List ready to go.

Adding Cells to a Section

When you add a List, you'll see that it contains a single Section. The Header/Footer and Cell shown at this point are all Placeholders — elements that appear only in the Editor to help with Editing. If you run a Preview, you'll see that these Placeholders are not shown.

Here, let's add a Cell.

Adding a Cell is very easy. You can add all kinds of UI and Components from the UI Library.

There's one important point before adding a Cell.

List Editing has a List Drop Mode. If you look at the List Drop Mode at the top right of the Editor, there are two modes: Add and Edit.

Add Mode is used when adding a Cell into a Section, and Edit Mode is used when adding a UI element on top of an existing Cell, or when adding a Section Header/Footer via Drag and Drop. Because the way you add a Cell and the way you add new UI inside a Cell are both done through Drag and Drop, this choice became necessary.

After confirming that List Drop Mode is set to Add, try dragging and dropping any UI into the Section. You'll see it added as a Cell of the Section.

At this point, it's best to use a pre-built Component as the UI to use for the Cell.

That's because Cells mostly repeat the same UI, with only the content inside changing. Of course, you can build them with other UI as well, so you can design them however you like.

When you add a Component, it is changed into a separate Instance as it's added, so you can override only the parts that need to change to alter the content, and later, if you change only the Component's design, you'll see the change applied everywhere at once.

If you add a few Cells, you'll see that at first the Cells are laid out only horizontally.

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

Adding a Header/Footer to a Section and List Drop Mode

Change the List Drop Mode to Edit.

A single Section can have a Header or Footer area.

After switching the List Drop Mode to Edit, drag and drop the UI element you want from the UI Library onto the Header Placeholder or Footer Placeholder area, and it is reflected immediately.

Let's take another look at List Drop Mode.

If you attempt a UI Drag and Drop in Add Mode, it is added as a Cell of the Section.

If you attempt a UI Drag and Drop in Edit Mode, it is added as a Subview of a Cell, or can be set as a Header/Footer.

Adding a Section to a List

With the List selected, you can add a new Section directly with the Section Type you want via the Add Section button in the Floating Toolbar.

Duplicating and Reordering Sections and Cells

Before learning about Section Layout, let's look at how to handle content easily through duplication and reordering.

Duplication and reordering are both done in the Floating Toolbar.

Learn the duplicate button and the reorder button in the Floating Toolbar.

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

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

When a Section or Cell is selected, try running the duplicate button and the reorder button.

Pressing the duplicate button quickly duplicates and adds the entire same Section or same Cell.

Use the reorder button to move that Section or Cell forward or backward.

Finally, as you may have guessed, you can also delete that Section or Cell all at once using the delete button in the Floating Toolbar.

Changing the Section Layout

Changing the Section Layout is all done in the Inspector.

With a Section selected, look at the Inspector to find the Section Layout properties.

Change the Type.

• Vertical: Builds a list in the Vertical direction.
• Horizontal: Builds a list in the Horizontal direction.
• Flow: Cells are arranged in sequence, each according to its own size.
• Carousel: A Horizontal Type with each Cell's Width matched to the List's Width.

Depending on the selected Type, you can make additional settings.

Choose the Width Dimension and Height Dimension.

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

Through Section Layout, you can build most of the layouts you'd want to implement.

By combining various Section Layouts with Cell designs that use Auto Layout, you can create the List Layout you want.