A text label in the tableview is too long which affects the right detail (detailTextLabel) to be covered or not shown

Question

I have set a text for that cell but however, the text that it is shown is too long which affects the right detail text to be covered or not shown.

I can't change it as I need the name in the next viewcontroller. Is it possible to enable it to just display the text, followed by "...."?

EXAMPLE:

Electrical & Electronic Engi.... 01 >

LEGEND: "Electrical & Electronic Engi...." as text displayed in the tableview, "01" as the detailTextLabel on the right and the ">" as the navigation.

This is how it should look like, http://oi58.tinypic.com/2j4vg5k.jpg, but due to some text is too long, this is what appears: http://oi58.tinypic.com/erc177.jpg

The textLabel and detailTextLabel doesn't seem to fit or show in the whole row. I would like the right detailTextLabel to be still there will the textLabel to end with a "...."

Thanks.

(I'm new to iOS Programming)

Answer 1

For this you will have to restrict the width of default textLabel of UITableViewCell or add new UILabel to cell.

you have two options

1)Dont use default textLabel of cell, create new UILabel and add it as a subview of tableview cell.

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *CellIdentifier = @"Cell";

    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
    // Configure the cell using custom cell

    //restrict width here while creating label (change 40 to what you want)
    UILabel *tempLabel=[[UILabel alloc]initWithFrame:CGRectMake(0,0,40,20)];

   tempLabel.text=@"The text you want to assign";
    if (cell == nil) {
        cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier];



        [[cell contentView] addSubview:tempLabel];
    }

    return cell;
}

2)Or second way is to change width of default textLabel , for this you will have to create new subclass inheriting UITableViewCell, and in the subclass override method (void)layoutSubView and in that method change width(do it by trial and error method)

create new class with following .h and .m file

////CustomCell .h file

#import <UIKit/UIKit.h>

@interface CustomCell : UITableViewCell

@end

////CustomCell .m file

#import "CustomCell.h"

@implementation CustomCell

- (id)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier
{
    self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];
    if (self) {
        // Initialization code
    }
    return self;
}

-(void)layoutSubviews{
    [super layoutSubviews];

    CGRect tempFrame=self.textLabel.frame;

     //whatever you want to set
     tempFrame.width=30;
     self.textLabel.frame=tempFrame;
}

- (void)setSelected:(BOOL)selected animated:(BOOL)animated
{
    [super setSelected:selected animated:animated];

    // Configure the view for the selected state
}

@end

Or one different option(better one)

3) Create custom tableview cell

custom tableview cell tutorial

And for having ... at the end of UILabel, there is property truncateTail of UILabel. you can use that.

Answer 2

Although the cell configuration is a bit different (only detail label and no disclosure indicator) this answer might be helpful: How can I truncate text in a UITableView Cell TextLabel so it doesn't hide the DetailTextLabel?