uitableviewcell textlabel too long and push detailtextlabel out of view

I ran into a similar problem when trying to use "Right Detail" in UITableView; the right detail's built in title label was clobbering my subtitle label.

Eventually I gave up on the "Right Detail" in favor of my own custom one (using swift and autolayout):

  1. I created my own simple class that inherited from the UITableViewCell:

    class TransactionCell: UITableViewCell
    {
    
    }
    
  2. I set my prototype cell use that custom class by setting the "Style" field to "Custom" on the "Table View Cell" Menu and by adding "TransactionCell" to the "Class" field of the "Custom Class" menu. These menus are available when you select the prototype cell in the storyboard. enter image description hereenter image description here

  3. I added two labels to my prototype cell and connected them to my custom class by right click dragging from my labels to my class (Oddly, I had to clean my build before it would let me do this):

    class TransactionCell: UITableViewCell{
    
        @IBOutlet weak var detailsLabel: UILabel!
    
        @IBOutlet weak var amountLabel: UILabel!
    
    }
    
  4. I added new constraints to my labels, taking advantage of swift's autolayout features (You will need to set these to match your own requirements; see a tutorial on autolayout if you are stuck)

How to add new constraints: click on the thing to add constraints to then click on this symbol

  1. ...and set the "Lines" and "Line Breaks" fields in the respective "Label" menus so that the spacing between labels would be even and so that my details label could flex to multiple lines. enter image description here

It worked for me, allowing me to have the flexibility of different amounts of multiple lines in a UITableView in swift per cell, while formatting the word wrapping so that it looked nice and even, like I would have expected the "Right Detail" to do automatically.


@Jhaliya @lucas

cell.textLabel.numberOfLines = 3; // set the numberOfLines
cell.textLabel.lineBreakMode = UILineBreakModeTailTruncation;

see here: Custom UITableViewCell. Failed to apply UILineBreakModeTailTruncation


Simplest for me was to subclass UITableViewCell and override the layoutSubviews.

Couldn't find a reliable way to calculate the positions from just the label frames so just hardcoded the accessory width for in this case a UITableViewCellStyleValue1 cell with a UITableViewCellAccessoryDisclosureIndicator accessory type.

- (void)layoutSubviews
{
    [super layoutSubviews];

    CGFloat detailTextLabelWidth = [self.detailTextLabel.text sizeWithFont:self.detailTextLabel.font].width;
    CGRect detailTextLabelFrame = self.detailTextLabel.frame;

    if (detailTextLabelFrame.size.width <= detailTextLabelWidth && detailTextLabelWidth > 0) {
        detailTextLabelFrame.size.width = detailTextLabelWidth;
        CGFloat accessoryWidth = (floor(NSFoundationVersionNumber) <= NSFoundationVersionNumber_iOS_6_1) ? 28.0f : 35.0f;
        detailTextLabelFrame.origin.x = self.frame.size.width - accessoryWidth - detailTextLabelWidth;
        self.detailTextLabel.frame = detailTextLabelFrame;

        CGRect textLabelFrame = self.textLabel.frame;
        textLabelFrame.size.width = detailTextLabelFrame.origin.x - textLabelFrame.origin.x;
        self.textLabel.frame = textLabelFrame;
    }
}

I had the same problem and had to create a UITableViewCell subclass. It's easier to do that than I thought:

Basically, just make a new file, that is a subclass of UITableViewCell

Add the labels and synthesize them:

// in the .h file
@property (nonatomic, weak) IBOutlet UILabel *textLabel;
@property (nonatomic, weak) IBOutlet UILabel *detailTextLabel;
// in the .m file
@synthesize textLabel, detailTextLabel;

In the StoryBoard, set your class as the cell's class, make the Style "Custom" and add two labels in the cell to look exactly as you want (I made them look the same as the default: http://cl.ly/J7z3)

The most important part is to make sure you connect the labels to the cell

You need to control-click from the Cell to the label in the Document outline. Here's a picture of what it looks like: http://cl.ly/J7BP

What helped me to understand how to create custom cell, dynamic cells, and static cells is this youtube video: http://www.youtube.com/watch?v=fnzkcV_XUw8

Once you do that, you should be all set. Good luck!