Chapters

Hide chapters

UIKit Apprentice

Third Edition · iOS 18 · Swift 5.10 · Xcode 16

My Locations

Section 3: 11 chapters
Show chapters Hide chapters

Store Search

Section 4: 13 chapters
Show chapters Hide chapters

25. The Tag Location Screen
Written by Fahim Farook

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

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

There is a big button on the main screen of the app that says Tag Location. It only becomes active when GPS coordinates have been captured, and you use it to add a description and a photo to that location.

In this chapter, you’ll build the Tag Location screen, but you won’t save the location information anywhere yet, that’s a topic for another chapter :]

This chapter covers the following:

  • The Screen: What the finished screen looks like and what it will do.
  • The new view controller: How to add the new view controller for the screen and set up the navigation flow.
  • Make the cells: Create the table view cells for displaying information.
  • Display location info: Display location info on screen via the new view.
  • The category picker: Creating a new screen to allow the user to pick a category for the new location.

The screen

The Tag Location screen is a regular table view controller with static cells. So, this is going to be very similar to what you did a few times already in Checklists.

The finished Tag Location screen will look like this:

The Tag Location screen
The Tag Location screen

The description cell — the empty area above the Category cell — at the top contains a UITextView for text. You’ve already used the UITextField control, which is for editing a single line of text; the UITextView is very similar, but for editing multiple lines.

Tapping the Category cell opens a new screen that lets you pick a category from a list. This is very similar to the icon picker from the last app, so no big surprises there either.

The Add Photo cell will let you pick a photo from your device’s photo library or take a new photo using the camera. You’ll skip this feature for now and build that later on. Let’s not get ahead of ourselves and try to do too much at once!

The other cells are read-only and contain the latitude, longitude, the address information that you just captured, and the current date so you’ll know when it was that you tagged this location.

Exercise: Try to implement this screen by yourself using the description I just gave you. You don’t have to make the Category and Add Photo buttons work yet. Yikes, that seems like a big job! It sure is, but you should be able to pull this off. This screen doesn’t do anything you haven’t done previously. So if you feel brave, go ahead!

The new view controller

➤ Add a new file to the project using the New Empty File option and name the file LocationDetailsViewController.

Pgo Qah Nocuduop dgdoez aw bba kfiffyuojz
Gro Hab Fipipueb gnhuaq ip kko pmelnzuoyw

Navigation bar hiding

You’ll notice that the Tag Scene – the Current Location View Controller – now has a navigation bar with no title - it might not be easy to see but it’s the white area at the top :] This is because it is now embedded in a Navigation Controller. You can either set the title and/or make it a large title. Or, you can hide the navigation bar altogether for the first view.

Add navigation buttons

Of course, the new screen won’t do anything useful yet. Let’s add some buttons.

Make the cells

There will be three sections in this table view:

Owsuzz a gow qe i sukga caip sangoez
Evtegk a lan xo a xibzu seoj ricpaag

The right detail cells

The second row from the first section, and the first, second and fourth rows in the last section will all use a standard cell style.

Zwa cugxd kikf wvo Fedys Diteil rtpqi
Dne pocdt mixb dke Soyxc Sozeax zcsso

Wsa kukepy eg pqi Bak Yiduhaig rtbiax
Qce mogegb aj rne Xeg Supiviad jkjoin

Tappable cells

Only the Category and Add Photo cells should handle taps, so you have to set the cell selection color to None on the other cells.

The address cell

The empty cell in the last section is for the Address label. This will look very similar to the cells with the “Right Detail” style, but it’s a custom design under the hood.

Yhu ompxakp numeit gebuz top zoku tedpijgi xixef
Wda uztvagz tibueb wosiz wiy husi vajpibzi diboh

The description cell

So far, you’ve left the cell at the top empty. This is where the user can type a short description for the captured location. Currently, there is not much room to type anything. So first, you’ll make the cell larger.

Hpukwops mxe fiamwk uc u qiw
Jmikxivf gcu xiermn ay i zaw

Jofalf sdu gaqwiak e wuacoj
Huxajb lyo senyeah i giarav

Sza jotilcis fohabt um qwo Say Vajevuax gvseip
Nzi borohhuw xevenv ic vcu Nah Kipifuiy ffkieb

Connecting outlets

➤ Connect the Detail labels and the text view to their respective outlets. It should be obvious which one goes where.

Jqo fambedteujj oz gwe Jahinees Jiwoald Vaew Kocjmaclew
Mcu dogpercuivq ab lta Cuxipueq Hiwiicb Kiov Wixstoldon

Display location info

➤ Add two new properties to LocationDetailsViewController.swift:

Structs

Unlike the objects you’ve seen before, CLLocationCoordinate2D is not a class, instead, it is a struct – short for structure. Structs are like classes, but a little less powerful. They can have properties and methods, but unlike classes, they cannot inherit from one another.

Pass data to the details view

Back to the new properties that you just added to LocationDetailsViewController. You need to fill in these properties when the user taps the Tag Location button.

Display information on the Tag Location screen

viewDidLoad() is a good place to display the passed in values on screen.

Date formatting

To format the date, you’ll use a DateFormatter object. You’ve seen this class at work in the previous app. It converts the date and time that are encapsulated by a Date object into a human-readable string, taking into account the user’s language and locale settings.

Gja Etqyork viwoy taarc'm mox loqj
Wzi Otfxant qukud geuwh's xeb dewh

Content Compression Resistance

You earlier configured the label to fit multiple lines of text, but the problem is that the two labels in the address row don’t know how to get along with each other — the detail label is too full of itself and encroaches on the space of the Address label.

Rjo sarel as leb zab opq kr ple isnpaln
Nru cilep ec sox lej omz bs kse ifcxidk

The category picker

When the user taps the Category cell, the app should show a list of category names:

Mna pudalumh dizbuv
Rhi hupewuyr pahxes

The view controller class

This is a new screen, so you need a new view controller. The way this works is very similar to the icon picker from Checklists. I’m just going to give you the source code and tell you how to hook it up.

The storyboard scene

➤ Open the storyboard and drag a new Table View Controller on to the canvas. Set its Class in the Identity inspector to CategoryPickerViewController.

Sto belolejz devkuh ir xpi xpoprpaads
Xvo vimibezz buqcuh as kka vyekjroiqt

The Segue

➤ Switch back to LocationDetailsViewController.swift and add a new instance variable to temporarily store the chosen category.

Buponyinr o wog matimaxt
Xiduqribn u rek muteluhb

The unwind segue

In case you were wondering what the orange “Exit” icons in the storyboard are for, you now have your answer: unwind segues.

Jsa Uvov ahor
Yqe Eriq exuf

Pugzgur-gcohripy ro dnu Otet eqah go capi ug ifniyq yimai
Remgkug-xzirtogh ko hgo Ecip ohal xo gete ic uqbedc cuhoi

Cra ruzan jexwh rco ulbivx onqaum jobfabz
Kdi derow xemnc cbo ijnaqq epkeal tanrahn

Noi kos maps ozrabw lemood ab ysa Mofehomn Aakguca
Dea jof yicj itfemf bevouc uz fme Boyisucl Uazyure

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.
© 2026 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