LCD Clock Project

Welcome back fellow Googlers, programmers, and family members that I ask to proof-read all my posts :) Today I'd like to tell you about a project I was assigned a couple of months ago called LCD Clock and how it lead to me being able to use autolayout like a boss. Learn about the project and stay tuned next week for an autolayout tutorial that will ensure that you will be able to constrain your views to heart's content!

LCD Clock Summary 

Digit 8 from xib File.

The LCD Clock assignment was to create a view using the Storboard/xib files that shows the time, in a HH:MM format. Adding SS was optional. AM/PM should be included, as well as the user's ability to change the format to military time, change the text color, and change the background color. In addition to the basic clock we would use NSTimer to ensure the accuracy of our time and blink the dots that separate the hours and minutes. We would also use NSUserDefaults to add persistence in the app. And finally, use autolayout on the views so that when you rotate the device, it auto-adjusts.

NSUserDefaults

A hefty project with extremely important concepts. This was my first taste of persistence within an app. Confusing at first, but as soon as you wrap your head around the idea that it's really just a dictionary that you create then continually update or "save," it isn't too difficult. Much easier than say, using SQL Lite or Core Data, two other persistence methods I would learn in the next project (dun dun dunnnn!!).

I saved my colors as integers which were references to their place within a colorArray.

Time Parsing and NSTimer

Change between standard and military time.

The time in the app was created using Time Parsing to take the time and create a digit that represents each number value in that time. Then this was altered for military time. A switch was provided to alternate between the two formats. There were many ways to layout the numbers. I chose to create a xib file of the number 8. This digit was then used in my storyboard for all numbers in the layout. Depending on what numbers were needed in each digit of the time, segments of the number 8 were hidden or shown. For example, to make a 4, the top, bottom, and bottom-left segments were hidden. When it became 5, the top and bottom segments were re-shown, and the top right segment was hidden. NSTimer adjusted the digits accordingly every second and blinked the dots (show, hide) every half second.

NSTimer to control the clock and the dots.

Defining each digit in terms of the segments that show and are hidden.

Programmatic UI

While the initial colors used for the clock digits and background were set in the storyboard, all additional color combinations were written programmatically. I then coded these colors to change with the user's swipe (background) or long-press (text).

All of the views that needed to change when a user would choose a new color for the clock text.

Autolayout

All of this may sound pretty difficult but it really took me just one week to put this all in place. The second week was spent entirely on autolayout. If you're really struggling with autolayout I recommend reading the Apple Documentation. If you're still struggling, you should visit this site again next Monday when I'll be posting an autolayout guide. I'll be discussing everything - from deciding on your constraints before you start applying them, to the usefulness of stack views in constraining your views. In the meantime, checkout this full project at my github page. Talk to you all again next week!

Final product - portrait, black
backgroud, red text, standard
time format.

Final product - landscape, green background, black text, military time format
which looks almost identical in the AM, aside from the AM view hiding.