Originally I wanted to create a drum pad lock screen, where user would tap a certain beat pattern that matches with a predetermined beat pattern to unlock. However, in order to do that, I need a metronome to keep track of the timing and rhythm, and I need to analyze the note duration value(half note, quarter note, rest etc) and record the note pattern. As rhythm is time-based media, it is a little tricky to work with timing in Xcode at this point for me, so I decided to modify the interface from a drum pad to a piano keyboard with an octave of 8 playable C major keys. If the melody/note sequence matches the predetermined melody, it unlocks. In this way, piano keys act just like lock screen buttons, instead of displaying numbers, it plays different pitches based on the key pressed.
First I used auto layout to create a row of piano keys in the landscape mode. Since I’m only using all the white keys, for C major, only white keys are UIButtons, all the black keys are Views, with no functions attached. I first created a view as a container for all the keys, and created a row of 8 keys with the same height and width and embed them in stack view so I could have equal spacing between the buttons. I then constrain the stack view to the lower layer view I created, which is constrained to safe area. This process took me a long time as I had to figure out the exact height and width of the keyboard and keys I want and constrain each elements side by side, layer by layer since the order of the constraints matters.
I needed the edges of each white keys when they are arranged side to side so I had to add borders to the button. There is no border option in the attribute inspector, so I had to declare the button outlet in view controller and manually change the properties of button in viewDidLoad() with: myButton.layer.borderColor = UIColor.black.cgColor , myButton.layer.borderWidth = 2.0
I also wanted the white keys to change color from white to grey when they are held down, this is for a better UI to indicate that key is pressed, so I connected each button to a touch down function which triggers the note and changes color to grey, and a touch up inside function, which changes the color back to white.
I added 8 m4a files for 8 notes to my project folder and borrowed the code for playing sound files from first week’s one button code kit and
I referred to the class’ unlock screen kit and adapted it to an 8 button sequence lock screen with sound.
Link to my lock screen app on Github
Challenge:
I created the interface in landscape mode because piano keyboard is wide. However, I also wanted it to be able to adjust to portrait mode, but I couldn’t figure out how to use multipliers/proportions to constrain the keyboard so that the keys would change size but still align in the center of the screen when I change orientation.
My keyboard view is constrained to the bottom of the safe area and my keys are perfectly aligned, it looks correct in my storyboard, however when I run simulation, the entire view moved upward, and my white keys became shorter. Later I realized that the bottom of my storyboard, it was set to view as iphone 8, that’s why when I ran my simulation in iphone XR the layout went off.
I was working with 8 playable piano keys, when I added connections to them, I had to repeat the same steps for every single key, even though they all act the same way. I figured I could use a button class to manipulate all the buttons together.
I was very confused by the file management system in Xcode. I created a sound folder within a resource folder inside my local project folder, and inside Xcode, target - build phases, I added the entire folder. However, when I tried to run the app, error message shows “Command CodeSign failed with a nonzero exit code“. And I fixed it by deleting my resource folder and re-added individual sound files into build phases. However, I’m still not really sure what is the correct steps of adding resources to my project.