Latest 2.1.5
Homepage https://github.com/nfarina/calloutview
License Apache License, Version 2.0
Platforms ios 7.0, requires ARC
Authors

Example Screenshot

Overview

SMCalloutView aims to be an exact replica of the private UICalloutView system
control.

We all love those "bubbles" you get when clicking pins in MKMapView. But
sadly, it’s impossible to present this bubble-style "Callout" UI anywhere
outside MKMapView. Phooey! So this class painstakingly recreates this handy
control for your pleasure.

Usage

To use SMCalloutView in your own projects, simply copy the files
SMCalloutView.h and SMCalloutView.m.

SMCalloutView, by default, will render in the new style introduced with
iOS 7. If you need the old style, simply include SMClassicCalloutView.h
and SMClassicCalloutView.m in your project as well. There is a special
class constructor, +[SMCalloutView platformCalloutView] which will
automatically select the appropriate callout class for the current platform.

The comments in SMCalloutView.h do a lot of explaining on how to use the
class, but the main function you’ll need is presentCalloutFromRect:. You’ll
specify the view you’d like to add the callout to, as well as the rect
defining the "target" that the popup should point at. The target rect should
be in the coordinate system of the target view (just like the similarly-
named UIPopover method). Most likely this will be target.frame if you’re
adding the callout view as a sibling of the target view, or it would be
target.bounds if you’re adding the callout view to the target itself.

You can study the included project’s UIViewController subclasses for a working
example.

Questions

How do I change the height of the callout?

If you use only the title/titleView/subtitle/subtitleView properties, the
callout will always be the "system standard" height. If you assign the
contentView property however, then the callout will size to fit the
contentView and the other properties are ignored.

Can I customize the background graphics?

Yes, the callout background is an instance of SMCalloutBackgroundView. You
can set your own custom View subclass to be the background, or you can use
one of the built-in subclasses:

  • SMCalloutMaskedBackgroundView renders an iOS-7 style background.

  • SMCalloutImageBackgroundView lets you specify each of the image
    "fragments" that make up a horizontally-stretchable background.

  • SMCalloutDrawnBackgroundView draws the background at any size using
    CoreGraphics methods. You can copy the -drawRect method and change the
    parameters to suit your needs.

Can I use the callout with the Google Maps iOS SDK?

Check out ryanmaxwell’s demo project for an example of one way
to do this. (More discussion on this topic)

Have you recreated more of MapKit?

Nope, but other intrepid coders have!

  • For an awesome replacement of the pulsing blue "Current Location" dot, check
    out Sam Vermette’s SVPulsingAnnotationView.

  • And for the outdoor map data and tiles themselves, check out Mapbox’s iOS
    SDK
    , a complete open-source solution for custom maps. They even use
    SMCalloutView out of the box!

More Info

You can read more info if you wish in the blog post.

Latest podspec

{
    "name": "SMCalloutView",
    "version": "2.1.5",
    "summary": "A lightweight callout view class for iOS mimicking UICalloutView.",
    "description": "SMCalloutView aims to be an exact replica of the private UICalloutView system control.nnWe all love those "bubbles" you get when clicking pins in MKMapView. But sadly, it's impossible to present this bubble-style "Callout" UI anywhere outside MKMapView. Phooey! So this class painstakingly recreates this handy control for your pleasure.",
    "homepage": "https://github.com/nfarina/calloutview",
    "license": "Apache License, Version 2.0",
    "authors": {
        "Nick Farina": "[email protected]"
    },
    "source": {
        "git": "https://github.com/nfarina/calloutview.git",
        "tag": "2.1.5"
    },
    "platforms": {
        "ios": "7.0"
    },
    "source_files": [
        "SMCalloutView.{h,m}",
        "SMClassicCalloutView.{h,m}"
    ],
    "requires_arc": true
}

Pin It on Pinterest

Share This