SMCalloutView for iOS 7
Check out SMCalloutView on Github.
A while back, I wrote a custom “Callout View” control for iOS that replicated the otherwise-inaccessible system control that you normally only get in MapKit, and even then you can’t customize it directly.
Surprisingly, it became my most popular project on Github by far, even making its way into household-name apps like Evernote. And now I’m happy to announce it’s getting its biggest update yet - full support for the new system callout style introduced with iOS 7!
iOS 7 introduced a brand new style and animation for the system Callout view. The animation is less “bouncy”, the fonts are different, and the layout has been tweaked. Not to mention the new minimalistic background which is no longer composed of multiple images, but instead gets its appearance mostly from layer effects.
Actually there is just one single image:
…but that’s it!
There’s also one interesting effect you might not notice at first. The left accessory view is actually “masked” to the shape of the callout background:
Fancy. All these changes were enough to make the code pretty
complex if I wanted to support both the old and new styles. So I
opted to rewrite the class entirely for iOS 7. It’s much
simpler and cleaner. But! You can still get the old iOS 6-style
look if you want by simply including the old class, now refactored
as a subclass of SMCalloutView called
SMClassicCalloutView.
You can even use the class constructor
+[SMCalloutView platformCalloutView] and it’ll
select the appropriate class based on the OS version your app is
running on.
Reveal.app to the Rescue
In order to match the iOS 7 system style, I had to go back and examine how it was built all over again. When I wrote the original callout view, this became quite the expedition with plenty of log dumping.
This time around, I had the benefit of a truly remarkable app
called Reveal. Reveal is a Mac
app that connects to a little server you compile into your iOS app
that exposes access to your entire view hierarchy at any given
time. So I wrote a little app that used MKMapView to
display a proper system callout, then fired up Reveal and looked
around.
This saved me so much time it’s not even funny. You can just click on one of the system views and boom, there’s the font and point size and x/y position and everything. I even discovered a couple things I might not have noticed otherwise - for instance, the system callout actually has a large shadow with a 30px radius at 10% opacity that’s so subtle I never would have noticed it otherwise.
Now you can fire up the sample app accompanying SMCalloutView and toggle between SMCalloutView and the system UICalloutView and you can see they are perfectly identical. Very satisfying!
I hope you guys continue to find this control useful. Check out the repository and feel free to create an issue if you find any bugs.
