We start by creating a single view application using Apple's Swift programming language. Next we resize the Main.storyboard to resemble the appearance of an iPhone.
Once the appropriate size has been completed we then add our images to the images.xcassets file in the Navigator area of Xcode.
This creates an image set that allows you to add images that will be used in the app. 1x, 2x, and 3x allow for optimum pixel size depending on the device the app will be running on.
Now that we have the image that we are going to use we can layout the app images and constraints. Constraints are important because they anchor the image in place so that no matter what size device the app is running on the images will stay in place relative to each other and the margins of the display.
The images are laid out on the Main.storyboard file that can be selected in the Navigator area. You find the button object in the Utility area of Xcode in the object library. Once you find the object in the library by typing "button" in the search bar, you can drag and drop the button into the storyboard.
*Don't forget to delete the default "button" word in the button image in the utility area in the attributes inspector before you select the image you want for that space.
Repeat the same process for the "Stop" button.
We then added a label and typed "recording" in the label field, which is good for static text, to indicate to the user that the recording function of the app is active.
Again, the label is found in the Utility area of Xcode on the bottom right hand side in the object library. You can access the library by selecting the object library icon that is a circle encompassing a square highlighted in blue below.
The search field is at the bottom of this box and you can see that I typed in label next to the blue circle encompassing a solid half circle.
Now we set the constraints for the images by holding down the control key and clicking and dragging to the boarder or an object to set the relative distance we want our image to be from that location.
It is time to write some code once these steps are complete. In order to write code we need to connect the objects in our story board with the viewcontroller.swift file. We can facilitate this by opening up the assistant editor in the top right hand corner of Xcode. The assistant editor icon looks like two circles overlapping. You can see this in blue in the picture below.
Once important to concept is the MVC design pattern. This design pattern is the recommended pattern by Apple for creating apps. The "M" stands for model, the "V" stands for view, and the "C" stands for controller. The storyboard that has the images of the microphone, stop button, and recording label is our view. The view controller where we write our code is the controller is controls the objects in the view. The model is the data that we will be using like the mp3 file for the audio that we will import.
You can connect the two buttons and the recording label in the storyboard by holding down the control key on the keyboard and clicking and dragging from the image of to the view controller file.
We start by adding the variables to the view controller file of all three images on our storyboard. These variables are called outlets that are properties of our objects.
Then we add an action which is a function so that when the microphone button is pressed in the app the stop button appear and the recording label.
Next we add a Navigation controller by going to the Editor drop down menu, then to the Embed In drop down menu and select Navigation Controller. This allows us to add a view controller and link it with the existing view controller pictured in our Storyboard.
You can see in the image above that the we now have additional view controller which we added from the object library. This view controller is connect to the original view controller by the stop button. We achieved that by holding the control button, clicking on the stop button and dragging it to the new view controller.
Once the two are connected we can transition to the second view controller by pressing the stop button in the first view. The view controller file that is connected with this storyboard is created by selecting the new view controller. Then going to the file menu and selecting new and then file. When you get to the next screen select Coca Touch and create a new view controller called PlayAudioViewController. You can then connect the two by selecting the new view controller and going to the Utility area and select identity inspector.
Once this is complete, we follow the same procedure for adding buttons to the second view controller and for adding the code.
