How can I insert an image in a UILabel, or make it look like I did?

Question

I am writing a geometry based app. At one point in the app, there will be a UITableView with some custom cells. These cells contain UILabels. Amid the text of some these labels, I want to insert symbols that look these two triangles:
_{(source: wiley.com)}

However, since I cannot find these symbols in any Apple fonts, is there a way to insert an image into the string in place of a symbol?

Here is a (very) rough idea of what I'm going for (the actual table will not be static):

Answer 1

Ok, I get what you're trying to do. The key, I think, is to just keep adding controls to your cell, calculating the width as you go along.

First, I'd suggest a data structure to hold your cell contents. A simple array will do the job. I generally do this stuff as an ivar:

@interface LabelWithImagesViewController ()
{
    NSMutableArray *_cells;
}
@end

Then fill this array with the text and images you want. I'm doing a single row, but you can repeat for every row you need.

- (void)viewDidLoad
{
    [super viewDidLoad];

    _cells = [[NSMutableArray alloc] init];

    [_cells addObject:[[NSArray alloc] initWithObjects:
                       [UIImage imageNamed:@"triangle.png"],
                       @"CAT",
                       [UIImage imageNamed:@"semiequal.png"],
                       [UIImage imageNamed:@"triangle.png"],
                       @"DOG",
                       @"  If",
                       [UIImage imageNamed:@"triangle1.png"],
                       @"then",
                       [UIImage imageNamed:@"triangle2.png"],
                       nil]];
}

And then, you need to create your cell:

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    // Return the number of rows in the section.
    return _cells.count;
}

#define kEquationTag 100
#define kCellHeight 44

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *CellIdentifier = @"equationCell";
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
    UIView *equationContainer;

    if (cell == nil)
    {
        // if we don't have a cell create it, including the frame to hold our custom stuff

        cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier];

        equationContainer = [[UIView alloc] initWithFrame:cell.contentView.bounds];
        equationContainer.tag = kEquationTag;
        [cell.contentView addSubview:equationContainer];
    }
    else
    {
        // if we are dequeing one that already exists, let's get rid of the old custom stuff

        equationContainer = [cell.contentView viewWithTag:kEquationTag];
        for (UIView *view in equationContainer.subviews)
        {
            [view removeFromSuperview];
        }
    }

    // Configure the cell...

    NSArray *cellContents = [_cells objectAtIndex:indexPath.row];

    NSUInteger x = 0;
    UIFont *font = [UIFont systemFontOfSize:12.0];

    for (NSObject *obj in cellContents)
    {
        if ([obj isKindOfClass:[NSString class]])
        {
            NSString *text = (NSString *)obj;
            CGSize size = [text sizeWithFont:font];
            UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(x, (kCellHeight - size.height)/2.0, size.width, size.height)];
            label.text = text;
            label.font = font;
            [equationContainer addSubview:label];
            x += size.width;
        } 
        else if ([obj isKindOfClass:[UIImage class]])
        {
            UIImage *image = (UIImage *)obj;
            UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(x, (kCellHeight - image.size.height) / 2.0, image.size.width, image.size.height)];
            imageView.image = image;
            [equationContainer addSubview:imageView];
            x += image.size.width;
        }
    }

    return cell;
}

This yields:

Answer 2

1. Make a UILabel and use instances of that UILabel for each letter.

2. Use some geometry logic about the rect of the image view to place the letters regardless of size...such as

       UILabel *aLetterLabel = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 35, 35)];
       aLetterLabel.text = @"A";
   
       //centered top
       aLetterLabel.frame = CGRectMake((shapeImage.frame.origin.x +  (shapeImage.frame.size.width/2)), shapeImage.frame.origin.y, 35, 35);
   
       //centered
       aLetterLabel.frame = CGRectMake((shapeImage.frame.origin.x + (shapeImage.frame.size.width/2)), (shapeImage.frame.origin.y + (shapeImage.frame.size.height/2)), 35, 35);
   
       //cenetered bottom
       aLetterLabel.frame = CGRectMake((shapeImage.frame.origin.x + (shapeImage.frame.size.width/2)), (shapeImage.frame.origin.y+(shapeImage.frame.size.height-35)), 35, 35);
   
       //left center align
       aLetterLabel.frame = CGRectMake(shapeImage.frame.origin.x, (shapeImage.frame.origin.y + (shapeImage.frame.size.height/2)), 35, 35);
   

Wrote these up really fast as a proof of concept...feel free to revise, etc.

Answer 3

You can create your own font with the exact symbols you need. Try this: http://glyphdesigner.71squared.com

Answer 4

You can't insert an image in a UILabel. But you can add a UIImageView in the custom cells of your UITableView and then put a UIImage inside.