<!--
{
  "availability" : [
    "iOS: 27.1.0 -",
    "iPadOS: 27.1.0 -"
  ],
  "documentType" : "symbol",
  "framework" : "SwiftUI",
  "identifier" : "/documentation/SwiftUI/ArrangementView",
  "metadataVersion" : "0.1.0",
  "role" : "Structure",
  "symbol" : {
    "kind" : "Structure",
    "modules" : [
      "SwiftUI"
    ],
    "preciseIdentifier" : "s:7SwiftUI15ArrangementViewV"
  },
  "title" : "ArrangementView"
}
-->

# ArrangementView

A view that arranges primary and secondary content using an adaptive layout that responds to the environment.

```
nonisolated struct ArrangementView<Primary, Secondary> where Primary : View, Secondary : View
```

## Overview

You create an arrangement view with a primary and secondary view. The arrangement view computes a layout for its content based on the context it is presented in, including the available size, size class, and hardware features.

Use the [`arrangementViewStyle(_:)`](/documentation/SwiftUI/View/arrangementViewStyle(_:)) modifier to choose how the arrangement view lays out its content. The default style is [`AutomaticArrangementViewStyle`](/documentation/SwiftUI/AutomaticArrangementViewStyle), which resolves to a split arrangement. The other built-in styles are [`OverlayArrangementViewStyle`](/documentation/SwiftUI/OverlayArrangementViewStyle) and [`SplitArrangementViewStyle`](/documentation/SwiftUI/SplitArrangementViewStyle).

### Overlay arrangements

An overlay arrangement layers the primary view on top of the secondary view in z-order. This layout is well-suited for full screen experiences like media players, where playback controls overlay a video surface:

```swift
ArrangementView {
    PlayerControls()
} secondary: {
    VideoPlayer()
}
.arrangementViewStyle(.overlay)
```

When the environment changes, such as when a foldable device is folded, the overlay arrangement can transition its views from a layered layout into a side-by-side layout. Use
[`axes(_:)`](/documentation/SwiftUI/OverlayArrangementViewStyle/axes(_:)) to control which axes are supported.

### Split arrangements

A split arrangement places the primary and secondary views side by side along one or more axes. Use this layout for experiences that display two distinct pieces of content simultaneously, such as a music player alongside its lyrics:

```swift
ArrangementView {
    NowPlayingView()
} secondary: {
    LyricsView()
}
.arrangementViewStyle(.split)
```

The split arrangement adapts its axis based on the available size and size class. You can constrain which axes the split supports using [`axes(_:)`](/documentation/SwiftUI/SplitArrangementViewStyle/axes(_:)).

## Topics

### Creating an arrangement view

[`init(primary: () -> Primary, secondary: () -> Secondary)`](/documentation/SwiftUI/ArrangementView/init(primary:secondary:))

Creates an arrangement view with a primary and secondary view.

[`init(ArrangementViewStyleConfiguration)`](/documentation/SwiftUI/ArrangementView/init(_:))

Creates an arrangement view from a style configuration.

[`struct ArrangementViewStyleConfiguration`](/documentation/SwiftUI/ArrangementViewStyleConfiguration)

The properties of an arrangement view used to create its custom style.

### Configuring an arrangement view

[`func arrangementViewStyle(some ArrangementViewStyle) -> some View`](/documentation/SwiftUI/View/arrangementViewStyle(_:))

Sets the style for arrangement views within this view.

## Relationships

### Conforms To

[`View`](/documentation/SwiftUI/View)

---

Copyright &copy; 2026 Apple Inc. All rights reserved. | [Terms of Use](https://www.apple.com/legal/internet-services/terms/site.html) | [Privacy Policy](https://www.apple.com/privacy/privacy-policy)