iPhone Mail App’s Recipient Bubbles

new message screenshot

Notice how the recipient’s names are placed inside a bubble? Well, Apple wasn’t nice enough to provide this functionality out of the box. The three20 lib has a control that will provide this for you as part of the TTMessageController but good luck trying to get compatible up-to-date MonoTouch bindings for it.

So just do it  yourself! All you need is a class that inherits from UIView, let’s call it RecipientBubble. In that class you just need two subviews: a UILabel for the actual text that goes inside and a UIImageView for the background.

The only other thing you’ll need is the background image. How about this one? 

And now the code. Here’s the short version. For the more complete version see the gist on github.

public class RecipientBubble : UIView
{
  public const string IMAGES_PATH = "Content/Images";
  private static UIImage _backgroundImage;

  private UILabel _titleLabel;
  private UIImageView _backgroundView;

  static RecipientBubble()
  {
    _backgroundImage = UIImage.FromFile("recipientbackground.png").StretchableImage(11, 0);
  }

  public RecipientBubble(string title)
  {
    _titleLabel = new UILabel(new RectangleF(0, -100, 10, 23));
    _titleLabel.Font = UIFont.SystemFontOfSize(14);
    _titleLabel.TextAlignment = UITextAlignment.Center;
    _titleLabel.Text = title;
    _titleLabel.SizeToFit();
    _titleLabel.Frame = new RectangleF(0, 0, _titleLabel.Frame.Width + 20, 21);
    _titleLabel.TextColor = UIColor.White;
    _titleLabel.BackgroundColor = UIColor.Clear;
    AddSubview(_titleLabel);

    _backgroundView = new UIImageView(_backgroundImage);
    _backgroundView.Frame = new RectangleF(0, 0, _titleLabel.Frame.Width, 23);
    InsertSubviewBelow(_backgroundView, _titleLabel);

    SizeToFit();
  }
  ...
}

Your end result will look something like this.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: