Home IOS Development The way to Use the SwiftUI Preview Macro in Xcode

The way to Use the SwiftUI Preview Macro in Xcode

0
The way to Use the SwiftUI Preview Macro in Xcode

[ad_1]

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:

With the #Preview macros, you inform Xcode to create a preview like this:

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.

swiftui-preview-basics

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

swiftui-preview-multiple-views

When utilizing PreviewProvider, you’ll be able to embed a number of views to preview utilizing Group.

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 Views in Panorama Orientation

swiftui-preview-landscape

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 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.

swiftui-preview-sizethatfits

On prime of .sizeThatFitsLayout, you too can use .fixedLayout to preview the view in a particular dimension.

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:

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:

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.

swiftui-preview-storyboard-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+.



[ad_2]

LEAVE A REPLY

Please enter your comment!
Please enter your name here