SwiftUI

Get to know SwiftUI

Declarative syntax

Write the results, not the instructions

SwiftUI uses a declarative syntax, so you can simply state what your user interface should do. For example, you can write that you want a list of items consisting of text fields, then describe alignment, font, and color for each field. Your code is simpler and easier to read than ever before, saving you time and maintenance.

import SwiftUI

struct AlbumDetail: View {
	var album: Album

	var body: some View {
		List(album.songs) { song in 
			HStack {
				Image(album.cover)
				VStack(alignment: .leading) {
					Text(song.title)
					Text(song.artist.name)
						.foregroundStyle(.secondary)
				}
			}
		}
	}
}

This declarative style even applies to complex concepts like animation. Easily add animation to almost any control and choose a collection of ready-to-use effects with only a few lines of code. At runtime, the system handles all of the steps needed to create a smooth movement, even dealing with user interaction and state changes mid-animation. With animation this easy, you’ll be looking for new ways to make your app come alive.

SwiftUI essentials

Easy integration

Adopt SwiftUI at your own pace

SwiftUI is designed to work alongside UIKit and AppKit, so you can adopt it incrementally in your existing apps. When it’s time to construct a new part of your user interface or rebuild an existing one, you can use SwiftUI while keeping the rest of your codebase the same. Alternatively, if you’re building a new SwiftUI app and want to use an interface element that isn’t offered, you can mix and match with UIKit and AppKit to get of the best of all worlds.

Xcode previews

Iterate quickly and preview while you work

With Xcode previews, you can make changes to your app’s views in code, and see the results of those changes quickly in the preview canvas. Add previews to your SwiftUI views using the preview macro. Then configure how you want your previews to display using Xcode’s preview canvas, or programmatically in code. When you select the live or interactive preview option, your view appears and interacts just like it would on a device or simulator. And in select mode, the preview displays a snapshot of your view so you can interact with your view’s UI elements in the canvas. Selecting a control in the preview highlights the corresponding line of code in the source editor. Finally, you can adjust device settings to control how a preview displays, including in Dark Mode, landscape orientation, or different sized text.

Learn more about Xcode