One of the most popular pages here is an old (iOS 2.x era) post that describes how to subclass an
UIAlertView to customize it’s appearance. That post describes how to transform the default blue popup into something more arbitrary.
However ever since that post I’ve come to the conclusion you don’t want to subclass UIKit classes, unless they were specifically designed to do so. A
UIAlertView was definitely not designed to subclass. Time for a post on how to do this correctly.
I’m still using custom overlays and alerts in my applications, using an improved technique instead. All my popups derive from a common popup class. This post will show how this popup class works and how you can use it to create your own custom alerts and popups by subclassing it. I’ll demonstrate this by creating a nice progress HUD. (Similar to MBProgressHUD, but based on the technique explained here).
To dive right into the code, download the sample project from my bitbucket:
Source: kluivers / JKProgressHUD (git repository)
JKPopup is a common base class derived from
UIView that takes care of showing itself above all other content. It’s interface is fairly simple.
1 2 3 4
- (void) show; it will add itself centered to a new
UIWindow. This window will be presented on level
UIWindowLevelAlert to make sure it will float over all other content.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28
That’s all it takes. The example project actually has some code to animate the window in and out, but I left that out to keep the code as clear as possible.
Now that we have a base class to handle the popup stuff all we have to do is change it’s appearance to our liking. For demonstration purposes we’ll make it look like a
UIProgressHud, a private class used by Apple: black translucent background, rounded corners and a
We inherit from
JKPopup and define an indicator view.
1 2 3 4 5
Customize the appearance in the
initWithFrame:. Includes some layout and makes sure the activity indicator starts spinning upon being shown.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39
While the example
JKProgressHUD is not that interesting, it demonstrates how to use the base
JKPopup class. JKPopup makes it fairly simple to present any content over anything already on screen. By using a new
UIWindow you as a programmer don’t have to worry about the existing view layout, your new ‘alert’ content will float centered on screen.