How to make UITableViewCell with 2 labels of different color?

Question

I would like to have UITableViewCell like this:

The text color of "Tel:" must be different from text color of number. Right now i set text to cell as usual:

cell.textLabel.text=@"Something";

Is it possible to have 1 label and change color of some parts of it?

How can I make table cell like on my picture?

Thank you.

Solution 1

You should have to take two Labels and in Cell...and add this both Label in subview of UITableViewCell

Write this in cellForRowAtIndexPath method.

- (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];

    for(UIView *eachView in [cell subviews])
        [eachView removeFromSuperview];

    //Initialize Label
    UILabel *lbl1 = [[UILabel alloc]initWithFrame:YOURFRAME];
    [lbl1 setFont:[UIFont fontWithName:@"FontName" size:12.0]];
    [lbl1 setTextColor:[UIColor grayColor]];
    lbl1.text = YOUR CELL TEXT;
    [cell addSubview:lbl1];
    [lbl1 release];

    UILabel *lbl2 = [[UILabel alloc]initWithFrame:YOURFRAME];
    [lbl2 setFont:[UIFont fontWithName:@"FontName" size:12.0]];
    [lbl2 setTextColor:[UIColor blackColor]];
    lbl2.text = YOUR CELL TEXT;
    [cel2 addSubview:lbl2];
    [lbl2 release];

    return cell;
}

UPDATE:

Along with this you can also create Custom cell as define here

Happy Coding..

Solution 2

many use the technique of adding the labels as subviews of the cell, and maybe you run into unexpected results with the reuse of the cells. Apple already offers templates that can be customized in every aspect. In your case, without using custom cells, and without adding labels, i would use the template UITableViewCellStyleValue2, you can play with the existing labels and accessoryView, like cell.textLabel, cell.detailTextLabel and cell.accessoryView, see this snippet that emulates more or less your interface:

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

    static NSString *CellID = @"Cell";
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellID];
    if (cell == nil) {
        cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleValue2 
        reuseIdentifier:CellIdentifier] autorelease];
    }

        cell.textLabel.contentMode=UIViewContentModeScaleToFill;
        cell.textLabel.lineBreakMode = UILineBreakModeWordWrap;
        cell.textLabel.baselineAdjustment=UIBaselineAdjustmentAlignCenters;
        cell.textLabel.textAlignment=UITextAlignmentCenter;
        cell.textLabel.font=[UIFont boldSystemFontOfSize:22];
        cell.textLabel.textColor=[UIColor lightGrayColor];

        cell.detailTextLabel.contentMode=UIViewContentModeScaleToFill;
        cell.detailTextLabel.lineBreakMode = UILineBreakModeWordWrap;
        cell.detailTextLabel.baselineAdjustment=UIBaselineAdjustmentAlignCenters;
        cell.detailTextLabel.textAlignment=UITextAlignmentLeft;
        cell.detailTextLabel.font=[UIFont boldSystemFontOfSize:23];
        cell.detailTextLabel.textColor=[UIColor blackColor];

        cell.textLabel.text=@"Tel.:";
        cell.detailTextLabel.text=@"[phone]";

        UIImageView *imageView = [[UIImageView alloc] initWithImage:
                                  [UIImage imageNamed:@"phone.png"]];
        cell.accessoryView = imageView;
        [imageView release];
        return cell;
}

Hope this helps.

Solution 3

only way is to add new labels as subview with different colors as their background.