Creating the Band Detail View

Topics Covered in This iOS Development Tutorial:

Adding an Image Placeholder, Title, & Subtitle, Adding Info to Labels, Adding a Description, Adding a Divider

Exercise Preview

Exercise Overview

In this exercise, you'll master one of the most common patterns in iOS development: creating detailed view controllers that display comprehensive information when users navigate deeper into your app. We'll build the layout for the band detail screen that appears when a user taps on a band in the list, implementing professional UI patterns that users expect in modern iOS applications.

Getting Started

1. If you completed the previous exercise, you can skip the following sidebar. However, we strongly recommend completing the foundational exercises (1B–1D) sequentially, as each builds essential skills for professional iOS development.

   If you completed the previous exercise, Jive Factory.xcodeproj should still be open in Xcode. If you closed it, navigate to yourname-iOS Dev Level 2 Class > Jive Factory and reopen the project file.

   Project Continuity

   This exercise builds on previous lessons 1B-1D. If you haven't completed them, use the provided starter project to ensure all dependencies are in place.

Adding an Image Placeholder, Title, & Subtitle

Professional detail views follow established design patterns that users recognize immediately. We'll begin by implementing the header section with an image, primary title, and subtitle—a layout pattern you'll find in apps like Apple Music, Spotify, and countless other successful iOS applications.

1. In the Document Outline, locate the View Controller Scene section and click View Controller to select it.
2. In the Utilities panel on the right side of Xcode, click the File inspector tab .

3. Before we start building, let's examine our target layout. This reference shows the polished interface we're creating in this exercise:

   

4. Now we'll add the band image placeholder. The Image View component is the standard UIKit element for displaying single images in iOS apps. In the search bar at the bottom of the Object library , type: image

5. Drag the Image View onto the empty view controller canvas in Interface Builder. Don't worry about precise placement yet—we'll position it accurately in the next steps.
6. The default size is too large for our layout, so we need to resize it precisely. In the Utilities panel on the right, click the Size inspector tab .

7. Configure the exact dimensions and position using these values (press Return after entering the final value to apply all changes):

   X:	20
   Y:	96
   Width:	96
   Height:	96

8. Next, we'll add the band name label. Labels are fundamental UI elements in iOS, used for displaying text throughout the system. In the search bar of the Object library , clear the existing text and type: label
9. Drag the Label to the right of the Image View. We'll position it precisely in the following steps.
10. Double-click the Label in the Editor to enter edit mode, change the placeholder text to Name of Band, and press Return to confirm.

11. With the label selected, use the Size inspector to set these exact coordinates:

    X:	132
    Y:	95
    Width:	166
    Height:	21

12. Now we'll style the band name to establish visual hierarchy. Click the Attributes inspector tab .

13. Click the Text Menu icon next to the Font setting and configure:

    Style:	Bold
    Size:	20

    NOTE: As of iOS 9, Apple uses San Francisco as the default system font, which provides excellent readability across all device sizes and is specifically designed for digital interfaces.

14. Click Done to apply the font changes.
15. For the music genre label, we'll add another label with different styling to create clear information hierarchy. Drag another Label from the Object library and position it below the Name of Band label.
16. Double-click the new label to enter edit mode.
17. Change the text to Type of music and press Return.
18. With the Type of music label selected, access the Attributes inspector and click the Text Menu icon .
19. Set the Size to 14 to create visual hierarchy with the band name.
20. Click Done.
21. To follow iOS design guidelines, we'll use Apple's standard blue color for secondary information. In the Attributes inspector , click the color menu next to Color (currently showing Default).
22. If Apple's standard blue appears in the Recently Used Colors section, select it and skip the next step.

23. To match Apple's system blue precisely, follow these steps:

    • Choose Other to open the full Colors window.
    • Click the second tab at the top of the Colors window.
    • Ensure RGB Sliders is selected in the dropdown menu.
    • Enter these exact values: R:0, G:122, B:255.
    • Close the Colors window.

24. Position the genre label using the Size inspector :

    X:	132
    Y:	115
    Width:	166
    Height:	21

Adding Show Information Labels

Now we'll build the event details section, which provides essential information users need when deciding whether to attend a show. This follows the information architecture pattern used in successful event and entertainment apps.

1. From the Object library , drag a Label and position it below the Type of music label.
2. Double-click the new label, rename it Venue, and press Return.

3. Use the Size inspector to position the venue label precisely:

   X:	132
   Y:	135
   Width:	166
   Height:	21

4. We'll make the venue name bold to emphasize its importance as a key piece of event information. In the Attributes inspector , click the Text Menu icon and configure:

   Style:	Bold
   Size:	14

5. Click Done.
6. To efficiently create similar labels, we'll duplicate the venue label. Hold Option and drag the Venue label downward—this creates an exact copy with the same formatting.
7. Double-click the duplicated label, rename it Date, and press Return.
8. Since date information is typically displayed in regular weight, access the Attributes inspector and click the Text Menu icon .
9. Change the Style to Regular.
10. Click Done.

11. Position the date label using the Size inspector :

    X:	132
    Y:	155
    Width:	55
    Height:	21

12. For the show time, we'll place it adjacent to the date for logical grouping. Hold Option and drag the Date label to the right to create a copy.
13. Double-click the copy and rename it Time.

14. Position the time label in the Size inspector :

    X:	191
    Y:	155
    Width:	60
    Height:	21

15. We need one final label for pricing and age restriction information. Hold Option and drag the Date label downward to create another copy.
16. Double-click this new label and rename it Age / price.

17. Position this label using the Size inspector :

    X:	132
    Y:	174
    Width:	166
    Height:	21

Adding a Description

The description area provides space for detailed information about the band or event. This multi-line text region is essential for giving users the context they need to make informed decisions.

1. We need one final label for the band description. Drag a Label from the Object library and position it below the Image View.
2. Double-click the label, rename it Description, and press Return.

3. Configure the description area dimensions in the Size inspector :

   X:	20
   Y:	219
   Width:	280
   Height:	39

   NOTE: This description field is designed to accommodate variable text lengths. Currently, the text centers vertically within the label bounds, but this can create awkward spacing when content varies between one and two lines. In a later exercise, you'll learn to programmatically set the vertical alignment to top, ensuring consistent visual presentation regardless of content length.

4. Set the appropriate font size for body text. In the Attributes inspector , click the down arrow next to Font repeatedly until the size reaches 14:

   

Adding a Divider

Visual separators help users parse information quickly and create clear sections within your interface. While UIKit doesn't include a dedicated line component, professional developers commonly use thin views to create effective dividers.

1. We'll create a horizontal line to separate the header information from the description. In the search bar at the bottom of the Object library , clear the existing text and type view.

   NOTE: View appears near the end of the Object library list, as it's one of the most fundamental UI components in UIKit.

2. Drag the View object onto the canvas below the description area. We'll configure its appearance and dimensions in the following steps.
3. To create a proper divider, we need to set the background color. In the Attributes inspector , click the color bar next to Background. If a dropdown menu appears, choose Other to access the full Colors window.
4. At the top of the Colors window, click the second tab to access the color sliders interface.
5. From the Color Sliders dropdown menu, select Gray Scale Slider for precise gray control.
6. In the Brightness field, enter 85 for the percentage value and press Return. This creates a subtle gray that provides separation without being visually intrusive.
7. Close the Colors window.

8. Transform the view into a thin horizontal line using these precise measurements in the Size inspector :

   X:	0
   Y:	207
   Width:	375
   Height:	1

   These settings create a full-width horizontal line positioned precisely between the upper information section and the description, following iOS interface guidelines for content separation.