# Display Modes

## Overview

## Subjects

### Disabling an Orientation Mode

{% embed url="<https://youtu.be/lkmS0STi9Y8>" %}
[Hacking with Swift / 100 Days / Day-88 - Designing a single card view](https://www.hackingwithswift.com/books/ios-swiftui/designing-a-single-card-view)
{% endembed %}

**Tags**: #RoundedRectangle #CornerRadius #Toggle #OnTapGesture

### Layout Toggle

```swift
struct UserView: View {
    var body: some View {
        Group {
            Text("Name: Paul")
            Text("Country: England")
            Text("Pets: Luna and Arya")
        }
        .font(.title)
    }
}

struct ContentView: View {
    @State private var layoutVertically = false

    var body: some View {
        Group {
            if layoutVertically {
                VStack {
                    UserView()
                }
            } else {
                HStack {
                    UserView()
                }
            }
        }
        .onTapGesture {
            layoutVertically.toggle()
        }
    }
}
```

### Transition between Layout Modes Automatically (VStack / HStack)

**Tags**: #SizeClass #Layout #DisplayMode

This code looks at the space needed and then changes the layout. It also depends on the screen size you use.

<pre class="language-swift"><code class="lang-swift"><strong>struct UserView: View {
</strong>    var body: some View {
        Group {
            Text("Name: Paul")
            Text("Country: England")
            Text("Pets: Luna and Arya")
        }
        .font(.title)
    }
}

struct ContentView: View {
    @Environment(\.horizontalSizeClass) var sizeClass

    var body: some View {
        if sizeClass == .compact {
            VStack {
                UserView()
            }
        } else {
            HStack {
                UserView()
            }
        }
    }
}
</code></pre>

or

```swift
struct UserView: View {
    var body: some View {
        Group {
            Text("Name: Paul")
            Text("Country: England")
            Text("Pets: Luna and Arya")
        }
        .font(.title)
    }
}

struct ContentView: View {
    @Environment(\.horizontalSizeClass) var sizeClass
    var body: some View {
        if sizeClass == .compact {
            VStack(content: UserView.init)
        } else {
            HStack(content: UserView.init)
        }
}
```

{% embed url="<https://youtu.be/IxjnKNpBl4s>" %}
[Hacking with Swift / 100 Days / Day-96 - Using groups as transparent layout containers](https://www.hackingwithswift.com/books/ios-swiftui/using-groups-as-transparent-layout-containers)
{% endembed %}

### Making NavigationView work in Landscape (on iPhone)

{% embed url="<https://youtu.be/KWAv1IHZRuo>" %}
[Hacking with Swift / 100 Days / Day-97 - Making NavigationView work in landscape](https://www.hackingwithswift.com/books/ios-swiftui/making-navigationview-work-in-landscape)
{% endembed %}

**Tags**: [viewbuilder](https://swift.sedatonat.dev/view/page-elements/viewbuilder "mention") [navigationview](https://swift.sedatonat.dev/view/page-elements/navigationview "mention") #phoneOnlyNavigationView# #phoneOnlyStackNavigationView #navigationViewStyle #userInterfaceIdiom #devicetype

## Size Classes

**Tags**: #sizeClass

Ne kadar yerinin olduğuna bakıyor. Yeteri kadar yerin var mı? Yoksa yok mu? Buna göre harekete geçebiliyorsun. Örneğin ekrandaki imgelerin ebatlarını değiştirebiliyorsun.

@Environment (.verticalsizeClass) var verticalsizeClass @Environment (.horizontalSizeClass) var horizontalSizeClass

### Changing a view’s layout in response to size classes

{% embed url="<https://youtu.be/kBGtBaNxzIM>" %}
[Hacking with Swift / 100 Days / Day-98 - Changing a view’s layout in response to size classes](https://www.hackingwithswift.com/books/ios-swiftui/changing-a-views-layout-in-response-to-size-classes)
{% endembed %}

**Tags:** #DynamicTypeSize

## Sources

### Videos

### Articles / Documents

* <https://useyourloaf.com/blog/size-classes>

## See also

*