Boost Your iOS Development Time by Leveraging SwiftUI Previews | by Kelvin Tan | Apr, 2022

Photograph by Glenn Carstens-Peters on Unsplash

SwiftUI is game-changer and has introduced so many profit to us already ever because it was launched.

Nonetheless, the questions proceed to linger about whether or not SwiftUI is steady sufficient for use in manufacturing code? To that, I reply, sure. It’s extra steady than anytime it was launched years in the past.

One other concern might most likely be that your current code is just using UIKit and there’s no technique to migrate to SwiftUI — so that you couldn’t see the good thing about SwiftUI inside the challenge. I imply, let’s begin small and study concerning the existence of SwiftUI Preview and the way it might change the best way you write your code.

At this time, you’ll study one extra advantage of utilizing SwiftUI Preview no matter your code fashion.

It’s cumbersome to construct and run an app simply to see the UI modifications you made. What’s even worse is, generally the construct takes ceaselessly or generally you might be caught on a clean display on the simulator and you’ll have to stop the simulator and rebuild all the things.

Worst-case situation: clear construct and deleting derived information and rebuild all the things which is able to take one other half-hour.

Only for seeing minimal UI modifications, this course of alone is time-consuming.

Whether or not you might be writing your UI programmatically or by means of XIB/Storyboard, this may vastly profit you and prevent lots of time as a result of all you really want to see is simply the small UI modifications you made. You could possibly do that on both UIView or UIViewController since all the things just about is wrapped underneath these, you may principally apply it to all the things.

One other plus level with SwiftUI Preview is that it permits you to work together on the preview itself the place actions will be triggered. For instance, clicking a button would current a pop-up or navigate to a unique display.

Let’s create some code that may allow SwiftUI Preview for UIViewController. To try this, please create a brand new file with the next code.

import SwiftUI@obtainable(iOS 13, *)
// 1
public struct ViewControllerPreview<ViewController: UIViewController>: UIViewControllerRepresentable
let viewController: ViewController
// 2
public init(_ builder: @escaping () -> ViewController)
viewController = builder()

// 3
public func makeUIViewController(context: Context) -> ViewController

// 4
public func updateUIViewController(_ uiViewController: ViewController, context: Context)

  1. Apple created UIViewControllerRepresentable protocol to handle UIKit ViewController in SwiftUI interface.
  2. Initialise the ViewController.
  3. Create the ViewController object with it is preliminary state.
  4. Replace the ViewController with data from SwiftUI. It is required and deliberately left clean as we’re solely specializing in creation.

Now that you’ve set the code above, now you can apply it to your UIViewController.

This code will be on the backside of the ViewController.

Merely exchange ViewController() with the identify of the file that you just want to preview.

import SwiftUIstruct ViewControllerExamplePreview: PreviewProvider 
static var previews: some View

You’ll now not have to construct and run the app anymore to see the UI modifications you made. This can undoubtedly save your improvement time by quite a bit.

One other use case that you possibly can most likely use is to see modifications on each notchless and notch telephone. For example, iPhone 8, iPhone SE, iPhone 8 Plus doesn’t have secure space whereas iPhone X, iPhone 11, iPhone 12 have secure space. The UI might generally look just a little completely different if the constraints aren’t set accurately.

Previewing each kinds of iPhones, will prevent lots of time constructing and operating repeatedly. You are able to do that simply on SwiftUI Preview with only a line of code.

Relying on the kind of iPhone you want, you may simply write its identify (iPhone X) or the mannequin kind (iPad8,1).

import SwiftUIstruct ViewControllerExamplePreview: PreviewProvider 
static var previews: some View

.previewDevice("iPhone 13")


.previewDevice("iPhone 8")

More Posts