Creating the Band Detail View

Free iOS Development Tutorial

Delve into the intricacies of iOS Development with this comprehensive tutorial, featuring step-by-step instructions on how to add image placeholders, titles, subtitles, descriptions, and dividers.

This exercise is excerpted from Noble Desktop’s past app development training materials and is compatible with iOS updates through 2021. To learn current skills in web development, check out our coding bootcamps in NYC and live online.

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

ex prev 3C

Exercise Overview

In this exercise, we will create the layout for the view controller that appears when you tap on a band. This view will list additional details about the band you tapped on.

Full-Stack Web Development Certificate: Live & Hands-on, In NYC or Online, 0% Financing, 1-on-1 Mentoring, Free Retake, Job Prep. Named a Top Bootcamp by Forbes, Fortune, & Time Out. Noble Desktop. Learn More.

Getting Started

  1. If you completed the previous exercise you can skip the following sidebar. We recommend you finish the previous exercises (1B–1D) before starting this one.

    If you completed the previous exercise, Jive Factory.xcodeproj should still be open. If you closed it, re-open it (from yourname-iOS Dev Level 2 Class > Jive Factory).

    If You Did Not Complete the Previous Exercises (1B–1D)

    1. Close any files you may have open and switch to the Desktop.
    2. Navigate to Class Files > yourname-iOS Dev Level 2 Class.
    3. Duplicate the Jive Factory Ready for Band Detail View folder.
    4. Rename the folder to Jive Factory.
    5. Open Jive Factory > Jive Factory.xcodeproj.

Adding an Image Placeholder, Title, & Subtitle

Let’s start by adding placeholders for some detailed info. We’ll add a placeholder for an image of the band along with the band name and type of music.

  1. In the Document Outline, under View Controller Scene, click View Controller to select it.
  2. In the Utilities area on the right, click the File inspector tab file inspector icon.
  3. To give you a better idea of the layout we want to create in this exercise, below is the final goal:

    band detail view layout

  4. Let’s start by adding the image placeholder. We can use the Image View object to display a single image. In the search bar at the bottom of the Object library object library icon, type: image

  5. Drag Image View onto the empty view controller in the storyboard. (Don’t worry about placement. We’ll fix that next.)
  6. It’s too big, so let’s resize it. In the Utilities area on the right, click on the Size inspector tab size inspector icon.
  7. Set the following (make sure you hit Return when you enter the final value):

    X: 20
    Y: 96
    Width: 96
    Height: 96
  8. Let’s add a label object for the band name. In the search bar of the Object library object library icon, delete the text and type: label
  9. Drag the Label to the right of the Image View object. Don’t worry about a specific position yet.
  10. Double–click on the Label in the Editor, change the name to Name of Band and hit Return.
  11. In the Size inspector size inspector icon set the following:

    X: 132
    Y: 95
    Width: 166
    Height: 21
  12. Click on the Attributes inspector tab attributes inspector icon.
  13. To the far right of Font, click the Text Menu icon font format and set:

    Style: Bold
    Size: 20

    NOTE: Currently the iOS default system font is San Fransisco.

  14. Click Done.
  15. Let’s add a label for the type of music. Drag out another Label from the Object library object library icon, and drop it below the Name of Band label. Don’t worry about its specific position yet.
  16. Double–click the new Label you just added.
  17. Rename it Type of music and hit Return.
  18. With the Type of music label still selected, in the Attributes inspector attributes inspector icon, click the Text Menu icon font format to the right of Font.
  19. Change the Size to 14.
  20. Click Done.
  21. Let’s change the Type of music label’s text color. In the Attributes inspector attributes inspector icon to the right of Color, click the menu that says Default.
  22. If you see a blue color in the Recently Used Colors, select it and skip the next step.
  23. To select a blue that matches Apple’s blue, do the following:

    • Choose Other to pull up the Colors window.
    • At the top of the Colors window, click the second tab colors sliders tab.
    • In the Slider menu, select RGB Sliders if you don’t already see them.
    • Select a color with R:0, G:122 and B:255.
    • Close the Colors window.
  24. With the Type of music label still selected, in the Size inspector size inspector icon set:

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

Adding Show Info Labels

Next we will create labels for the date, time, and venue of the show.

  1. From the Object library object library icon, drag out a Label and place it below the Type of music.
  2. Double–click on the new Label, rename it Venue and hit Return.
  3. With the Venue label still selected, in the Size inspector size inspector icon set:

    X: 132
    Y: 135
    Width: 166
    Height: 21
  4. With the Venue label still selected, in the Attributes inspector attributes inspector icon, click the Text Menu icon font format to the right of Font and set the following:

    Style: Bold
    Size: 14
  5. Click Done.
  6. We want to add a label for the date, and it should look similar to the venue label, so let’s duplicate it by dragging out a copy of it. Hold Option and drag the Venue label down to create a copy.
  7. Double–click the second instance of Venue, rename it Date and hit Return.
  8. With the Date label still selected, in the Attributes inspector attributes inspector icon, click the Text Menu icon font format.
  9. Change the Style to Regular.
  10. Click Done.
  11. With the Date label still selected, in the Size inspector size inspector icon set:

    X: 132
    Y: 155
    Width: 55
    Height: 21
  12. We need another label for the time. The time will go to the right of the date, so hold Option and drag the Date label to the right to create a copy.
  13. Double–click on the copy you just created and rename it Time.
  14. With the Time label still selected, in the Size inspector size inspector icon set:

    X: 191
    Y: 155
    Width: 60
    Height: 21
  15. We need one more label for this top section. Hold Option and drag the Date label down to create a copy.
  16. Double–click the second (bottom) Date label and rename it Age / price.
  17. With the Age / price label still selected, in the Size inspector size inspector icon set:

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

Adding a Description

  1. Just one more label to go! Drag out a Label from the Object library object library icon, and drop it below the Image View.
  2. Double–click the label, rename it Description and hit Return.
  3. With the Description label still selected, in the Size inspector size inspector icon set:

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

    NOTE: The description could end up being one or two lines of text. Currently the text is vertically centered within the label area. The alignment would look odd if we sometimes have one line of text, and other times have two lines. In a later exercise we’ll programmatically set it to vertically align to the top.

  4. As shown below, in the Attributes inspector attributes inspector icon to the far right of Font, click the down arrow until the font size ends up at 14.

    font size arrow

Adding a Divider

Let’s add a horizontal line to visually separate the top info from the description. There’s no specific object to create a line, but we can use a short view as a line.

  1. In the search bar at the bottom of the Object library object library icon, delete the text and type view.

    NOTE: View will be one of the last objects listed in the Object library.

  2. Drag the View object below the description. Don’t worry about the size and positioning, we’ll adjust that shortly.
  3. In the Attributes inspector attributes inspector icon, next to Background click on the color bar to open the Colors window. (If a menu appears instead, choose Other and the Colors window will open.)
  4. At the top of the Colors window, click the second tab colors sliders tab to see the color sliders.
  5. There will be a menu that says Color Sliders. From that menu choose Gray Scale Slider.
  6. To the right of the Brightness slider, type in 85 for the % and hit Return to apply it.
  7. Close the Colors window.
  8. In the Size inspector size inspector icon, set the following:

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

    Those settings should position the line between the description and the info above it. Please note that we’re leaving so much empty space below the description so we can add a video in a later exercise.

Adding the Band Images

Let’s add one of the actual band images to the placeholder. First we need to add the images into our project.

  1. In the Project navigator, click on Assets.xcassets.

  2. Switch to the Desktop and navigate into: Class Files > yourname-iOS Dev Level 2 Class > Band Images > fullsize
  3. This folder contains both the regular images along with the Retina and Retina HD versions of the images. Press Cmd–A to select all the images in that folder.

    NOTE: You may remember from a previous exercise that Retina images must be twice the pixel dimensions of non-Retina images and end with @2x in their filename. Retina HD images must be three times the dimensions of regular images and end with @3x.

  4. With Xcode visible, drag the images to either column in the Editor.
  5. Click on Main.storyboard.
  6. Click the UIImageView placeholder in the Editor.
  7. In the Attributes inspector attributes inspector icon, from the Image menu choose full-nicole-atkins.
  8. Let’s see how this looks so far. Click the Run button.
  9. When the app loads in the Simulator, click on any of the bands to view the detail view we just made. Awesome!

    NOTE: Currently, clicking any cell will lead to the same detail view. In the next exercise, we’ll show you how to code the app so the details for each of the bands are shown.

  10. Switch back to Xcode.
  11. Click the Stop button.
  12. Do a File > Save.
  13. Leave the project open. We’ll continue to work on it in the next exercise.

Noble Desktop Publishing Team

The Noble Desktop Publishing Team includes writers, editors, instructors, and industry experts who collaborate to publish up-to-date content on today's top skills and software. From career guides to software tutorials to introductory video courses, Noble aims to produce relevant learning resources for people interested in coding, design, data, marketing, and other in-demand professions.

More articles by Noble Desktop Publishing Team

How to Learn IOS & Web Development

Master IOS Development, Web Development, Coding, and More with Hands-on Training. IOS Development Involves Designing Apps for Apple Mobile Devices with Tools Like Xcode and SwiftUI.

Yelp Facebook LinkedIn YouTube Twitter Instagram