Building a custom Dashboard-like UIButton

Help overlay showing the Parking Mobility quick start help

As part of the Parking Mobility iPhone app I’ve been building, I wanted to integrate a simple “Quick Start” help guide to show people how to use the app without being intrusive.  I wanted to use the project’s branding as much as possible, and give the user a feeling like they haven’t left the main portion of the app.  So I wanted the user to be comfortable with it, and always have a quick way to close the help window to get back to the app.

In the end I created a little Close button in the top-left corner to mimic the behaviour of the Mac OS X Dashboard widgets.  But I didn’t want to simply add a static image since those don’t scale easily.  Plus I wanted to learn more about native drawing using Core Animation and Quartz2D.

The end result is actually really simple.  I subclassed the UIButton class, and overrode the drawRect: method to use some native drawing primitives.

https://nachbaur.com/wp-content/uploads/2010/09/587039.js?file=DNCloseButton.h
https://nachbaur.com/wp-content/uploads/2010/09/587039.js?file=DNCloseButton.m Reading through the source code, you can see how I split the drawing between two different routines.  First, my layer drawing which draws the border, the circle, shadows, etc is handled using raw CALayer drawing.  The second block, inside drawRect:, draws the lines forming the “X” inside.

Simply add these files to your project, and create a new DNCloseButton object and add it to your view.

https://nachbaur.com/wp-content/uploads/2010/09/587039.js?file=gistfile3.m

If you find any bugs in this code, please let me know and I’ll update this post.  I hope this works out as well for you as it has for me.

Dealing with MKMapView’s Google logo with translucent toolbars

One of the iPhone applications I’ve written, Parking Mobility, is primarily a map-based application.  Since the iPhone’s screen is so small, we want to maximize the screen real-estate while still providing navigation bars for users to interact with.  To that end, the app uses a black-translucent navbar and toolbar at the top and bottom of the screen.  In the past this has never been a problem, and most mapping applications do the same thing.  I recently submitted a huge update to the app which is a complete re-write as a 100% native Objective-C based application (all vestiges of PhoneGap having been removed).  With this latest submission though, we’ve run into problems.

Read on for more, and what I’ve done to (hopefully) get around this.

Continue reading “Dealing with MKMapView’s Google logo with translucent toolbars”