Switching to SwiftUI Caused me to do a Re-Design
When rewriting a view in SwiftUI I noticed how better laid out the elements started to look and made sweeping changes to other functionality.
I had been putting off adding a new feature to Decisive Wife which would let users see what they had eaten in the past. This would be especially useful to me as I am constantly looking at leftovers in the fridge and thinking how old they are (my wife is a pastry chef and won’t let me eat anything older than a week). I had originally started the work in UIKit back in the beginning of the year, but got side tracked with making a Today widget, and a couple other smaller updates. When I tried to merge the changes, I found out I’m not so great with Git. Suffice it to say, I’m abandoning that branch.
A little backstory before I move on. I had started working on Decisive Wife with an old 2010 17” Macbook Pro back in May of 2019. It was able to run XCode, slowly, and was able to build for iOS 12.1. Once WWDC2019 happened and SwiftUI was introduced, I did not believe my dated MBP would be able to handle it. I also decided to keep my build target set at 12.1 since I was hearing iOS 13 had many bugs and figured fewer people would be updating to it. After WWDC2020, it sounded like SwiftUI had become more mature so I decided to rewrite my most complicated page in it, the Meal Plan view.
The Meal Plan View Redesign
For the Meal Plan view I wanted the user to be able to see all 7 days of a week without having to scroll. This would limit the vertical space available to me, especially on the smaller phones like the iPhone SE. Creating the constraint of only having two lines of information per meal plan. I of course had to have one of those lines be the name of the chosen meal. The next line I wanted to show the labels assigned to the meal as a quick and colorful way of identifying the types of meals throughout the week. This also added a horizontal constraint to the amount of labels I could include in the row. This especially became smaller when the image and prep/cook times were present. I also wasn’t very creative when it came to displaying the cook and preparation times with only using ‘p’ and ‘c’ to label them.
I really like how SwiftUI laid everything out for me without having to code in as many constraints as I had previously. I thought having the meal name in the center of the row was the right choice, but now that I see it being aligned to the top I know I was wrong.
What I was really like are the areas for the labels look better with more horizontal space. The font size didn’t change at all and I can fit less in the row, but I am perfectly happy with the result.
Another nice new feature I got by supporting a newer operating system, are the Color Sets I can define. Before I had used the stock colors provided by the operating system. Well this time I was able to define my own muted colors, as can be seen above, so they are not as bright in contrast to the rest of the design. The sliders are also very helpful in seeing how moving them will effect the color overall. Which given my lack of color knowledge is a huge plus in my book.
Ask Sheri Redesign
The Ask Sheri feature was what really got a complete overhaul. This feature is intended to allow users to quickly get a randomized meal decision from all their dinner ideas or from the selected labels. Originally the decision would be presented to the user as a notification with three options of “OK!”, “Details”, or “Ask Again ” to choose from. If the user had no Labels the notification would present itself right away. If the user has Labels, a half screen would appear allowing them to select if the choose should be made from the subset of dinner ideas. This would again present the notification. There are many reasons why using a notification was the wrong thing to do especially when asking again would dismiss the notification and cause it to reappear making the screen flash.
Moving to SwiftUI I had to give up on using the notification since it no longer allows for more than two buttons natively. What I came up with I am much more proud of.
The entire feature was moved to its own sheet where a selection is immediately given, even if the user has added labels. Touching the “Ask Again” button no longer flashes the screen to bring up a new notification and instead just updates the text.
Adding the Past Meals Feature
The new feature I mentioned at the beginning has also underwent a change since its inception. When I first thought up of how I wanted users to switch to the past weeks I figured I would just replace the buttons in the action bar with the weeks a user could load. With SwiftUI this could easily be done by replacing the array the list pulls from with that of a past week. Hence why I wanted to switch to SwiftUI. I got this working quickly after I finished rebuilding the view in SwiftUI.
Then I started having ideas of how I could further the user experience by using a snap carousel to display the past weeks and have the user swipe between them. I’ve always liked the way a card style UI looks and have been wanting to implement one for Decisive Wife. This seemed like the perfect opportunity to do so. I was able to follow this tutorial to get it working like a charm. This also allows me to avoid having to deal with the logic surrounding determining if the view is in edit mode vs past meals mode for the rows. I’m happy with the result and can’t wait to release it once iOS is available.
Afterthoughts
I know I’m not the greatest at designing good looking user interfaces, but SwiftUI has helped me at least enhance the look of what I do design. The grocery list is the next view I want to tackle with a rewrite in SwiftUI with a redesign and I plan on doing more. Being able to quickly make the rows for lists will also be helpful in displaying more information in the dinner ideas tab. For now I’ll have to take it one view at a time.
Icons were taken from Icons8.
