Note: In this step we will take a look at writing the actual code that will set and run the timer.ĤA. You’ll notice the correct properties for the Label object are on the right hand side. The images above will show what your storyboard should resemble. Note: We will take a look at the reasoning for this properties once we start coding the application. Set the Alignment property to center-aligned, and change the Background property to White Color. Make sure the Font property is set to System, and the font size is set to 44.ģK. Change the ‘Text’ property from the Attributes tab to ’00:00’. Add constraints to the Label object by clicking on the icon at the bottom that looks like a triangle between two vertical lines, then choose ‘Add Missing Constraints’.ģJ. The Label object can be found where the Button and Date Picker objects are located.ģI. Note: This label will contain the count down time. Stretch the size of the Label so it is the same size as the Date Picker object. Drag a Label object onto your storyboard, and make sure it is on top of the Date Picker object. Just as with the Start/Stop functionality, this will be done in code.ģH. Note: We will later change this button to be the Resume button as well to resume the timer. Change the Title of this button to Pause. Drag another button to your storyboard, just as we did with the Start button. However for the purposes of this project, we will be using the default System button.ģG. You can change a variety of other settings for our button, including using your own custom button. The Attributes tab will also be located in the same position as with our Date Picker object. The ‘Button’ object will be located in the same area as our Date Picker object.
Note: This button will also be our ‘Stop’ button, and we will code that feature later. Once it is added to your storyboard, change the Title option of the button to ‘Start’ from the Attributes tab. Drag the interface object labeled ‘Button’ onto your storyboard. Change the Mode option to Count Down Timer, and make sure the Interval option is set to 1 Minute.ģF. Note: The Attributes tab will be the option directly to the left of the icon that looks like a ruler.ģE. Click on the Date Picker object, then open the Attributes tab in the top right hand corner of the Xcode window. Constraints will make sure our Date Picker object fits correctly on different size iPhone screens.ģD. Note: You can position the ‘Date Picker’ object anywhere on the screen that you’d like. Click on the icon at the bottom of the Xcode window that looks like a triangle between to vertical lines, then click on the ‘Add Missing Constraints’ option. Add the ‘Date Picker’ object to the top of the screen. Drag-and-drop the ‘Date Picker’ interface object from the list of interface items in the bottom right corner of the Xcode to the storyboard window.ģC. In short, this file allows us to drag-and-drop interface objects that can later be connected to our code.ģB.
The only file that we will be working with in this step is the Main.storyboard file. Note: In your project, you will be given files that are created automatically. Click on the Main.storyboard file to open it up.
This will include the time picker, as well as the Start, Stop and Pause buttons.ģA.
Download all application data as a backup or to re-import it.