Chapters
Chapters

Chapters

Hide chapters

iOS Apprentice

Eighth Edition · iOS 13 · Swift 5.2 · Xcode 11

Before You Begin

Section 0: 3 chapters
Show chapters Hide chapters

Getting Started with UIKit

Section 1: 8 chapters
Show chapters Hide chapters

Checklists

Section 2: 12 chapters
Show chapters Hide chapters

My Locations

Section 3: 11 chapters
Show chapters Hide chapters

Store Search

Section 4: 12 chapters
Show chapters Hide chapters

Getting Started with SwiftUI

Section 5: 3 chapters
Show chapters Hide chapters

Checklists

Section 6: 8 chapters
Show chapters Hide chapters

37. The Detail Pop-up
Written by Eli Ganim

Heads up... You’re accessing parts of this content for free, with some sections shown as scrambled text.

Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.

Unlock now

Heads up... You’re accessing parts of this content for free, with some sections shown as scrambled text.

Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.

Unlock now

The iTunes web service sends back a lot more information about the products than you’re currently displaying. Let’s add a “details” screen to the app that pops up when the user taps a row in the table:

The app shows a pop-up when you tap a search result
The app shows a pop-up when you tap a search result

The table and search bar are still visible in the background, but they have been darkened.

You will place this Detail pop-up on top of the existing screen using a presentation controller, use Dynamic Type to change the fonts based on the user’s preferences, draw your own gradients with Core Graphics, and learn to make cool keyframe animations. Fun times ahead!

This chapter will cover the following:

  • The new view controller: Create the bare minimum necessary for the new Detail pop-up and add the code to show/hide the pop-up.
  • Add the rest of the controls: Complete the design for the Detail pop-up.
  • Show data in the pop-up: Display selected item information in the Detail pop-up.

The new view controller

A new screen means a new view controller, so let’s start with that.

First, you’re going to do the absolute minimum to show this new screen and to dismiss it. You’ll add a “close” button to the scene and then write the code to show/hide this view controller. Once that works, you will put in the rest of the controls.

The basic view controller

➤ Add a new Cocoa Touch Class file to the project. Call it DetailViewController and make it a subclass of UIViewController.

Editing the scene name to give it a simpler name
Itedams fpu bxeke qayu va qike ej u bevrseg huqe

Giving the view a description for use in Xcode
Pakend fja fuog o konynozfeub ket ulu ed Zwide

The Detail scene has a white square and a close button on a dark background
Pvi Dudeox xciba gex i qnaca bzoiho elv e qkake leszeg os e jeds miwgpmiuzf

Showing and hiding the scene

Let’s write the code to show and hide this new screen.

// MARK:- Actions
@IBAction func close() {
  dismiss(animated: true, completion: nil)
}

func tableView(_ tableView: UITableView, 
  didSelectRowAt indexPath: IndexPath) {
  tableView.deselectRow(at: indexPath, animated: true)
  // Add the following line
  performSegue(withIdentifier: "ShowDetail", sender: indexPath)  
}
What happens when you present the Detail screen modally
Jgoq yevfocf wrex dau jvaqazt tya Nupeuv njboit dazunkk

Custom presentation controller

➤ Add a new Swift File to the project, named DimmingPresentationController.

import UIKit

class DimmingPresentationController: UIPresentationController {
  override var shouldRemovePresentersView: Bool {
    return false
  }
}

extension DetailViewController: 
          UIViewControllerTransitioningDelegate {

  func presentationController(
     forPresented presented: UIViewController, 
     presenting: UIViewController?, source: UIViewController) ->
     UIPresentationController? {
    return DimmingPresentationController(
             presentedViewController: presented, 
                          presenting: presenting)
  }
}

required init?(coder aDecoder: NSCoder) {
  super.init(coder: aDecoder)
  modalPresentationStyle = .custom
  transitioningDelegate = self
}
The Detail pop-up background is now see-through
Fni Tiviar zuv-uz tudtywuemm ug fom juo-lwxuoyg

Adding the rest of the controls

Let’s finish the design of the Detail screen. You will add a few labels, an image view for the artwork and a button that opens the product in the iTunes store.

The Detail screen with the rest of the controls
Ysa Suzuor kxjeul jofl mqu polq ef ndo gotskotm

Adding the controls

➤ Drag a new Image View, six Labels, and a Button on to the pop-up view and build a layout like the one from the picture.

@IBOutlet weak var popupView: UIView!
@IBOutlet weak var artworkImageView: UIImageView!
@IBOutlet weak var nameLabel: UILabel!
@IBOutlet weak var artistNameLabel: UILabel!
@IBOutlet weak var kindLabel: UILabel!
@IBOutlet weak var genreLabel: UILabel!
@IBOutlet weak var priceButton: UIButton!
The new controls in the Detail pop-up
Pqa lik tebjnuyc eg pno Dakian req-aq

Stretchable images

The reason you did not put a background image on the price button yet is because you need to learn first about stretchable images. When you put a background image on a button in Interface Builder, it always has to fit the button exactly. That works fine in many cases, but a more flexible approach is to use an image that can stretch to fit any size.

The caps are not stretched but the inner part of the image is
Smu sasx ude ruq wqhoscjis sik sge otket zoxn eb wfu upaxa al

The PriceButton image
Bha CxotaBunras oxino

The Start Slicing button
Gba Glurh Mbozist sodmec

The Slice Horizontally button
Nla Rtigu Nimuyapdosxk lonfer

After slicing
Obduy lqoyezl

The price button with the stretchable background image
Plo hzeve ciwzuz savw hci nlcedlnakwe facbjhaotr ojali

The tint color

The color of the button text comes from the global tint color. UIImage makes it very easy to make images appear in the same tint color.

view.tintColor = UIColor(red: 20/255, green: 160/255, 
                        blue: 160/255, alpha: 1)
The buttons appear in the new tint color
Mki kiqwegg emzeel ag bge cid tupy ripav

Rounded corner views

UIViews do their drawing using what’s known as a CALayer object. The CA prefix stands for Core Animation, which is the awesome framework that makes animations so easy on the iPhone. You don’t need to know much about these “layers,” except that each view has one, and that layers have some handy properties.

popupView.layer.cornerRadius = 10
The pop-up now has rounded corners
Xfo his-ip zet pim boivleq juwvuzp

Tap gesture recognizer

The close button is pretty small, about 15 by 15 points. From the Simulator it is easy to click because you’re using a precision pointing device, a.k.a. the mouse. But your fingers are a lot less accurate, making it much harder to aim for that tiny button on an actual device.

extension DetailViewController: UIGestureRecognizerDelegate {
  func gestureRecognizer(
       _ gestureRecognizer: UIGestureRecognizer, 
       shouldReceive touch: UITouch) -> Bool {
    return (touch.view === self.view)
  }
}

let gestureRecognizer = UITapGestureRecognizer(target: self, 
                                   action: #selector(close))
gestureRecognizer.cancelsTouchesInView = false
gestureRecognizer.delegate = self
view.addGestureRecognizer(gestureRecognizer)

Showing data in the pop-up

Now that the app can show this pop-up after a tap on a search result, you should put the name, genre and price from the selected product in the pop-up.

Displaying selected item information in pop-up

➤ Add a property to DetailViewController.swift to store the passed in object reference:

var searchResult: SearchResult!

// MARK:- Helper Methods
func updateUI() {
  nameLabel.text = searchResult.name
  
  if searchResult.artist.isEmpty {
    artistNameLabel.text = "Unknown"
  } else {
    artistNameLabel.text = searchResult.artist
  }
  kindLabel.text = searchResult.type
  genreLabel.text = searchResult.genre
}

override func viewDidLoad() {
  . . .
  if searchResult != nil {
    updateUI()
  }
}

// MARK:- Navigation
override func prepare(for segue: UIStoryboardSegue, 
                         sender: Any?) {
 if segue.identifier == "ShowDetail" {
   let detailViewController = segue.destination 
                              as! DetailViewController
   let indexPath = sender as! IndexPath
   let searchResult = searchResults[indexPath.row]
   detailViewController.searchResult = searchResult
 }
}
The pop-up with filled-in data
Wdu teq-ot hery zoqqod-ut wiga

Showing the price

You still need to show the price for the item and the correct currency.

// Show price
let formatter = NumberFormatter()
formatter.numberStyle = .currency
formatter.currencyCode = searchResult.currency

let priceText: String
if searchResult.price == 0 {
  priceText = "Free"
} else if let text = formatter.string(
          from: searchResult.price as NSNumber) {
  priceText = text
} else {
  priceText = ""
}

priceButton.setTitle(priceText, for: .normal)
The price doesn’t fit into the button
Qfu dxuxa peixy’b nel ayho kge fuhfex

The button is a little cramped
Dki gurkix og o nuzcse fxuhkex

Changing the content edge insets of the button
Bridvuzp vyo noqdujr iwge agmewr oj sqa xobdak

That price button looks so good you almost want to tap it!
Pruc dcipa yadwif laads ni laor rau ockulq fasj xu jul ah!

Navigating to the product page on iTunes

Tapping the price button should take the user to the selected product’s page on the iTunes Store.

@IBAction func openInStore() {
  if let url = URL(string: searchResult.storeURL) {
    UIApplication.shared.open(url, options: [:], 
                          completionHandler: nil)
  }
}

Loading artwork

For the Detail pop-up, you need to display a slightly larger, more detailed image than the one from the table view cell. For this, you’ll use your old friend, the handy UIImageView extension, again.

var downloadTask: URLSessionDownloadTask?

// Get image
if let largeURL = URL(string: searchResult.imageLarge) {
  downloadTask = artworkImageView.loadImage(url: largeURL)
}

deinit {
  print("deinit \(self)")
  downloadTask?.cancel()
}
The pop-up now shows the artwork image
Wca pas-oz wul sgedp dso axfnesb oyofa

36. URLSession
38. Polish the Pop-up
Have a technical question? Want to report a bug? You can ask questions and report bugs to the book authors in our official book forum here.
© 2024 Kodeco Inc.

You’re accessing parts of this content for free, with some sections shown as scrambled text. Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.

Unlock now