TableView Cell Popover View

Have you every wondered how to implement the ability for the user of your iOS app to see a popover view when he/she tap a table view cell? Well, today you will learn how to do that. You will also learn how to do these tasks:

• Set the background color of the selected table view cell
• Pass data to the popover view class
• Set properties of the popover view’s controls
• Set the popover view’s background and arrow color

Before You Begin

Before you get started in performing above tasks, I assume the following:

• You have Xcode on your Mac and know to use it.
• You aren’t a newbie to iOS app development and the Swift programming language.
• You know how to use the UITableView class and its functions.
• You’ve downloaded this Xcode project. It was created with Xcode Version 6.2. You’ll use it to implement above tasks.

The App Views

The Xcode project have two views and each one is connected to its own swift class file. You’ll add code in the class files to implement above mentioned tasks. By the end of the workshop, the application’s views will look like those shown in Figure 1-1 and Figure 1-2.

Figure 1-1: TableViewController View	Figure 1-2: PopoverViewController View

* The image shown in the table view cells came from icons8.com

The Table View Controller Class Code

Let’s get starting in adding code in the TableViewController.swift file. The first thing you have to do is conform the TableViewController class to the UIPopoverPresentationControllerDelegate protocol like this:

class TableViewController: UITableViewController, UIPopoverPresentationControllerDelegate {

To populate the table view cells with items shown in Figure 1-1 above, you’ll have to load the tableView’s data source object by adding this statement in the viewDidLoad() function.

override func viewDidLoad() {
  super.viewDidLoad()
  musicVideoList = ["Video 1","Video 2","Video 3","Video 4","Video 5"]
}

Next, add this code in the tableView’s cellForRowAtIndexPath() function:

// Create a reusable cell
cell = tableView.dequeueReusableCellWithIdentifier("Cell", forIndexPath: indexPath) as UITableViewCell

// Configure the reusable cell
cell.imageView?.image = UIImage(named: "music-video-32")
cell.textLabel?.text = musicVideoList[indexPath.row]

// Set the selected cell's background to a light mint green color
var bgColorView = UIView()
bgColorView.backgroundColor = UIColor(red:0.93, green:0.98, blue:0.93, alpha:1.00)
cell.selectedBackgroundView = bgColorView

// Return the configured cell
return cell

Next, add this code in the tableView’s didSelectRowAtIndexPath() function:

To add emojis in a Swift string, do the following:

1. Put your cursor in between the “”, then in the menu bar, select Show Character Viewer.
2. Select Emoji in the far left panel of the Character View.
3. Locate the emoji in the third panel or enter its name in the Search box.
4. Double-click the emoji to add it where you placed your cursor.
5. If you want to add more emojis between the “”, then repeat step 3 and 4.

Now, for the PopoverViewController’s view to appear as a popover on iPhone devices, you have to implement this delegate function of the UIPopoverPresentationControllerDelegate protocol in the TableViewController.swift file.

func adaptivePresentationStyleForPresentationController(controller: UIPresentationController) -> UIModalPresentationStyle {
  return UIModalPresentationStyle.None
}

That’s all the code you have to add in the TableViewController.swift file.

The Popover View Controller Class Code

The only thing you have to do is add code shown below in the PopoverViewController.swift file’s viewDidLoad() function.

override func viewDidLoad() {
  super.viewDidLoad()

  // Set the view's backgroundColor to a light mint green color
  self.view.backgroundColor = UIColor(red:0.93, green:0.98, blue:0.93, alpha:1.00)

  // Set the TextField's textColor, font, and text property
  welcomeMessage.textColor = UIColor.brownColor()
  welcomeMessage.font = UIFont.boldSystemFontOfSize(18)
  welcomeMessage.text = message

  // Set the Label's text property
  videoTitle.text = selectedVideoTitle
}

Test The Class Files Code

Run the app in the sim. You will see the TableViewController’s view-see Figure 1-1 above. When you click a cell in the tableView, the PopoverViewController’s view will show up as a popover, over the TableViewController’s view-see Figure 1-2 above.

That’s it! Now you know how to implement the ability for the user of your iOS app to see a popover view when he/she tap a table view cell. Comments are welcomed! 🙂