X-Code Programming: DIY Please Wait Bubble

The default UIActivityIndicatorView that is native to X-Code is nice, but doesn’t always give the greatest user experience.  A great use for a UIActivityIndicatorView is to show a user that a web page is loading when you’re using a UIWebView.  However, this can be problematic if the web page being loaded is a similar color to the UIActivityIndicatorView because it can blend in.  It also is boring and doesn’t really give a pleasant user experience.  This post will show you how to easily create your own nicely formatted “Please Wait” bubble.

First, in the view controller that you’d like to add your new Please Wait Bubble, add an IBOutlet UIView* to your class along with the associated property.  For now, let’s call it waitView.  In this example, I’m adding it to a class to be used with a UIWebView.

Next, in the .xib file, add a UIView that is horizontally centered in the screen.  To have the nice transparent effect, change the Alpha value to something other than 1.  I prefer .75 or .8, but you can change it to be less if you’d like more transparency.  Don’t forget to connect the UIView to the waitView outlet.

After this, please add your wait message UILabel and spinning UIActivityIndicatorView to your waitView view.

Once you do this, all you have to do to display the message is use the .hidden property of the new waitView view.

This is all fine, but the message still looks like a box.

Now, it’s time to add the rounding effect to the box.  In your view controller class, make sure to include the QuartzCore/CALayer.h file.

Finally, to get the rounding effect, add the following lines to your viewDidLoad function:

The result should be a nice rounded, semi-transparent “Please Wait” bubble that will be a much better user experience than a traditional UIActivityIndicatorView.