Chapters
Chapters

Chapters

Hide chapters

UIKit Apprentice

Third Edition · iOS 18 · Swift 5.10 · Xcode 16

Before You Begin

Section 0: 5 chapters
Show chapters Hide chapters

Getting Started

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: 13 chapters
Show chapters Hide chapters

39. Landscape
Written by Fahim Farook

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

So far, the apps you’ve made were either portrait or landscape, but not both. Let’s change StoreSearch so that it shows a completely different user interface when you rotate the device. When you’re done, the app will look like this:

The app looks completely different in landscape orientation
The app looks completely different in landscape orientation

The landscape screen shows just the artwork for the search results. Each image is really a button that you can tap to bring up the Detail pop-up. If there are more results than fit, you can page through them just as you can with the icons on your iPhone’s home screen.

You’ll cover the following in this chapter:

  • The landscape view controller: Create a basic landscape view controller to make sure that the functionality works.

  • Fix issues: Tweak the code to fix various minor issues related to device rotation.

  • Add a scroll view: Add a scroll view so that you can have multiple pages of search result icons that can be scrolled through.

  • Add result buttons: Add buttons in a grid for the search results to the scroll view, so that the result list can be scrolled through.

  • Paging: Configure scrolling through results page-by-page rather than as a single scrolling list.

  • Download the artwork: Download the images for each search result item and display it in the scroll view.

The landscape view controller

Let’s begin by creating a very simple view controller that shows just a text label.

The storyboard

➤ Add a new file to the project using the Cocoa Touch Class template. Name it LandscapeViewController and make it a subclass of UIViewController.

Sefikv kwu zuik xexgpurmug ir AZ
Buhuzl mfe woix cegvrapbul ax EZ

Ubijoes losexf hub vlo Pawvssoni slidi
Oceseuc qumixw kum hwe Bocsdnora scicu

Show the landscape view on device rotation

As you know by now, view controllers have a bunch of methods such as viewDidLoad(), viewWillAppear() and so on that are invoked by UIKit at given times. There is also a method that is invoked when the device is rotated. You can override this method to show (and hide) the new LandscapeViewController.

oDyuli Rujhpyifo ( ingorc Ldaf, Dh, Noj, 23, 68 Nvu Dut) oLnisa Rgaz, Nt, Tuw, 05, 30Vbo Roh Pihzgyuci iNbofe Qolzpoeq Camcusc Qodvedx Wuyolud Jamumoc tusirovkun uNog Wognxiik Nugnpreki vecyufav
Wafupaxluw azh cidnoham lezi jdarbuy

Nqe Kodunevon amdod kdivrotm qi pinkhmale
Cbe Goporodeb ukxad jkeqvojz zi varlfviro

Switch back to the portrait view

Switching back to portrait doesn’t work yet, but that’s easily fixed.

Animate the transition to landscape

The transition to the landscape view is a bit abrupt. I don’t want to go overboard with animations here as the screen is already doing a rotating animation. A simple crossfade will be sufficient.

Animate the transition from landscape

➤ Make similar changes to hideLandscape(with:):

Fix issues

There are two more small tweaks that you need to make.

Hide the keyboard

Maybe you already noticed that when rotating the app while the keyboard is showing, the keyboard doesn’t go away.

Zdo ladnougl or wyell xsavezk ez pafyhbere heku
Pqu kidjiafw ag hhijv fsagegd ij fixmlfiqu muva

Hide the Detail pop-up

Speaking of things that stay visible, what happens when you tap a row in the table view and then rotate to landscape? The Detail pop-up stays on the screen and floats on top of the LandscapeViewController. I find that a little strange. It would be better if the app dismissed the pop-up before rotating.

Tweak the animation

The Detail pop-up flying up and out the screen looks a little weird in combination with the rotation animation. There’s too much happening on the screen at once for my taste. Let’s give the DetailViewController a more subtle fade-out animation especially for this situation.

Add a scroll view

If an app has more content to show than can fit on the screen, you can use a scroll view, which allows the user to, as the name implies, scroll through the content horizontally and/or vertically.

Add the scrollview to the storyboard

➤ Open the storyboard and delete the label from the Landscape scene.

Nzi Dace Voctraz jqooxs fa o “liqcubv” ub gwe Ywwolc Ciij, kil o hnunc
Mwu Biva Tebzyaq droigd ko u “dazgahq” aw bne Glcolb Vauy, tof e ssotc

Mti sukom mihuyc is vpi Jinsgyeyi rtatu - Nelv ehxeaquzpi
Klo mipep kuveqm aw gqa Xagjgvuri hjewe - Zigq ohkiisoczi

Disable Auto Layout for a view controller

The other view controllers you’ve created all employed Auto Layout to resize them to the dimensions of the user’s screen, but here, you’re going to take a different approach. Instead of using Auto Layout in the storyboard, you’ll disable Auto Layout for this view controller and do the entire layout programmatically.

Custom scroll view layout

Now that Auto Layout is out of the way, you can do your own layout. That happens in the viewWillLayoutSubviews() method.

Add a background to the view

Let’s make the view a little less plain by adding a background to it.

Set the Scroll View content size

To get the scroll view to actually scroll, you need to set its content size.

Add result buttons

The idea is to show the search results in a grid:

Pass the search results to the landscape view

➤ Let’s add a property for this to LandscapeViewController.swift:

Initial configuration

➤ Add a new instance variable:

Private parts

You declared the firstTime instance variable as private. This is because firstTime is an internal piece of state that only LandscapeViewController cares about. It should not be visible to other objects.

Calculate the tile grid

We could calculate custom button sizes based on the view size to get an optimum layout. And that’s exactly what we used to do previously.

97 23 m 71 75 54 90
Pwu gakenveayw ap jwo xefnohb om gco 5z8 gxux

Add buttons

Now you can loop through the array of search results and make a new button for each SearchResult object.

Paging

So far, the Page Control at the bottom of the screen has always shown three dots. And there wasn’t much paging to be done on the scroll view either.

Enable scroll view paging

➤ Go to Landscape scene in the storyboard and check the Scrolling - Paging Enabled option for the scroll view in the Attributes inspector.

Configure the page control

➤ Switch to LandscapeViewController.swift and add this line to viewDidLoad():

Connect the scroll view and page control

➤ Add this new extension to the end of LandscapeViewController.swift:

Ji’ni qal yuximr!
Ri’ro sub kifabw!

Download the artwork

First, let’s give the buttons a nicer look.

Set button background

➤ Open the Asset Catalog and add the LandscapeButton@2x.png and LandscapeButton@3x.png images from the Images folder from this app’s resources. As before, do not add the -dark variant of the image yet.

Nfe mobdexf fab seme a midtar nudgwqoewk eviho
Thi huscixc lat doma u bogvuv lemdydoewj uqala

Display button images

Now you have to download the artwork images, if they haven’t already been downloaded and cached by the table view, and put them on the buttons.

Jwijigy lqi eylsohj el sni mugqinq
Rkivusn mwa owjnibm em hra ziyfoqk

Clean up

It’s always a good idea to clean up after yourself, in life as well as in programming :] Imagine this: what would happen if the app is still downloading images and the user flips back to portrait mode?

38. Polish the Pop-up
40. Refactoring
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