Resume App with SwiftUI

Introduction:

If you’re looking for an introduction to SwiftUI, this serves as a good starting point.

This is about my experience learning/building the first SwiftUI app, that was built while learning
the SwiftUI’s layout system.

I tried to build out an iPad app(Since iPhone doesn’t fit well for this app) that’d display Resume
based upon the content provided to it in the intended format. 

Here’s the Github repo of the open-sourced iPad app for the complete details.

The entire app’s/resume’s template is based upon this resume template with just a few tweaks
added to it.

So, now we have the UI for the app ready that we intend to develop with SwiftUI.

On top of it, I planned to have a couple of additions with respect to the requirements of the app:

• Theming: The entire app should be easily ‘Themable’ aka easy to configure/apply themes
• Icons: The app shouldn’t use any of the images and should use only the fonts so that it easily adapts to our ‘Themable’ requirement. All the fonts used in the project are from here.
• Data: And of course, the data should be configurable and hence we fetch the resume data from a separate json file embedded inside the project.

My Learnings/Tryout Notes:

• SwiftUI components like View, Text, Image, etc are the basic building blocks and are supported by cross apple platforms. This cheat sheet(SwiftUI Vs UIKit) should get you started quickly
• SwitUI seems to have got heavily inspired by React’s component-based approach. It enables you to create reusable components that could be used across projects with ease.
• The majority of my time was spent on learning the layout system of the framework, so this is where the biggest learning curve lies.
• SwiftUI’s layout system starts from the bottom of the view hierarchy and asks each child view to position or adjust/resize itself based upon its parent’s bounds and then goes further up the stream and asks the parent or top views to position its children within its own bounds
• Views can be stacked vertically, horizontally, depth-ic-ally by using VStack, HStack & ZStack respectively.
• Modifiers like resizable, backgroundColor, etc can be used to modify the view’s properties and the best thing about them is that they all can be chained with the declarative nature of the APIs to have concise syntax to achieve complex UI with the minimal codebase.
• ‘Spacer’ is used to achieve the flexible layout aka when placed between 2 views, it occupies all the remaining space other than the space occupied by the 2 UI components in any stacks
• ‘frame’ & ‘padding’ modifiers allow us to define the view’s size and margins

Other Notes:

• SwiftUI’s @State, @Binding, and other property wrapper and the power of using it with Combine framework are what’s most exciting here.
• There are still some issues that I’m facing, any help to this newbie is appreciated ;)
• Now, this app is also easily portable to the Mac as well.

Conclusion:

I hope this iPad app helps someone to quickly grasp the basics of layout-ing UI components using the SwiftUI framework and also serves as a tool for new job seekers as well.