UIView Callout Bubble

Question

I want to be able to do something like a MapView callout when the user touches UILabel in the standard view. This is not a map! Or can I hover over a new UIView?

Can someone point me in the right direction?

Thank,

Answer 1

Some downloadable codes to do something similar are available in this answer .

Answer 2

I have done this recently.

You need two subclasses of UIView: one appearance (draws the background and the handles casting the bubble) and one inside (draws the bubble itself). I called my IMPBubbleView and IMPBubbleInternalView.

In IMPBubbleView, it sets the size of the current UIWindow, and then adds itself as a subspecies of the window. The caller must pass the rectangle that the bubble should point to: work where it is in the window, doing convertRect: toView: (method in UIView) and passing in IMPBubbleView.

IMPBubbleView creates an IMPBubbleInternalView object and adds it as a self subtitle.

He needs to figure out if there is room for drawing a bubble below or above the rectangle (so that the bubble does not end on the screen). You can make the bubble view accepted in the UIView object for display inside it: this makes the most reusable API. Then you can set the size of this view. Some simple math and set the bubbleOnTop property to IMPBubbleInternalView.

To draw the bubble itself, I ported some Matt Gemmel code (found at http://mattgemmell.com/source ) to create a path for the bubble outline. Then I filled it with a gradient with the following colors:

CGFloat locations[5] = { 0.0, 0.5, 0.65, 0.65, 1.0 }; CGFloat components[20] = { 0.0, 0.0, 0.0, 1.0, // Start color 58.0/255, 58.0/255, 58.0/255, 1.0, 58.0/255, 58.0/255, 58.0/255, 1.0, 91.0/255, 91.0/255, 91.0/255, 1.0, 144.0/255, 144.0/255, 144.0/255, 1.0 }; // End color 

When you show IMPBubbleInternalView, you can use Core Animation to make it fade out, or increase it a little, and then decrease it or something else.

Finally, you need to handle the taps in IMPBubbleView (which draws the background). The faucet here must clear the bubble. Override touchesEnded: withEvent: and use the locationInView: method on the touch object (to make sure that you control a tap that was outside the bubble).

I think about everything. I had a lot of things to add buttons (I emulated a copy / paste menu).

Answer 3

My approach would be to create a bubble-style png image (useful only for a fixed-size bubble, of course), Subclass UIView and draw this image in the background of the UIView when creating it, I would also add a UILabel or UIImage depending on what I wanted to do, whether it is display text or an image.

If you want to make images with a variable size, you would like to use Quartz2D and draw the rectangles you need. Although this works more if everything is done correctly, you get a more extensible component.

The next step is to subclass UILabel and add a method that responds to the touchhesBegan (UIResponder) method, will be called every time it touches. Then you can create and display a custom view for the user. Normally I would say create a delegate, but I don't think UILabel / UIView supports this.