Protocol

View

A type that represents part of your app’s user interface and provides modifiers that you use to configure views.

Declaration

protocol View

Overview

You create custom views by declaring types that conform to the View protocol. Implement the required body computed property to provide the content for your custom view.

struct MyView: View {
    var body: some View {
        Text("Hello, World!")
    }
}

Assemble the view’s body by combining one or more of the primitive views provided by SwiftUI, like the Text instance in the example above, plus other custom views that you define, into a hierarchy of views.

The View protocol provides a large set of modifiers, defined as protocol methods with default implementations, that you use to position and configure views in the layout of your app. Modifiers typically work by wrapping the view instance on which you call them in another view with the specified characteristics. For example, adding the opacity(_:) modifier to a text view returns a new view with some amount of transparency:

Text("Hello, World!")
    .opacity(0.5) // Display partially transparent text.

The effects of a modifier typically propagate to any child views that don’t explicitly override the modifier. For example, a VStack instance on its own acts only to vertically stack other views, and has no text to display. Therefore, a font(_:) modifier that you apply to the stack has no effect on the stack itself. Yet the font modifier does apply to any of the stack’s child views, some of which might display text. On the other hand, you can locally override the stack’s modifier by adding another to a specific child view:

VStack {
    Text("Title")
        .font(.headline) // Override the font of this one view.
    Text("First body line.")
    Text("Second body line.")
}
.font(.body) // Set a default for text in the stack.

You commonly chain modifiers, each wrapping the result of the previous one. For example, you can wrap a text view in an invisible box with a given width using the frame(width:height:alignment:) modifier to influence its layout, and then use the border(_:width:) modifier to draw an outline around that:

Text("Title")
    .frame(width: 100)
    .border(Color.gray)

The order in which you apply modifiers matters. For example, the border that results from the above code outlines the full width of the frame.

A screenshot of a text view displaying the string "Title", outlined by a gray rectangle that’s wider than the string it encloses, leaving empty space inside the rectangle on either side of the string. A caption reads, "Apply the frame first."

If you instead apply the border first, it outlines the text view, which never takes more space than it needs to render its contents.

Text("Title")
    .border(Color.gray) // Apply the border first this time.
    .frame(width: 100)

Wrapping that view in another invisible one with a fixed 100 point width affects the layout of the composite view, but has no effect on the border.

A screenshot of a text view displaying the string "Title", outlined by a gray rectangle that hugs the text. A caption reads, "Apply the border first."

Topics

Implementing a Custom View

var body: Self.Body

The content and behavior of the view.

Required. Default implementations provided.

Configuring Views

Layout

Tell a view how to arrange itself within a view hierarchy by adjusting its size, position, alignment, padding, and so on.

Accessibility

Make your views accessible to a broad range of users, including people with disabilities.

Rendering

Affect the way the system draws a view, for example by scaling or masking a view, or by applying graphical effects.

Styling

Indicate how to style the text, controls, and other content contained in a view.

Providing Interactivity

Input and Events

Supply actions for a view to perform in response to user input and system events.

View Presentation

Define additional views for the view to present under specified conditions.

State

Access view preferences and provide child views with configuration data.

Configuring Previews in Xcode

func previewDevice(PreviewDevice?) -> View

Overrides the device for a preview.

func previewDisplayName(String?) -> View

Provides a user visible name shown in the editor.

func previewLayout(PreviewLayout) -> View

Overrides the size of the container for the preview.

Identifying Views

func id<ID>(ID) -> View

Generates a uniquely identified view that can be inserted or removed.

func equatable() -> EquatableView<Self>

Prevents the view from updating its child view when its new value is the same as its old value.

associatedtype Body

The type of view representing the body of the view.

Required.

Implementing View Modifiers

struct ModifiedContent

A value with a modifier applied to it.

struct EmptyModifier

The empty, or identity, modifier.

See Also

Essentials

Creating and Combining Views

This tutorial guides you through building Landmarks — an iOS app for discovering and sharing the places you love. You’ll start by building the view that shows a landmark’s details.

Working with UI Controls

In the Landmarks app, users can create a profile to express their personality. To give users the ability to change their profile, you’ll add an edit mode and design the preferences screen.