Lists: Refining & Beautifying the UI

Topics Covered in This iOS Development Tutorial:

Integrating designer assets into your Xcode project, implementing sophisticated UI design patterns across storyboard screens, creating visual differentiation between view controllers for enhanced user experience, and establishing proper view controller and table view cell class relationships

Exercise Preview

Exercise Overview

Professional iOS development requires seamless collaboration between designers and developers. In this exercise, we'll implement the final design assets created by our design team, transforming a functional but visually basic app into a polished, user-friendly experience. You'll learn how to integrate custom imagery, establish visual hierarchy through color and layout, and create meaningful differentiation between screens that enhances the overall user journey. We'll add sophisticated background treatments to the first screen and interactive elements to the second, demonstrating how thoughtful UI decisions impact user engagement.

Getting Started

1. Launch Xcode if it isn't already open. Ensure you're working with the latest stable version for optimal compatibility with current iOS deployment targets.

2. If you completed the previous exercise, Lists.xcodeproj should still be open. If you closed it, re-open it now to continue your development workflow.

3. We strongly recommend completing the previous exercise (5B) before proceeding, as this tutorial builds directly on those foundations. If you did not complete the previous exercise, follow these steps:

   • Go to File > Open
   • Navigate to Desktop > Class Files > yourname-iOS App Dev 2 Class > Lists Ready for Refining the UI and double–click on Lists.xcodeproj

Adding Images from the Designer

Modern iOS apps rely heavily on carefully crafted visual assets. The integration process we'll follow here represents industry-standard practice for incorporating designer deliverables into production applications.

1. The Project navigator on the left is likely still hidden. To reveal it, go to the top right and click the Hide or show the Navigator icon . This navigator is essential for project file management.

2. Let's incorporate the carefully designed image assets into our project to elevate the UI's visual appeal and user engagement. In the Project navigator , click on Assets to access the asset catalog.

3. Switch to the Desktop and navigate to Class Files > yourname-iOS App Dev 2 Class > Lists Images. These assets have been optimized for iOS display characteristics and performance requirements.

4. Press Cmd–A to select all image files efficiently.

5. With Xcode still visible, drag the selected images to either column in the Editor. Xcode will automatically process these assets and make them available throughout your project.

Improving the UI Design on Our Storyboard Screens

The final design employs a cohesive visual language featuring warm yellow tones and bold interactive elements that create an engaging, motivational user experience. Let's transform our basic gray interface into something that users will genuinely enjoy interacting with.

1. If Main.storyboard isn't visible in the Editor area, navigate there now. If the Document Outline is hidden, click its toggle button to reveal the structural hierarchy.

2. Now that we've imported our assets, hide the Project navigator by clicking the Hide or show the Navigator button to maximize our design workspace.

3. In the Document Outline, expand both the Lists Scene and List Item Scene by clicking anywhere on each controller in the Editor, or by clicking the down arrows in the outline. This reveals the complete view hierarchy.

4. Notice that each Scene contains a main View with multiple child objects. Let's establish clear naming conventions to prevent confusion during development:

   • Under Lists Scene > Lists, select the View and press Return to enable renaming
   • Name it superView and press Return to confirm
   • Select the View under List Items Scene > List Items and rename it to superView for consistency

5. The default gray background lacks visual appeal and fails to communicate the app's purpose. In the Document Outline under Lists (the first View Controller ), click on the superView.

6. For efficiency, we'll update both View Controllers simultaneously. Under List Items, Cmd–click on its superView so both superViews are selected while maintaining precise selection control.

7. At the top right, ensure you're in the Attributes inspector tab where we'll modify visual properties.

8. In the Attributes inspector next to Background, click once on the color bar (avoid clicking the "Light Gray Color" text).

9. Our design team has specified exact color values for brand consistency. In the Colors panel, click the second button to display Color Sliders. Ensure the palette menu shows RGB Sliders for precise color matching.

10. In the Hex Color field, enter FCE586 (a carefully chosen sunny yellow that evokes positivity and energy). Press Return and close the panel to see the transformation.

11. Let's replace the standard system button with our custom-designed Plus button that better aligns with the app's visual identity. In the Document Outline, select the following:

    • Under Lists > superView, click on the Button. This deselects the superViews, focusing on button modification
    • Under List Items > superView, Cmd–click on its Button to include it in the selection

12. In the Attributes inspector next to Image, type AddButton and press Return to apply our custom asset.

13. To create the visual metaphor of a yellow memo pad with clear item separation, we'll style our table views with coordinated yellow tones. Under each superView, select both Table View objects (remember to Cmd–click the second one).

14. In the Attributes inspector, configure the cell separators that create visual organization between list items:

    • Click once on the color bar next to Separator (not the "Default" text)
    • In the color dialog, ensure the RGB Sliders interface is active
    • Enter FCD75B in the Hex Color field (a darker yellow shade that provides subtle but clear separation). Press Return and close the panel
    • To achieve full-width separators that look more polished, access the Separator Inset menu and change from Default to Custom
    • Set the Left value to 0 to match the right inset, creating consistent edge-to-edge separation lines. Press Return

15. Scroll down to locate the View section in the Attributes inspector. Find the Background menu (positioned between Alpha and Tint) and click the color bar.

16. In the color dialog, enter FAF7EB in the Hex Color field (a subtle pale yellow that creates gentle visual cohesion). Press Return and close the panel. You'll notice refined yellow accents appearing under labels and in the prototype cells area.

17. To eliminate white backgrounds that break our color scheme, apply the same background color to each Table View Cell. Select the first Table View Cell in the Document Outline, then Cmd–click the second one.

18. In the Attributes inspector next to Background, click the color bar to access color options.

19. Apply the previously used FAF7EB color by clicking the color square in the bottom left, as shown below:

    

20. Close the panel and review your work. The interface now demonstrates professional visual cohesion, but we need to create functional differentiation between the two screens to guide user understanding.

Differentiating the First View Controller

User experience design relies on clear visual cues to communicate functionality. Our first View Controller displays list categories and requires a distinctive treatment that signals its role in the information hierarchy. We'll implement a subtle gradient background that adds depth without overwhelming the content.

1. We'll add an image view to house our designer's gradient background asset. In the Objects search field, type image to filter available UI elements efficiently.

2. Drag an Image View into the first View Controller's Content View. When the area surrounding the List Name label highlights with a blue outline (indicating proper containment), release the mouse.

   

3. In the Attributes inspector next to Image, type CellDeselectedBackground. Accept the autocomplete suggestion and press Return to apply this carefully designed gradient asset.

4. The image may be obscuring text due to default stacking order. In the Document Outline, drag CellDeselectedBackground above the List Name label while ensuring it remains nested within the Content View. This creates proper layering with the background behind text elements.

5. Still in the Document Outline, establish precise positioning by Control–dragging from CellDeselectedBackground to its containing Content View and creating these four constraints:

   • Center Horizontally in Container
   • Center Vertically in Container
   • Equal Widths
   • Equal Heights

6. Click the Update Frames button in the bottom right of the Editor to apply constraint changes immediately.

7. To achieve optimal visual balance within the cell container, switch to the Size inspector tab in the top right panel.

8. In the Size inspector, fine-tune the background image proportions by clicking Edit next to each constraint and adjusting the Multiplier values as shown (press Esc after each change):

   Constraint	Multiplier
   Equal Width	0.92
   Equal Height	0.8

9. The proportions are improved, but the cells need additional breathing room for better readability and visual comfort. Let's optimize the cell dimensions:

   • In the Document Outline, select the Lists View Controller's Table View Cell
   • At the top of the Size inspector, change the Row Height to 56 and press Return
   • Select the parent Table View in the Document Outline
   • In the Size inspector, set the Row Height to 56 for consistency

10. Examining the storyboard, you'll notice the gradient background sits very close to the yellow separator line, creating visual tension rather than harmony.

11. Return to the Attributes inspector tab to make our final adjustment.

12. With the Table View still selected, access the Separator menu and change from Default to None. This creates a cleaner, more sophisticated appearance that lets the gradient backgrounds provide visual separation.

Adding a Check Button to the Second View Controller

Task completion is a core user motivation in productivity apps. By adding an interactive check button, we're implementing a fundamental UX pattern that provides immediate feedback and satisfaction when users complete items. This interaction will be powered by code in later exercises, but establishing the visual foundation is crucial for user interface planning.

1. In the Document Outline under the bottom scene (List Items Scene), select the Content View (expand the Table View Cell if necessary to reveal the hierarchy). If the second View Controller isn't visible in the Editor, select List Items to bring it into focus.

2. In the Objects search field, type button to filter available elements and locate the button component.

3. Carefully drag the Button to the compact space left of the Item Name label. When the label area highlights in blue, indicating proper parent-child relationship, release the mouse.

4. In the Attributes inspector, locate the Title field and delete the default Button text to create a clean, image-only button.

5. In subsequent exercises, we'll implement dynamic image switching when users tap this button. For now, establish the default state by typing Unchecked next to Image and pressing Return.

6. To maintain visual consistency across different device sizes, Control–drag from the new Button item to itself in the Document Outline and select Aspect Ratio from the popup menu.

7. Continue in the Document Outline by Control–dragging from the Button to its containing Content View and creating these essential constraints:

   • Center Horizontally in Container
   • Center Vertically in Container
   • Equal Heights

8. Apply the constraint changes by clicking the Update Frames button in the bottom right of the Editor.

9. Switch to the Size inspector tab to fine-tune the button's position and proportions.

10. In the Size inspector, modify the constraint multipliers to achieve optimal button placement and sizing:

    Constraint	Multiplier
    Align Center X	0.16
    10:11 Ratio	1:1
    Equal Height	0.8

    While the check button is now properly positioned, maintaining organized code structure requires logical ordering in our Document Outline hierarchy.

11. In the Document Outline, drag the Button object to become the first child under Content View. This creates a logical top-to-bottom, left-to-right organization that aids in code maintenance.

12. Select the Item Name label in the Document Outline to adjust its positioning relative to our new check button.

13. In the Size inspector , observe that the Leading Space constraint currently references the Superview (the Content View). For proper layout relationships, we need to establish a constraint relative to our check button instead.

14. Select the current Leading Space constraint and press the