Xcode [Apple]
Xcode 15 allows you to preview your iOS app's UI as you build it. Here's how to use it to see how your app looks to users.
Xcode 15 introduces UI previews, which let you see what your UI will look like when you create it in SwiftUI.
Specifically, Xcode has added the #Preview macro, which allows you to define how previews will be displayed for any view or presentation you add to your SwiftUI app.
In Swift and C-based languages, a macro is a compiler directive that tells the compiler that something special will happen and treats the code defined in the macro as a special case at compile time.
When you compile code, the compiler converts any macros it finds into code based on what's inside the macro. Macros allow you to define a block of code once and then reuse it throughout your application.
SwiftUI allows you to define your app using text and text view definitions, unlike AppKit Interface Builder's older visual views. Using SwiftUI and Preview, you can enter your code into the Xcode editor panel on the left and see a preview of it in the Xcode simulator on the right.
As you enter and change SwiftUI code, the UI preview changes in real time, showing you what you think.
This has the great advantage that you can see what your application will look like without having to run a compile/build/run cycle every time you make a change to the code.
Usually in SwiftUI you can define a ContentView of a view using the Swift framework. For example:
struct ContentView: View {
var body: some View {
//…
}
}
Below, by default, you can define the #Preview macro to simply return a ContentView that Xcode will use to display the view in the preview pane:
#Preview {
ContentView()
}
This is the default #Preview macro that you must provide in order for your view to appear in the preview pane in Xcode. You can also add additional code to the #Preview macro for each view to further customize the way your view is rendered in Xcode.
When you compile the code, the Swift compiler actually expands the #Preview macro into a Swift “Preview(_:body:)” statement that takes an optional name and ViewBuilder as parameters.
ViewBuilder is defined by the Swift @ViewBuilder keyword, which tells Swift which UI elements to display below.
If you want to define multiple #Preview macros in a single source file, you can pass the name as a Swift string to differentiate each one:
#Preview(“Input true” ) {
ContentView(someInput: true)
}
The SwiftUI documentation also has a page that explains the #Preview macro and how to its use ViewBuilder along with it.
As a general rule, you should define one #Preview macro for each custom view you define in your SwiftUI source file.
If you don't use the #Preview macro for every custom view you create, you'll need to provide a preview provider protocol for each view – this is a little more complex and requires a little more effort. code.
We covered preview providers in a previous article, which we mention below, so we won't cover them again here.
Once the #Preview macros are defined in your code for each of your views, you can display the Xcode preview canvas by selecting Editor->Canvas from the Xcode main menu. bar.
Show canvas from the Editor menu.
Typically, in Swift, a view in an application is defined by a Swift class view that is synonymous with UIView in Objective-C or NSView for macOS applications in Objective-C.
Each Swift View can contain one or more subviews in its ContentView. ContentView is the view that is displayed on the screen when your application starts.
In fact, in Swift, a view is defined as a struct and struct protocol, not as a class. In Swift, structs are more flexible than classes, but they can be made to behave like classes, making it easier to add additional data and behavior.
A protocol is a set of methods or properties defined for a structure or class that you must implement.
To provide a custom view in Swift, you declare a type that conforms to the view protocol and implement the necessary computed body property to provide the content of your view.
For example:
struct MyView: View {
var body: some View {
Text(“Hello, World!” )
}
}
In this example, we define a custom structure called MyView that inherits from the Apple View class and follows the View protocol with a computed property body definition (also as a view) that has one Text subview with the text “Hello, World!” in that.
When this structure is run, a single text view is displayed with the text “Hello, World!” In the user interface.
Apple provides various predefined views (such as text) that you can use in the view body to create a user interface.
In the Xcode Preview Canvas, when you change any code in the MyView structure, the Canvas updates the view in real time to show you your changes.
The result of using Xcode Preview is that you can see your user interface in Xcode as you type—without having to build and run an application. This saves a huge amount of time during development.
SwiftUI and previews simplify development and significantly reduce the number of steps required to assemble a user interface in code.
For a full discussion of how views work in Xcode, see the Apple SwiftUI documentation section. Presentation Basics.
Documentation and Resources
Apple has a twenty-seven minute video from WWDC ' 23 titled “Creating a Software UI with Xcode Previews” which briefly describes how to use Xcode Previews to see your UI as you create it.
In the Xcode documentation, Apple has a complete guide to previewing your UI while developing it in Xcode called Previewing Your App's UI in Xcode.
Also see our previous article, How to Use Xcode Preview to See How Your App Looks as You Build It.
