Fun Times Creating a Dashboard with SwiftUI
A(lways) B(e) C(hallenged)
“We don’t rise to the level of our expectations, we fall to the level of our training.” — Archilochus
Who doesn’t love a good challenge? Writing iOS apps everyday provides it’s own sets of interesting problems to solve. Some for me are easier to solve than others, but I’ve been doing it for awhile now so I feel comfortable with my experience and knowing the toolsets that are provided. With **SwiftUI**, as with any new technology, everything can seem daunting.
I decided to challenge myself by picking a few mockups that I really liked and implement them in SwiftUI. Last week I did basic iPhone mockup for a banking app and this week I decided to pick, not only a iPad design, but one that I knew would push me a bit further with components that a) are difficult to do in UIKit and b) are _really_ not that straightfoward in SwiftUI.
Challenging Components
Charting
Plotting points on a path isn’t that difficult with UIKit or SwiftUI, but creating the Bezier curves with the animation is another story.
Top Menu
Creating the top menu was by far the toughest for me. In UIKit this would have been a no brainer, but since SwiftUI is declarative and while you can set the position and size, I had to figure out how a child view would get a reference to the size and position of an ancestor. From other layout techniques I had used using GeometryReader / GeometryProxy I knew that was the place to start. What really shined a light on the solution was Inspecting the View Tree — Part 1: PreferenceKey from SwiftUI-lab.com.
Drag Support for the Detail Screen
Implementing gestures, even a DragGesture, is as easy as adding any other modifier to a view. However, the detail view has two other scrollviews and their drag gestures were disabled by the parent view’s DragGesture. I tried a few different approaches. With UIKit developers are able to handle these situations in a clear way. I tried including setting a flag that would disable the parent DragGesture when the view was “opened”. That approach didn’t work because it would disable the child gestures as well. I ended up setting an empty tapGesture before the DragGesture. That seemed to clear everything right. A second solution that I found, but haven’t tried is:
.gesture(DragGesture(minimumDistance: 30, coordinateSpace: .local)More to Do / More to Come
Creating the Banking and Dashboard projects has been an absolute blast. It has built up my confidence in what I can (and what can be done) with SwiftUI. I plan on creating one more mockup project before I start on my next personal project which will be built 100% in SwiftUI to be published in the store.
