The Preview function in SwiftUI permits builders to see what their app will appear to be in real-time, with out having to run the app on a tool or simulator. This function is extremely helpful for builders who need to rapidly iterate on their designs and ensure all the things appears to be like and features as supposed. With the introduction of Macros in iOS 17, the Preview function has turn out to be much more highly effective and versatile, permitting for much more customization and suppleness. On this article, we’ll discover learn how to use the brand new Preview Macro in SwiftUI and check out a few of its thrilling new options.
The SwiftUI #Preview Macro
Previous to the introduction of the brand new #Preview macro, you outline a construction that conforms to the PreviewProvider protocol to create a preview of a view. Right here is an instance:
|
struct ContentView_Previews: PreviewProvider { static var previews: some View { ContentView() } } |
With the #Preview macros, you inform Xcode to create a preview like this:
|
// The fundamental syntax #Preview { ContentView() }
// Configure the preview’s identify #Preview(“Pie Chart View”) { PieChartView() } |
As you possibly can see, #Preview simplifies the way in which we outline previews. Optionally, you possibly can cross the #Preview macro a reputation to configure the preview’s identify.
You should use this to arrange a preview for any view as wanted. Xcode will then render the preview, which is able to seem immediately within the canvas.
Previewing A number of Views
When utilizing PreviewProvider, you possibly can embed a number of views to preview utilizing Group.
|
struct ArticleView_Previews: PreviewProvider { static var previews: some View { Group { ArticleListView() .previewDisplayName(“Article Record View”)
ArticleView() .previewDisplayName(“Article View”) } } } |
In the event you use the #Preview macro, you possibly can outline a number of blocks of #Preview sections. For instance, to preview each ArticleListView and ArticleView, you possibly can create two #Preview code blocks as follows:
|
#Preview(“Article Record View”) { ArticleListView() }
#Preview(“Article View”) { ArticleView() } |
Preview Views in Panorama Orientation
The #Preview macro has an non-obligatory traits parameter that enables builders to customise the orientation of the simulator. To preview views in panorama mode, you possibly can cross .landscapeLeft or .landscapeRight to the traits parameter. Right here is an instance:
|
#Preview(“Article Record View”, traits: .landscapeLeft) { ArticleListView() } |
Preview with out Machine Body and Fastened Structure
The traits parameters can take one other worth named .sizeThatFitsLayout so as to preview the view with none system body.
On high of .sizeThatFitsLayout, you can too use .fixedLayout to preview the view in a selected dimension.
|
#Preview(“Article Record View”, traits: .fixedLayout(width: 300, peak: 300)) { ArticleListView() } |
Writing UIKit Previews
The Preview function is now not restricted to SwiftUI. Even in the event you use UIKit, you possibly can arrange a preview to your UIKit views or view controllers utilizing the #Preview macro. To preview a view controller, you possibly can instantiate it within the code block:
|
#Preview { var controller = ViewController()
return controller } |
In case your view controller is designed within the storyboard, you can too preview it utilizing the macro. Right here is the pattern code snippet:
|
#Preview(“From Storyboard”) { let storyboard = UIStoryboard(identify: “Predominant”, bundle: nil)
var controller = storyboard.instantiateViewController(withIdentifier: “ViewController”)
return controller } |
Assuming you have got assigned a storyboard ID for the view controller, you possibly can create the view controller utilizing the instantiateViewController methodology. That is how you utilize #Preview to preview a UIKit view controller.
Abstract
The Preview function in SwiftUI permits builders to see what their app will appear to be in real-time, with out having to run the app on a tool or simulator. The #Preview macro launched in iOS 17 makes the preview code cleaner and easier. It has turn out to be much more highly effective and versatile, permitting you to preview views developed in UIKit.
In the event you take pleasure in studying this tutorial, don’t neglect to take a look at our Mastering SwiftUI guide.
Founding father of AppCoda. Writer of a number of iOS programming books together with Starting iOS Programming with Swift and Mastering SwiftUI. iOS App Developer and Blogger. Observe me at Fb, Twitter and Google+.
