Recreating Maps UI from iOS 14 in SwiftUI
The Maps app from iOS 14 uses a common iOS design pattern: the bottom drawer. Let’s take a look at an attempt to recreate this UI with SwiftUI.
To begin, we have a map view that spans the entire screen, ignoring the device’s safe area. Our menu is positioned over the map view, and the menu’s height can change but is always less than or equal to the height of the map view. The map’s color features should show through empty space on the menu, giving the UI a sense of depth.
In SwiftUI, we can layer views with a ZStack. SwiftUI takes care of the arrangement of our menu via the alignment parameter.
To determine the height of the menu, we will use a GeometryReader. GeometryReader invisibly fills the view that contains it, giving the proxy object the size of its container. Content of the GeometryReader can use that to layout proportionally to that size. For our layout, we will use the height of the GeometryReader to scale the menu, depending on expanded state.
The power of SwiftUI really shines when adding the user interaction. We will model the menu state with a @State Bool, indicating if the menu should be expanded. With a simple animation block and a toggle of our expanded state, we get a smooth animation that is interruptible and reversible.
Sometimes you must delegate tasks to UIKit. We will use an UIVisualEffectView as a background to the menu, giving the menu a familiar look as color features of the map bleed through. Currently this kind of view is not provided by SwiftUI. However, the tight integration between the frameworks gives us the flexibility we need. The sizing of the Blur is handled automatically by SwiftUI as part of the .background modifier.
SwiftUI has been a powerful tool for me recently. The flow from idea to working code in SwiftUI is much nicer than UIKit. Similar implementations of this layout in UIKit would involve much more code, more concepts, and more work. SwiftUI gave me the freedom to simply express my idea and get it working quickly.
Thanks for reading!
Full source code: https://github.com/patmalt/BottomDrawer