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.
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
UIView Preview Extension
Create new file called
4. How To Use It?
In UIView Class
Add a new UIView file, called
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! 😎
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”