I like following Sean Allen approach of building the UI, it’s called “Skeletal Storyboards”. If you don’t know what I’m talking about check out his video here. Therefore let’s jump in the RecorderViewController.

In the RecorderViewController we will be doing almost everything. But first, if you took a look at what we are trying to build and analyze it, you will find the following.

So, let’s start with the handle view. In RecordViewController.swift add a new property (call it handleView) and a private method (call it setupHandleView). Also, setup the layout constrains and don’t forget to call setupHandleView() in viewDidLoad().

You will get an error saying “Argument labels ‘(r:, g:, b:)’ do not match any available overloads”. That’s because I’ve made an extension file for the UIColor. So, create a new Swift file, call it Extensions and add the following code in it. Some of the code below we will be using it in the future. Everything should work fine now.

2. The Record Button.

I wanted to create a recording button just like the app and I did a search and found out a great article here. In this article Mark Alldritt go through how he created the button animation. I really recommended you to read it. Anyways, just copy the RecordButton.swift and the RecordButtonKit.swift files alongside with copying the StartRecording and the StopRecording sound files.

To make it work you will have to install the PRTween pod. So, create a pod file in your project directory and install it. The pod is in Objective-C. Therefore, we will have to create an Objective-C Bridge file.

To create the Objective-C Bridge file: from File -> New -> File, choose Header File, it’s really important what you will name your header file so pay attention here “nameOfYourProject-Bridging-Header.h”. I will name mine “VoiceMemosClone-Bridging-Header.h”, add it to your project folder. Finally, choose your app target and go to Build Settings, make sure All is selected on top, find Objective-C Bridging Header and give it the path of your header file.

Open the header file that you just created, delete everything from it, and just type this following line of code.

#import <PRTween/PRTween-umbrella.h>

Now, in your RecorderViewController.swift file add the button, its constraints, and add your handleRecording function. As always don’t forget to call it in your viewDidLoad method.

Now we need to show a couple of things when you click on the recordButton; the audioView and the timeLabel. So, add a label and a uiview(for now) to the recorderViewController. When we tap on the button we need some animation on the card view, here is what I did.

3. AudioVisualizerView

Create a UIView class and the following to it, to create the audio visualizer.

Now, in RecorderViewController.swift change the audioView to:

var audioView = AudioVisualizerView()

Now you just need to set up the recorder and actually record!

The final result.

I’m really happy with the final result… however, there are a few enhancements that maybe you could make it to this project, like:

1. Adding a deleting functionality.

2. Add auto layout, because it’s now only working on iPhone X or XS.

3. Make the cardView (Recorder) draggable.

Conclusion.

Ultimately I’m really happy with what I was able to achieve. Not only is it functional, but I had a lot of fun doing it!

I’d love to hear about any experiences you may have about a similar project. I’d also like to see what you may do differently to achieve a better result.

I’m now looking forward to the next blog, what should I try to build next?

If you aren’t a designer you can also buy some great iOS App Templates and if you are more interested in React Native App Templates you can buy them from here they have a really great collection.

The full project is on GitHub.

Feel free to use it!

Resources.

I couldn't have ever gotten to this results without these guys great work. So, please check them out.

1. The record button by Mark Alldritt, GitHub repo here.

2. Simple Recorder by Sergey Yuryev, GitHub repo here.

3. How to record audio by Paul Hudson, tutorial link here.

Shoutout to:

Mohammed Elnaggar who helped me in making this project.

Mohammed Ennabah who helped me in making this article.

Lisa Dziuba who helped me in making and styling the article.