How to create these kind of badges?

Question

I sketched this prototype: http://dl.dropbox.com/u/3630641/3-%20Todolist%20Main.jpg

The number at the left is the item priority and list is re-orderable so the values will change. How to create these left-located badges? I prefer a code approach if possible, not PNG images.

Update:

Would you please have a look:

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {

static NSString *CellIdentifier = @"Cell";

UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
if (cell == nil) {
    cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier] autorelease];
    CGRect priorityLabelRect = CGRectMake(10, 5, 20, 30);
    UILabel *priorityLabel = [[UILabel alloc] initWithFrame:priorityLabelRect];
    priorityLabel.layer.cornerRadius = 5.0f;
    priorityLabel.layer.backgroundColor = [[UIColor grayColor] CGColor];
    priorityLabel.tag = kPriorityValueTag;
    [cell.contentView addSubview:priorityLabel];
    [priorityLabel release];

    CGRect meatLabelRect = CGRectMake(80, 5, 300, 30);
    UILabel *meatLabel = [[UILabel alloc] initWithFrame:meatLabelRect];
    meatLabel.tag = kMeatValueTag;
    [cell.contentView addSubview:meatLabel];
    [meatLabel release];

    cell.showsReorderControl = YES;
}

// Configure the cell.
[self configureCell:cell atIndexPath:indexPath];

return cell;
}

But No grey area is shown around the priority.
If I add a new one, a grey area appears for less than a second around the priority but it disappears immediately. Not to mention that the priority value isn't located at the center for the grey area.

Any idea what I'm doing wrong?

Answer 1

Add a UILabel to the cell and format it to your liking. For the rounded corners, set label.layer.cornerRadius .

Answer 2

1. Create a UIView for the badge.

2. look here it will explaine how to draw what ever you want the badge to look like. and draw the number : http://www.techotopia.com/index.php/An_iPhone_Graphics_Drawing_Tutorial_using_Quartz_2D

3. create a variable that will receive the cell number and draw it in the cell.

It should look something like that -

- (void)drawRect:(CGRect)rect {

        CGContextRef context = UIGraphicsGetCurrentContext();

        CGContextSetLineWidth(context, 2.0);
        CGContextSetStrokeColorWithColor(context, [UIColor blueColor].CGColor);
        CGRect rectangle = CGRectMake(10,10,40,40);
        CGContextAddRect(context, rectangle);
        CGContextStrokePath(context);
        CGContextSetFillColorWithColor(context, [UIColor grayColor].CGColor);
        CGContextFillRect(context, rectangle);
        CGPoint point =CGPointMake(20,20);
        [self.cellNumber drawAtPoint:point withFont:font];

}

4 add the BadgeView to your cell and in the CellForRawAtIndexPath pass the number to the badge view.

good luck

Answer 3

You could make a combination control. It's a UIImageView with a UIImage and a UILabel as subviews.

A regular object that has a UIImageView.image with the gray rectangle and then a UILabel for the white number. Then just change the value of the label's text.

If you start with a UIImageView and subclass that, you will be able to just stick it directly into the regular UITableViewCells since they already have a space for a UIImageView.