The Preview characteristic in SwiftUI permits builders to see what their app will seem like in real-time, with out having to run the app on a tool or simulator. This characteristic is extremely helpful for builders who need to rapidly iterate on their designs and ensure the whole lot seems and capabilities as meant. With the introduction of Macros in iOS 17, the Preview characteristic has change into much more highly effective and versatile, permitting for much more customization and suppleness. On this article, we’ll discover find out 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 essential syntax #Preview { ContentView() }
// Configure the preview’s identify #Preview(“Pie Chart View”) { PieChartView() } |
As you’ll be able to see, #Preview simplifies the way in which we outline previews. Optionally, you’ll be able to go the #Preview macro a reputation to configure the preview’s identify.
You should utilize this to arrange a preview for any view as wanted. Xcode will then render the preview, which is able to seem straight within the canvas.
Previewing A number of Views
When utilizing PreviewProvider, you’ll be able to embed a number of views to preview utilizing Group.
|
struct ArticleView_Previews: PreviewProvider { static var previews: some View { Group { ArticleListView() .previewDisplayName(“Article Checklist View”)
ArticleView() .previewDisplayName(“Article View”) } } } |
In the event you use the #Preview macro, you’ll be able to outline a number of blocks of #Preview sections. For instance, to preview each ArticleListView and ArticleView, you’ll be able to create two #Preview code blocks as follows:
|
#Preview(“Article Checklist View”) { ArticleListView() }
#Preview(“Article View”) { ArticleView() } |
Preview Views in Panorama Orientation
The #Preview macro has an non-compulsory traits parameter that enables builders to customise the orientation of the simulator. To preview views in panorama mode, you’ll be able to go .landscapeLeft or .landscapeRight to the traits parameter. Right here is an instance:
|
#Preview(“Article Checklist View”, traits: .landscapeLeft) { ArticleListView() } |
Preview with out System Body and Mounted Format
The traits parameters can take one other worth named .sizeThatFitsLayout with the intention to preview the view with none machine body.
On prime of .sizeThatFitsLayout, you too can use .fixedLayout to preview the view in a particular dimension.
|
#Preview(“Article Checklist View”, traits: .fixedLayout(width: 300, peak: 300)) { ArticleListView() } |
Writing UIKit Previews
The Preview characteristic is not restricted to SwiftUI. Even when you use UIKit, you’ll be able to arrange a preview on your UIKit views or view controllers utilizing the #Preview macro. To preview a view controller, you’ll be able to instantiate it within the code block:
|
#Preview { var controller = ViewController()
return controller } |
In case your view controller is designed within the storyboard, you too can preview it utilizing the macro. Right here is the pattern code snippet:
|
#Preview(“From Storyboard”) { let storyboard = UIStoryboard(identify: “Fundamental”, bundle: nil)
var controller = storyboard.instantiateViewController(withIdentifier: “ViewController”)
return controller } |
Assuming you might have assigned a storyboard ID for the view controller, you’ll be able to create the view controller utilizing the instantiateViewController methodology. That is how you utilize #Preview to preview a UIKit view controller.
Abstract
The Preview characteristic in SwiftUI permits builders to see what their app will seem like 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 less complicated. It has change into much more highly effective and versatile, permitting you to preview views developed in UIKit.
In the event you get pleasure from studying this tutorial, don’t overlook to take a look at our Mastering SwiftUI e-book.
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+.
