UIKit - Live Preview for UIViewController and UIView
Say thanks to SwiftUI Preview
What’s the issue?
Creating a project without Storyboard and xib is absolutely possible, but sometimes it can be painful managing UI and constraints programmatically. Thus, what is the effective practice of doing that? Are we able to speed up development time to manage those constraints, sizing and colouring?
Yes, we can. Thanks to SwiftUI Preview for the wonderful feature. It is designed for SwiftUI, and still usable for UIKit.
Advantages of Live Preview feature:
- Easy to manage constraints programmatically.
- Easy to preview the expected UI without having to run the code and go through the flow (clicking here and there) until reach the target screen.
Now, we can make live preview for UIView and UIViewController.
Let’s Solve it
As mentioned by these two articles (see references section), all we need is just create an extension for UIViewController and UIView, then add the helper functions.
Then, In our ViewController or View, we just need to call the preview struct.
Let’s create a new project and add a simple UIView and UIViewController. I prefer to use SnapKit to manage the constraints. Include that in your Podfile, run pod install and open the workspace.
1. Remove Storyboard
First, remove “Main” from Project > General > Main Interface. Then open Info.plist as Source Code and remove this two lines.
<key>UISceneStoryboardFile</key>
<string>Main</string>2. Set Root Window
Add below code to SceneDelegate.swift to enable start our root Window from specified ViewController.
3. Add Preview to UIVIew and UIViewController Extension
UIViewController Preview Extension
Create a new file UIViewControllerExtenstion.swift
UIView Preview Extension
Create new file calledUIViewExtension.swift
4. How To Use It?
In UIView Class
Add a new UIView file, called HeaderView.swift
See at the bottom of this file, we will call the struct Preview with our extension showPreview() to enable the UIView preview. So you will be able to get as show in image below. That’s so cool!
In UIViewController Class
Great! Now, include the HeaderView component inside our ViewController. We also will add UITextView as a body component. I prefer to use UIStackView to easily add and arrange UIView components. Add below codes to your ViewController.swift file in viewDidLoad() and you should be able to get the preview of the header and the long text.
Again, check the bottom of this ViewController class, where we called the preview section. Mission accomplished! 😎
Bonus 💰
We also have another thing as a bonus. Yes, we can easily see the changes for different devices. Just choose from the dropdown option. Take note that, it is going to take sometimes to load for the first time.
Awesome! Now, you already got the idea and understand the steps of using the live preview. This can make our job much faster, especially when dealing with UI programmatically.
What’s next? You may visit a full project in my GitHub here. I am using multiple components. You may fork and extend the project perhaps adding delegate, observer, viewModel, etc, so it will become more independent.
Thanks for your reading and don’t forget to share with your friends. Feedbacks are most welcome.
“Learn, that’s how we grow our coding skills”
