iOS Development – Week 5

A very enjoyable week this was! We have been covering enough material to get the app to start looking more like a functional app and not just individual screens. The focus of this week was layout and navigation:

• SwiftUI layout and interfaces
• How to pass data between different views
• Some useful tips and tricks when using Xcode

The material provided us with the fundamentals of the overall navigation of a app and different layouts for each view. We started getting familiar with the different concepts for overall navigation of the app like a NavigationView or TabView. This enables us to start answering questions such as:

• How many screens will my app have?
• What is the overall layout of the app?
• What will each screen look like?

In general, these are questions that – in my experience – are also answered with the help of a product person and a designer, but knowing what is the art of the possible makes the iOS engineer a powerful contributor to the discussion.

Some aspects that caught my attention were the different ways in which Swift enables us to use, display and pass data:

Looking at the differences between things such as @Binding, @State, @ObservedObject, @StateObject and @EnvironmentObject. I used environment objects in my assignment to be able to pass information form a restaurant menu view to a screen where an order for the user is presented. Let us take a look at how Jelly Belly is looking now.

Jelly Belly – Update

Since there is a lot of overlap with UX/UI design, I went back to my design prototype to look at what I wanted my app to start looking like. The result is as follows:

For simplicity I am not showing the connections between the screens above, but you can go to the link above and take a look.

Tab View and Main Screen

The app is organised with a tab view with four entries:

• Welcome
• Menu – Implemented using SwiftUI 
• Discounts Tab – Implementing a LazyVStack
• Order – A summary of the dishes selected by the user

On opening the app, the Menu tab is opened. The user can select an item from the menu and view more info. I have reused the implementation from my previous weeks. 

I redesigned some of my data model so that I could use the meal category as Sections in my list. This included adding a couple of methods to be able to filter the data programmatically rather than writing repeated code. See the first two screens below:

Detail Screen and Order View

When a user taps on an item in the Menu (Main screen), they are presented with a page that details information on the selected dish. See the third screen in the image above.

I decided to reuse the detail view that I had from the previous weeks. I have added a button to add the dish to the order – to be shown in the Order view (see below)

Using Environment, Published and environmentObject – the dishes added by the user to the order are captured and presented in the Order view. When the order is empty a message encouraging the user to place an order is presented

Currently, if the user wants to add two of the same dish, they need to tap the button twice. Also, there is no way to clear dishes from the order. This functionality can be added later

Discounts Tab

The discounts tab (see image above) presents a summary of the dishes that are marked as discountable. The view is build with a LazyVGrid showing the images of the discounted dishes.

I have used Overlay to present a circle in the colour branding for the app around each of the dish images. Furthermore, with the aid of a ZStack and GeometryReader I have presented an SF Symbol on top of the images for discounted dishes. 

Note that tapping on the images also presents the detail view for the dish and the user can also add the dish to the order from there.

I hope you agree with me that the app is not more functional. Cheers!

Related Posts