[iOS]Expense Tracker. Part 1. UI design

Wow. It has been a while since the last time I posted an article here. This time I made an expense tracker app with google Firebase. I got a lot of ground to cover, so I’ll break it down into 4 different articles.

Part 1. UI design (expandable menu bar, popup view, container view)
Part 2. Firebase project (incorporate google firebase)
Part 3. Calendar (cocoapods: FSCalendar)
Part 4. Charts (cocoapods: Charts)

One of the main reasons why this project took so much of my time is the designing process (layout, color, design, etc). Now, I know that my UI is not exceptional, and is certainly not something that I should be boastful about, but I did learn a lot of tricks here and there to improve my design, so yeah, let’s dive in.

Menu Tab Bar (expanding menu bar)

As you can see from the .gif, I have a menu bar that can be shown once you tap the menu button on the top left hand corner. What makes it so special is its animation. Notice how it expand like a small bubble burst into the screen. I learned to do this when I stumbled upon a youtube tutorial video, and I’ll share the link down below.

I won’t go into details about this animation because I would rather you go check this video out. But I’ll briefly explain how this mechanism works.
Basically, when we tap the button, a rectangle image with one side slightly curved outward will come in to fill the invisible tab bar. And we can make this happen by using CGAffineTransform, which can help you scale, rotate, or move your graphic objects.

//move your object
object.transform = CGAffineTransform(translationX: , y: )
//rotate your object(notice the input angle should be in radian)
object.transform = CGAffineTransform(rotationAngle: )
//scale
object.transform = CGAffineTransform(scaleX: , y: )

To make the animation works, we have to wrap this in an animate closure where you can alter the delay and other customizable options. (Delay plays an important part in this animation, )

UIView.animate(withDuration: <#T##TimeInterval#>, delay: <#T##TimeInterval#>, options: <#T##UIView.AnimationOptions#>, animations: <#T##() -> Void#>, completion: <#T##((Bool) -> Void)?##((Bool) -> Void)?##(Bool) -> Void#>)

And for the rest of the design of the expandable menu tab bar, I’ll leave you to the video. Have fun!

Container View

I didn’t want to remake the expandable menu over and over again in different view controllers; instead, I used collection views so that certain elements can stay put and be shown in every circumstances.

When you drag this to your storyboard, it will automatically generate a view controller scene for you. If you want to have multiple container views, just do a simple copy and paste. This time, however, you will have to create a new view controller scene yourself and embed it to the container view.

After you create and link multiple container views to your project, you have to set up which one to show up when you are running the simulator. And you can do this by clicking the option in attributes inspector, or alternatively, you can set it up in your view controller file programmatically. You can do something like this:

func showContainerView1 {
     for view in containers {
     //link all your container View to a IBOutlet Collection
         view.isHidden = true
     }
     containers[0].isHidden = false
}

Popup View

It’s actually pretty easy to make a popup view. Just a simple click and drag will do the work (drag another view to main.storyboard, right below the First Responder and the Exit). However, I found it really troublesome to adjust the size of it. Here’s how I control the size of my popup view.

view.center = backgroundView.center
view.bounds = CGRect(x:0, y:0, width: self.view.bounds.width*0.9, height: self.view.bounds.height*0.8)

To make the background of the popup view blurry, we can use Visual Effect View with blur as the background. To make them pop up, just use addSubView to make it appear.

func popupIn(View: UIView) {
let backgroundView = self.view!
backgroundView.addSubview(View)
View.center = backgroundView.center
View.isHidden = false
View.transform = CGAffineTransform(scaleX: 1.1, y: 1.1)
UIView.animate(withDuration: 0.2) {
View.transform = CGAffineTransform(scaleX: 1.0, y: 1.0)
View.alpha = 1
}
}

Honorable Mention

When I was first trying to design my storyboard, I found a lot of interesting cocoa pods to utilize into your project. Though they didn’t make it to my final version, it’s still pretty cool to see so many options in designing your UI. One of the coolest pods I found is called “circle bar” which helps to make your bottom tab bar animated, and it’s also really easy to implement.

GitHub - softhausHQ/CircleBar: A fun, easy-to-use tab bar navigation controller for iOS.

Resources

Here are some websites that I found extremely helpful when you are designing your apps.

Color choice:

Trending color palettes - Coolors

If you run out of idea on designing your UI:

Mobbin - The world's largest mobile app design reference library

Actions Design Patterns

This part relatively is easy because it doesn’t require much coding, but for some people, including me, designing is no easy task, so I hope this article can be somewhat helpful for you. And that’s a wrap for part 1. I’ll publish part 2 ~ 4 later, so stay tuned. :)

[iOS] Project: Expense Tracker. Part 2. Google Firebase