How to make UITableViewCell with 2 labels of different color?

Question

I would like to have UITableViewCell like this:

enter image description here

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.

You can always subclass UITableViewCell and two UILabels to it. — tilo, Oct 19 '11 at 08:40

Mehul Mistri · Accepted Answer · 2011-10-19T08:52:31.540

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..

`for(UIView *eachView in [cell subviews])[eachView removeFromSuperview];` is fantastic. +1 for that — hp iOS Coder, Mar 06 '13 at 07:10
`for(UIView *eachView in [cell subviews].copy)` is safer. The other form crashes (or used to crash in previous Cocoa's). — Steven Kramer, May 29 '13 at 20:55

score 5 · Answer 2 · answered Oct 20 '11 at 18:13

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=@"+3912345678";

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

Hope this helps.

score 4 · Answer 3 · answered Oct 19 '11 at 08:41

4

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

answered Oct 19 '11 at 08:41

Saurabh Passolia

8,099
1
26
41

score 0 · Answer 4 · answered Oct 19 '11 at 08:45

Either go with custom cell and initialize as per requirement or you can use UITableviewCell and in that add multiple UILabels as per desired formats.

For example...,

static NSString *MyIdentifier =@"MyIdentifier";
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:MyIdentifier];

if (cell == nil) 
{       
    cell = [[UITableViewCell alloc] initWithFrame:CGRectZero reuseIdentifier:MyIdentifier];     
}

UILabel *lblPhone = [[UILabel alloc] initwithFrame:CGRectMake(5, 5, 150, 30)];
lblPhone.text = @"Tel.";
[cell addSubView: lblPhone];

You shouldn't really add subviews to the cell but to the cell's content view so that the behaviour on editing is sensible. Also this would require adjusting the frame of the default textLabel so that there is no overlap. — jbat100, Oct 19 '11 at 08:49

score 0 · Answer 5 · edited May 23 '17 at 12:24

0

It is not possible to change font or colour for parts of a UILabel. The easiest way here is to create a cell subclass, and add two labels either interface builder or in code. This post shows you how to calculate the size of the text in the label so that you can adjust dynamically the size of the label if you want the text of the two labels to be "thouching".

edited May 23 '17 at 12:24

Community

1
1

answered Oct 19 '11 at 08:45

jbat100

16,757
4
45
70

How to make UITableViewCell with 2 labels of different color?

5 Answers5

Linked