Update UI when orientation is changing in SwiftUI

Question

I've started to learn SwiftUI. I try to update UI when orientation is changing. I added @Environment(\.horizontalSizeClass) var sizeClass in my view, and then iphone simulator updates the UI automatically when rotated. But iPad simulator does not update the UI when rotated. Could you tell me how to update UI for iPad?

Not sure if that is possible, see also [here](https://stackoverflow.com/questions/56625931/how-can-i-preview-a-device-in-landscape-mode-in-swiftui) — koen, Jan 05 '21 at 21:07
Does this answer your question? [SwiftUI - Determining Current Device and Orientation](https://stackoverflow.com/q/65573508/8697793) — pawello2222, Jan 05 '21 at 21:39

score 0 · Accepted Answer · answered Jan 05 '21 at 21:27

0

If you take a look at the Device Size Classes in the Human Interface Guidelines, you'll notice that the iPads have 'Regular' width and height in both landscape and portrait mode.

So when you use .horizontalSizeClass, it is working on both iPhone and iPad, it's just that the iPad does not change sizeClass when rotated.

https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/adaptivity-and-layout/

If you set frame sizes with a GeometryReader, they will be automatically updated when the device is rotated.
It's also pretty useful to just set the .frame(maxWidth:) on views, so that if the iPad is landscape, the view's content will be limited. Somewhere around 715 works well.

answered Jan 05 '21 at 21:27

nicksarno

3,850
1
13
33

Using size classes will not help here. It's better to use `UIDevice.orientationDidChangeNotification` like in https://stackoverflow.com/a/65586833/8697793 – pawello2222 Jan 05 '21 at 22:35
it's true that the iPad will use `regular` for both portrait and landscape when it's running full screen, but when you use `SplitView` and `SlideOver` modes, then it becomes `compact` for all sizes except for when the app is using 70% width in Landscape. In SplitView, when in Portrait it can either occupy 40% of 60% of the screen as compared to the other app being used in SplitView, and in Landscape it can occupy 30%, 50%, and 70% of the screen. Super confusing and I will prob forget this in a week, but wanted to pass it along while I know it. – James Toomey Apr 05 '23 at 23:52

score 0 · Answer 2 · answered Apr 06 '23 at 17:41

If you put the iPad in SplitView or Slideover mode, then it becomes .compact for all sizes except for when the app is using 70% width in Landscape. In SplitView, when in Portrait it can either occupy 40% of 60% of the screen as compared to the other app being used in SplitView, and in Landscape it can occupy 30%, 50%, and 70% of the screen.

If you add the @Environment var horizontalSizeClass at the top as noted in the question, you can now query in the SwiftUI and use different UI as needed:

if sizeClass == .compact {
   // UI for compact mode here
} else if sizeClass == .regular {
   // UI for regular mode here
}

Admittedly it's a niche use case, since @nicksarno is correct that iPads are always regular mode when running full screen regardless of Portrait or Landscape. In those cases, your only recourse is to check for orientationDidChangeNotification as noted by @pawello2222.

Update UI when orientation is changing in SwiftUI

2 Answers2