Implementing Dynamic Size Class Changes in SwiftUI: A Guide to Custom Modifiers for iPhone and iPad Devices

In SwiftUI, the environment provides us with size classes that we can use to adapt our user interface to different screen sizes. However, observing changes to these size classes can be a bit challenging. In this article, we’ll create a ViewModifier that observes changes to the size classes and performs an action in response.

Before we move forward, let’s discuss the benefits of supporting size classes:

1. Adaptive Design: Size classes enable your app to adapt to various device sizes and orientations. This ensures your app maintains a consistent appearance, whether it’s being used on a small iPhone or a large iPad.
2. Dynamic and Responsive Layout: By observing size classes, your app can dynamically adjust its layout based on the current environment, making your app more flexible and user-friendly.
3. Improved User Experience: Adjusting the layout and elements of your app based on the device and orientation can enhance the user experience. For instance, you might display more information on a larger screen or adjust the size of buttons for easier interaction on a smaller screen.
4. Efficient Use of Screen Real Estate: Size classes help you optimize the available screen space. You can prioritize the most crucial information or controls based on the current size class.
5. Ease of Maintenance: Size classes allow you to manage different layouts for various devices and orientations in a centralized manner. This approach simplifies your code maintenance and update process.
6. Future-Proofing: As new devices are introduced, your app will be able to adapt to their screen sizes and orientations without requiring significant changes to your code.

Let’s get started:

Creating the SizeClass Struct

First, we need a way to represent the size classes. We’ll create a SizeClass struct that holds the horizontal and vertical size classes:

SizeClass.swift

This struct also conforms to Equatable, which allows us to observe changes to it using the onChange modifier.

Creating the SizeClassAwareModifier

Next, we’ll create a SizeClassAwareModifier that observes changes to the size classes:

SizeClassAwareModifer.swift

In this ViewModifier, we use the @Environment property wrapper to get the current size classes, and the @Binding property wrapper to update a SizeClass property whenever the size classes change.

Using the SizeClassAwareModifier

To use the SizeClassAwareModifier, we'll create an extension on View that applies the modifier:

View+Extensions.swift

Now we can use the observeSizeClasses(sizeClass:) method in our views to observe changes to the size classes:

Using sizeclasses change

In this example, the ContentView has a @State property that holds the current size classes. It passes this property to the observeSizeClasses(sizeClass:) method, allowing the SizeClassAwareModifier to update it whenever the size classes change.

Conclusion

In this article, we’ve seen how to create a ViewModifier that observes changes to the size classes in SwiftUI. This can be a powerful tool for adapting your user interface to different screen sizes. However, remember that SwiftUI provides other tools for adaptive design as well, such as the @Environment(\.horizontalSizeClass) and @Environment(\.verticalSizeClass) property wrappers, and the ViewThatFits coupled with stacks.

Share this blog to spread the knowledge | Do Follow, and CLAP if you Liked it! Happy Coding :)

Loblaw Digital on Linkedin | Nilaakash on Linkedin.