View Layout and Presentation

Combine views in stacks, generate groups and lists of views dynamically, and define view presentations and hierarchy.

Overview

Use stacks and lists to lay out the views of your user interface. You can combine static views with views that are dynamically generated from collections of data. All container views update and adjust the positions of their children in response to changes in content or interface dimensions.

Topics

Essentials

Building Lists and Navigation

With the basic landmark detail view set up, you need to provide a way for users to see the full list of landmarks, and to view the details about each location.

Composing Complex Interfaces

The home screen for Landmarks shows a scrolling list of categories, with horizontally scrolling landmarks within each category. As you build this primary navigation, you’ll explore how composed views can adapt to different device sizes and orientations.

Stacks

struct HStack

A view that arranges its children in a horizontal line.

struct VStack

A view that arranges its children in a vertical line.

struct ZStack

A view that overlays its children, aligning them in both axes.

Lists and Scroll Views

struct List

A container that presents rows of data arranged in a single column.

protocol DynamicViewContent

A type of view that generates views from an underlying collection of data.

protocol Identifiable

A class of types whose instances hold the value of an entity with stable identity.

struct ForEach

A structure that computes views on demand from an underlying collection of of identified data.

struct ScrollView

A scroll view.

Container Views

struct Form

A container for grouping controls used for data entry, such as in settings or inspectors.

struct Group

An affordance for grouping view content.

struct GroupBox

A stylized view with an optional label that is associated with a logical grouping of content.

struct Section

An affordance for creating hierarchical view content.

Spacers and Dividers

struct Spacer

A flexible space that expands along the major axis of its containing stack layout, or on both axes if not contained in a stack.

struct Divider

A visual element that can be used to separate other content.

Architectural Views

struct NavigationView

A view for presenting a stack of views representing a visible path in a navigation hierarchy.

struct TabView

A view that switches between multiple child views using interactive user interface elements.

struct HSplitView

A layout container that arranges its children in a horizontal line and allows the user to resize them using dividers placed between them.

struct VSplitView

A layout container that arranges its children in a vertical line and allows the user to resize them using dividers placed between them.

Presentations

struct Alert

A container for an alert presentation.

struct ActionSheet

A storage type for an action sheet presentation.

Conditionally Visible Items

struct EquatableView

A view type that compares itself against its previous value and prevents its child updating if its new value is the same as its old value.

Infrequently Used Views

struct AnyView

A type-erased View.

struct TupleView

A View created from a swift tuple of View values.

See Also

User Interface

Views and Controls

Present your content onscreen and handle user interactions.

Drawing and Animation

Enhance your views with colors, shapes, and shadows, and customize animated transitions between view states.

Framework Integration

Integrate SwiftUI views into existing apps, and embed AppKit, UIKit, and WatchKit views and controllers into SwiftUI view hierarchies.