3

I want to create different layouts using size classes and I followed this example: https://www.hackingwithswift.com/quick-start/swiftui/how-to-create-different-layouts-using-size-classes

I extended the Xcode Master/Detail template and changed the ContentView as follows, with the two size classes and then using the horizontal size class to set a size class dependent navigation title. The problem is the navigation title would always read as "Compact". What am I missing here?

struct ContentView: View {
    @Environment(\.managedObjectContext)
    var viewContext   

    @Environment(\.verticalSizeClass) var vSizeClass
    @Environment(\.horizontalSizeClass) var hSizeClass

    var body: some View {
        NavigationView {
            MasterView()
                .navigationBarTitle(Text(hSizeClass == .compact ? "Compact" : "Regular"))
                .navigationBarItems(
                    leading: EditButton(),
                    trailing: Button(
                        action: {
                            withAnimation { Event.create(in: self.viewContext) }
                        }
                    ) { 
                        Image(systemName: "plus")
                    }
                )
            Text("Detail view content goes here")
                .navigationBarTitle(Text("Detail"))
        }.navigationViewStyle(DoubleColumnNavigationViewStyle())
    }
}
burki
  • 2,946
  • 6
  • 37
  • 51

1 Answers1

5

I made my own test using this code, simplified, and slightly modified from yours:

struct ContentView: View {
    @Environment(\.managedObjectContext)
    var viewContext

    @Environment(\.verticalSizeClass) var vSizeClass
    @Environment(\.horizontalSizeClass) var hSizeClass

    var body: some View {
        NavigationView {
            Form {
                Section {
                    Text("My Content")
                }
            }
            .navigationBarTitle(Text(hSizeClass == .compact ? "Compact" : "Regular"))
        }
    }
}

Testing it produces the desired results in the Simulator:

iPhone 8 Plus: Compact Width in Portrait Mode, Regular Width in Landscape Mode

Initially the Navigation Title shows "Compact", but when the phone is rotated to landscape orientation, the title updates, showing "Regular".

Just make sure you are testing using devices or simulators whose horizontal size class IS regular in some orientation.

Here is the official documentation on this topic, as mentioned in OP's comment. It has a handy table listing device size classes based on their model and physical orientation:

Apple Developer - Human Interface Guidelines: Adaptivity and Layout

Good luck!

Wattholm
  • 849
  • 1
  • 4
  • 8
  • 1
    Thanks much. I tested with an iPhone XS and somehow I was so convinced that Landscape orientation has Regular Width... but it's still Compact Width. Apple shows a detailed table of how these size classes work for different devices and orientations: https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/adaptivity-and-layout/ – burki Mar 11 '20 at 06:15
  • Great to hear! I should have linked to that table myself. I'll update the answer so it's more visible as a reference. – Wattholm Mar 11 '20 at 06:19
  • 1
    So according to https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/adaptivity-and-layout/, iPhone 12 in **landscape** has _Compact width, compact height_. iPhone 12 has **compact width** in **landscape**?? Am I missing something? – bauerMusic Sep 28 '21 at 09:57
  • There's an answer to my previous comment here: https://stackoverflow.com/questions/34986078/why-compact-width-and-compact-height-in-iphone-4-5-6-in-landscape-orientation – bauerMusic Sep 28 '21 at 09:59