Lists: UI with Two View Controllers That Display Table Cells

Topics Covered in This iOS Development Tutorial:

Creating files for a dual view controller app, adding a navigation controller to manage multiple views, implementing UI elements on the first view controller, constraining UI objects for responsive design, and duplicating the first view controller to create the second screen

Exercise Preview

Exercise Overview

The next application we'll build is a versatile list management system that adapts to multiple use cases—from grocery shopping and task management to tracking professional development goals like iOS skills acquisition. This exercise establishes the foundational architecture by creating all necessary Swift files and constructing a dual-screen interface managed by a Navigation Controller. You'll learn to implement the Model-View-Controller pattern that remains central to iOS development, even as SwiftUI gains popularity in 2026.

Getting Started

Before diving into the interface design, we need to establish our project structure and configure the basic settings that will support our multi-screen application.

1. Launch Xcode if it isn't already open.

2. Go to File > New > Project or use the shortcut Cmd–Shift–N.

3. Under Application, double–click on the App to choose this foundational template that provides the essential components for any iOS application.

4. Configure your project with the following settings:
   • Product Name: Lists
   • Team: Choose your development team if you have one registered
   • Organization Name: Your Name
   • Organization Identifier: com.YourName (this creates a unique bundle identifier for App Store distribution)
   • Interface: Storyboard (we're using UIKit's visual interface builder rather than SwiftUI for this tutorial)
   • Language: Swift
   • Ensure both options at the bottom (Use Core Data and Include Tests) remain unchecked—we'll implement simpler data persistence for this learning exercise

5. Click Next.

6. Select your save location. Navigate to Desktop > Class Files > yourname-iOS App Dev 2 Class folder, or create a dedicated development directory if you prefer organized project management.

7. Ensure Create Git repository on My Mac is checked—version control is essential for professional development, even in learning projects.

8. Click Create.

9. In the Deployment Info section under Device Orientation, uncheck both Landscape Left and Landscape Right. This constraint focuses user interaction on portrait mode, which is optimal for list-based interfaces and reduces complexity during development.

Creating Files for a Dual View Controller App

Professional iOS applications require thoughtful architecture from the start. Our app implements a master-detail pattern: one screen displays all user lists (master), while the second shows individual list items (detail). This pattern appears throughout iOS—from Mail to Settings—making it essential knowledge for any iOS developer. Let's establish the file structure that will support this navigation flow.

1. Remove the default View Controller that Xcode provides. In the Project navigator, click on ViewController and press the Delete key.

2. In the confirmation dialog, click Move to Trash to permanently delete the file.

3. For proper project organization, select the target folder before creating new files. In the Project navigator , click on the Lists folder (the yellow folder icon, not the blue project name).

4. Begin with our data model—the foundation that defines how our app stores and manages information. Go to File > New > File or use the shortcut Cmd–N.

5. Under iOS and Source, double–click on the Swift File template.

6. Name the file Data Model.swift in the Save As field.

7. Verify you're saving in Desktop > Class Files > yourname-iOS App Dev 2 Class > Lists > Lists, then click Create.

8. Now create our first view controller class. Press Cmd–N to create a new file.

9. Under iOS and Source, double–click on the Cocoa Touch Class template—this provides the essential structure for custom view controllers.

10. Configure the class options in this specific order to avoid unnecessary retyping:

    • First, click the Subclass of menu and type UIViewController. Accept Xcode's autocompletion suggestion.
    • Notice that Class automatically updates to "ViewController." Replace this with the more descriptive name: ListsVC (the VC suffix clearly indicates View Controller)
    • Verify that Also create XIB file remains unchecked and Language is set to Swift

    Professional Tip: Always set the subclass before naming your custom class. This prevents Xcode from appending default suggestions to your chosen class name, maintaining clean, readable code.

11. Click Next.

12. Confirm you're in the correct directory (Desktop > Class Files > yourname-iOS App Dev 2 Class > Lists > Lists) and click Create.

13. Create the second view controller using Cmd–N.

14. Select the Cocoa Touch Class template under iOS and Source.

15. Xcode remembers your previous settings, so verify the subclass is UIViewController with Swift language selected.

16. Name this class ListItemsVC and click Next, then Create.

17. Table views require custom cells to display data effectively. Create the first cell class with Cmd–N.

18. Choose the Cocoa Touch Class template again.

19. Configure these options precisely:

    Subclass of:	UITableViewCell (Set this first to avoid naming conflicts)
    Class:	ListTitleTVCell (TV denotes Table View for clear identification)

20. Click Next, then Create in the following screen.

21. Generate the final table cell class using Cmd–N. Create another Cocoa Touch Class subclassing UITableViewCell, named ListItemTVCell. Click Create when configured.

Adding a Navigation Controller to Manage Our Two Views

Navigation Controllers serve as the invisible traffic directors of iOS apps, managing the flow between screens and providing the familiar back-button navigation that users expect. In professional iOS development, proper navigation architecture prevents user confusion and creates intuitive app experiences. Let's implement this foundational component.

1. Access the visual interface by clicking Main.storyboard in the Project navigator.

2. Optimize your workspace for multiple controllers. Click the Hide or show the Navigator button in the top right to maximize your Storyboard canvas.

3. Observe the gray arrow pointing to the View Controller—this indicates the initial view controller, the first screen users see when launching your app.

4. Remove the default View Controller from the Storyboard to match our custom file structure. Click anywhere on the View Controller in the Editor and press Delete (you may need to press it multiple times to fully remove all components).

   The gray arrow disappears along with the controller—we'll restore this crucial entry point shortly.

5. Locate the Navigation Controller in the Objects library search field.

6. Drag the Navigation Controller onto your Storyboard canvas.

   Navigation Controllers operate behind the scenes, like a theater director managing scene transitions. While invisible to users, they coordinate the presentation of visible view controllers—represented here by the Root View Controller that appears automatically to the right. This Root View Controller becomes your app's first visible screen, while the Navigation Controller handles the navigation logic.

7. Replace the generic Root View Controller with our custom implementation. Access the Document Outline by clicking Show Document Outline at the bottom left of the Editor if it's not visible.

8. Prepare the Document Outline for precise selection:

   • Expand both controller scenes if they appear collapsed
   • If multiple items are selected, click in a blank area to clear all selections

9. Under Root View Controller Scene, select Root View Controller and press Delete.

10. Add a customizable replacement. From the Objects library, drag a View Controller to the right of the Navigation Controller, positioning it as shown:

    

11. Establish the navigation relationship. Hold Control and drag from the Navigation Controller to the View Controller. A blue connection line appears during the drag. Upon release, select root view controller from the Relationship Segue section of the popup menu.

    Note: Both Control-drag and right-click drag create these connections, depending on your mouse configuration.

12. Verify the connection appears between controllers, displayed as . This visual representation confirms your navigation relationship.

13. Ensure the Navigation Controller displays the essential entry point arrow on its left side (scroll left if necessary to verify).

    Without this Storyboard entry point, your app cannot launch—iOS wouldn't know which screen to display first, resulting in a blank app.

14. Restore the entry point by selecting the Navigation Controller.

15. Access the Attributes inspector in the right panel.

16. Under View Controller, check Is Initial View Controller.

    The gray arrow returns, confirming that iOS now recognizes this as your app's launch point.

Adding UI Elements to the First View Controller

The master view controller requires three essential components: a navigation title for user orientation, input controls for creating new lists, and a table view for displaying existing lists. This interface pattern appears throughout iOS applications and represents best practices for list management interfaces. While waiting for final design assets—a common scenario in professional development—we'll implement a functional interface that can be styled later.

1. Identify the pale gray Navigation Item area at the top of the View Controller—this space houses navigation titles and bar button items.

2. Select the Navigation Item by clicking near the bottom edge of the pale gray area, or choose it from the Document Outline for precision.

3. In the Attributes inspector, set Title to Lists and press Return. The title updates both in the interface and the Document Outline.

4. Implement the input section, starting with the text field. Type text field in the Objects search field to filter available components.

5. Drag the Text Field to the upper left area of the View Controller, positioning it below the navigation area but within the main content space.

6. Enhance user experience with placeholder text. In the Attributes inspector's Placeholder field, enter Add new list and press Return. This provides clear guidance about the field's purpose.

7. Add the action button by searching for button in the Objects library.

8. Drag the Button to the upper right area of the interface, anticipating that we'll expand the text field width with constraints later.

9. Configure the button for optimal user recognition. In the Attributes inspector:

   • Clear the default "Button" text from the Title field
   • Set Type to Add Contact to display the universally recognized plus (+) symbol
   • Improve visibility by changing Tint from Default to Black Color for better contrast against the background

10. Create the list display area by searching for table in the Objects filter.

11. Drag a Table View (avoid the Table View Controller or Table View Cell options) to the center area of the View Controller.

    Table Views provide the scrollable list functionality essential for displaying dynamic content, but they require table view cells to present individual data items.

12. Add a prototype cell by dragging a Table View Cell from the Objects library directly into the Table View area. When the table view's borders highlight in blue, release to embed the cell properly.

13. Implement content display within the cell. Search for label in the Objects library.

14. Position the Label within the table view cell's white Content View area, as demonstrated:

    

15. Configure the label for optimal presentation. In the Attributes inspector:

    • Replace the default "Label" text with List Name and press Return
    • Select the Left Align button next to Alignment for consistent text positioning

16. Adjust the label's visual boundaries by dragging the right resize handle to accommodate the full text width.

Constraining the UI Objects on the First View Controller

Auto Layout constraints ensure your interface adapts gracefully across different device sizes and orientations—a critical requirement for App Store approval and user satisfaction in 2026's diverse iOS device ecosystem. We'll implement constraints that maintain visual hierarchy and usability regardless of screen dimensions.

1. Select the Add new list text field in the upper area of the Storyboard.

2. Add the button to your selection by Shift-clicking it, creating a multi-selection of both input elements.

3. Group these related elements for easier constraint management. Go to Editor > Embed In > View. This creates a container view that simplifies positioning and maintains the relationship between the text field and button.

4. Focus on the text field by selecting it individually.

5. Access the constraint tools by clicking the Add New Constraints button at the bottom right of the Editor.

6. Optimize for precise positioning by unchecking Constrain to margins.

7. Establish spacing relationships by clicking all four red constraint lines at the top of the popup, ensuring these values:

   • Top: 20 (provides breathing room from the container edge)
   • Right: 15 (leaves space for the button)
   • Bottom: 20 (balances the vertical spacing)
   • Left: 20 (maintains consistent left margin)

8. Apply the constraints by clicking Add 4 Constraints.

9. Configure the button by selecting it individually.

10. Open the constraints popup with the Add New Constraints button .

11. Set these three essential constraints by selecting the corresponding red lines:

    • Top: 20 (aligns with text field's top spacing)
    • Right: 20 (maintains consistent right margin)
    • Bottom: 20 (matches text field's bottom spacing for visual alignment)