speech bubbles like in comics for iphone

Question

I am new to iphone application development. I am building an iphone app where the user needs to be able to add speech bubbles (think comics) over existing images. I have some questions on how to implement this,

• Have an empty speech bubble image and overlay it over existing image - Do I use a separate UIImage for the speech bubble? Or should I draw the speech bubble myself?

• Allow the user to move the speech bubble using touch- Any pointers or examples would be great!

• Also let him resize the speech depending on the amount of text - Any pointers or examples would be great!

• Finally he should be able to add text to speech bubble - Is there a way to add textbox over an existing image?

Thanks,

Update -

Found a similar example on this site where we move/resize a UIView - http://www.switchonthecode.com/tutorials/creating-basic-animations-on-iphone

Answer 1

I would use a transparent UIView with a UIImageView containing the bubble and a UITextView set editable.

Use this to resize the text view whenever the text view changed notification is sent: CGRect frame = textview.frame; frame.size.height = textview.contentSize.height; Textview.frame = frame;

Subclass the UIView and use touchesbegan and touchesmoved to determine where to move the view as its being dragged.

sizewithfont: constrainedtosize: linebreakmode is the string size method

How to save a UIImage of this layout to the photo album:

CGRect screenRect = CGRectMake(0, 0, 320, 416); // change this as necessary
UIGraphicsBeginImageContext(screenRect.size);
[self.view.layer renderInContext:UIGraphicsGetCurrentContext()];
UIImage *screenshot = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
UIImageWriteToSavedPhotosAlbum(screenshot, nil, nil, nil);

Answer 2

I had implemented this kind of interface by using a UITableview, setting background of the UITableview cell to the speech bubble image. I used sizewithfont: constrainedtosize: linebreakmode to get the width and height of the text content and accordingly set the frame of my tableview cell. Since this was a chat application, the user would type in the text in a textfield at the bottom of the view and click on a button next to it and the text would appear in a callout in the tableview.

But in your case, since you need to move the bubble around when you touch it, Cirrostratus's method seems appropriate.