Solutions: Making a Calculator (Adding Buttons to Numpad)

Adding Buttons to UIKit’s Numpad

Screen Shot 2015-08-20 at 10.49.21 AM
Xcode Statistician from the Scrivener team at Literature and Latte

On a current project, users need to enter their locations by latitude andlongitude. True, the real world use of such a feature is dubious (do you know, right now, your latitude and longitude to four digits? Or the lat/lng of your destination? Yes? Well, my response to you, dear reader, is STOP DRIVING while reading blogs!). However, to make a simple calculator — or even more basically, to enter a number and then Return — you will need more than the UIKit-provided numpad.

Problem

You want to make a vanilla calculator. You would like to enter numbers to a UITextField without the default alphanumeric keypad, but rather with a number pad. However, the UIKeyboardTypeNumberPad was “designed for PIN entry,” and just contains the digits.

Solution

Add a custom UIToolbar on top of the default Numpad with the button(s) you require.

How It Works

(This solution is but One of Many.)

UIToolbar, which normally appears at the bottom of the screen, can be added to the inputAccessoryView belonging to the UITextField in question. After wiring up the storyboard, we will: (more…)

Open-Source UI Controls

Cocoa Controls on Your Device

Cocoa Controls: UI Elements for Hire

Perhaps the most powerful characteristic of knowledge is that it is relatively cheap (more specifically, it has a radically low marginal cost). Combine that with an open-source culture, and the result is that many wheels needn’t be reinvented. This is a heaven-sent boon for new developers, especially in the realm of UI and UX. As much as raster and vector graphics are on my list of mountains to conquer — and the principles of good design that make those packages useful — between Photoshop and UIKit, which do you think a babydev will prioritize? For many a beginner, this should be one less problem to deal with.

One very helpful site collecting various UI elements — with both free and paid code available — is Cocoa Controls. Give it a look over, and go nuts.

Do it one better: see the elements in action

For all that this website is an excellent resource, it is often hard to get a sense of how the elements work in action. Sometimes there are demo videos, more often flip-book gifs, but most often just static pictures. It’s also hard to get a ‘feel’ for the control in question. Although they are not so numerous, there are a few apps that help with this.

  1. Cocoa Stars – (Free), I cannot recommend this enough. You could get lost in the over 200 various controls on offer (mostly found on
    Cocoa Stars lets you test drive various UI elements right on your device.

    Github). While it certainly is not the end-all and be-all, it drastically lowers the barrier to entry, saving lots of time by letting you try out the controls on your device.

  2. NucliOS by Infragistics (free trial, copyrighted). This is a professional grade set of UI controls, with a professional grade price tag (starting at $899) – yet they provide their source code for you to peruse or copy, as a trial version. At the very least, it is a source of inspiration. [thanks to Omar Elfanek for discovering this]
  3. Dev Controls – (‘Free’ with copious ads and popups, grrr…). This app provides a curated list pointing to many UI Controls. Helpful, but not nearly as awesome as Cocoa Stars, which runs the controls it advertises. Still, this has over 1,000 elements to look through, and is a resource I am glad to have. And if the dev is truly spending time curating the list, then I forgive him the ads which support the endeavor.
  4. UI Tuner – (Free) – The iTunes description says it best:
      “This is a developers tool for designing, visualizing, and tweaking UI controls. Quickly change opacity, shadow orientation, transform parameters, just about any other visual property and see the result immediately on your iOS device. When you have your control tweaked just the way you want it, the app can email the source code to your Xcode system.” ++
  5. Cocoapods – (App Store link here [Free]). This is a helpful Cocoapods browser, but it doesn’t strictly run the pods’ demos on your device.

So all you new and experienced developers out there, you don’t have to reinvent the UIWheel! (You heard it here first 😉 )

 UPDATE (19 Aug 2015)

Also check out Libraries for Developers, another demo app like Cocoa Stars. (updated link can be found here).