Search code examples
iphonehelperdrawrect

How to create bubbles & arrows in iPhone help page about using buttons?

Most of the apps today provides the tutorial that teaches the user to how to use the buttons in the app. This help page is normally in black color with a little alpha value (so only the background will semi-visible) with a bubble box that contains the text to define controls and the arrow which points to the corresponding component.

Here is the sample image.. (From the app MyThings)

This is the normal page

enter image description here

And if you swipe from bottom to top, the help view will appear like..

enter image description here

Here is my doubts:

  • Which one is best to create the images & text in this help view? Drawing the images & texts using Core Graphics or by simply putting an UIImageView with a png image? Which one is efficient?

  • There is no problem in implementing a UIImageView with a ready-made png image. From my knowledge, the problem here is the image file size and the loading time. If we consider the drawing method, my mind things about the following problems.

  • Drawing a rectangle is so easy. (Refer here). But what about drawing a rectangle with a curved corners?? Is there any function available that handle this case?

  • Then the arrow, that points the corresponding component.. How can we find the exact point that should be pointed? (till iPhone 4S, there is no problem I hope, iPhone 5 has different height)

  • How to draw this pointers from the particular position in the rectangle?

Any ideas?

Just confused!!

Solution

    • Drawing the bubbles & arrows with CG is better, IMHO. It will work even if you change completely the app (if you draw them correctly pointing to the center of the button, for instance). With images, you'll need to have several copies for the different displays resolutions and scales. Also, you'll need to update the arrows if you change anything.

    • I don't see any performance drawback. Both methods will draw the bubbles very fast. Also, think that you can cache the CG generated images for future use.

    • See these questions to know how to draw bubbles:

    • It seems logical to use the center of the button each bubble point to. Your drawing methods needs to know where to point the arrow and the current orientation (if the app rotates). It should take into account other bubbles, to avoid overlap. You can divide the space in rows and columns and assign free space to each bubble.

    • For better user experience, those bubbles should not consume taps. If you tap a button when the bubbles are visible, the intended action should be performed (instead of just hiding the bubbles and require a second tap).