Edit

Storyboard

Now it's time to create your iOS list form interface with Xcode!

Here's the result we want to achieve:

For each cell, we're going to add a:

• Profile image
• Title
• Subtitle

Open the storyboard file with Xcode

First, open your storyboard file in Xcode.

It's quite empty, so let's add some content!

Add an Image View

From the Object library, drag and drop an Image View into a cell. You can search for "Image View" in the search bar at the bottom of the Object Library.

From the Size inspector panel (on the right side of the Interface Builder window), set the Image View Width value to 110 and the Height value to 110. Then set the X value to 8 and the Y value to 3.

Next, add a constraint (Leading: 8) by clicking on the Add New Constraints button (at the bottom of the Interface Builder window). Add width and height constraints too, as shown:

Finally, click on the Align button (at the bottom of the Interface Builder window) and check the "Vertically in Container" checkbox.

Your Image View is now well positioned!

Now let's work on the cell's labels.

Add title and subtitle labels

Let's begin by adding a View. Search for "View" in the Object library and drag it into the cell container.

From the Size inspector panel (on the right side of the Interface Builder window), set the View Width value to 277 and the Height value to 94. Then set the X value to 126 and the Y value to 10.

For the Image View, add four constraints by clicking on the Add New Constraints button (Trailing: 11, Leading: 8, Top: 11, and Bottom: 10.67) for the view to be well positioned, as shown:

Drag and drop a label into the View you just added from the Object Library.

From the Size inspector panel, set the Label View Width value to 269 and the Height value to 32. Then set the X value to 8 and the Y value to 8.

Duplicate the label and in the Size inspector panel, set the X value to 8 and the Y value to 48.

Select both labels add four constraints by clicking on the Add New Constraints button (Trailing: 0, Leading: 8, Top: 8, and Bottom: Multiple) as shown:

With a label selected, double-click on the Height constraint to edit it.

Change the relation from Equal to Greater Than or Equal so it can have a variable height (to handle multiline labels).

Repeat the process for the second label.

Label customization

From the attribute inspector (on the right side of the Interface Builder window), you can customize your label's font colors. Let's make the second label Dark Grey Color :

You can also select the dominant color for your app:

From the attribute inspector, you can also customize the font. Select both labels and select Font > Custom > Helvetica Neue:

To complete the customizations, select both labels and enter 0 for Lines in the inspector window. This allows the number of lines to be unlimited.

NOTE

The provided storyboard is optimized to have a variable cell height depending on the contents of each cell.

How to get data into your cells

Image View

Select your Image View and go to Identity inspector > User Defined Runtime Attributes. Click the + button to add a row.

• Key Path: Begin with bindTo to activate binding on the component. Enter bindTo.record.___FIELD_1___

• Type: Always String

• Value: The attribute name. Enter ___FIELD_1_BINDING_TYPE___

Labels

Select the first label and add a row in the Defined Runtime Attributes:

• Key Path: bindTo.record.___FIELD_2___

• Type: String

• Value: ___FIELD_2_BINDING_TYPE___

Select the second label and add a row in the Defined Runtime Attributes:

• Key Path: bindTo.record.___FIELD_3___

• Type: String

• Value: ___FIELD_3_BINDING_TYPE___

You can change the storyboard display labels to have better visibility:

• Double-click the first label to edit it and enter ___FIELD_2_LABEL___
• Double-click the second label to edit it and enter ___FIELD_3_LABEL___

Go to your project editor, select your list form template from the Forms section, then select Build and Run.

Here is the simulator result :

Customize your app

The last step is adding a corner radius to the Image View to have a better design.

Select your Image View and add the two following lines in the User Defined Runtime Attributes:

• Key Path: cornerRadius

• Type: Number

• Value: 12

and

• Key Path: layer.masksToBounds

• Type: Boolean

• Value: Check the box

You can now build your project from the project editor!

Where to go from here?

In this tutorial, we've covered the basics for creating list form templates. You are now able to create simple templates on your own using the Starter Project ressources. But wait - there’s more! In the next tutorial, you’ll learn how to build detail form templates! Click on Final Project below to download the completed template list folder.

CUSTOM LISTFORM FINAL TEMPLATE