Auto Adjust Custom Uitableviewcell and Label in It to the Text

auto adjust custom UITableViewCell and Label in it to the text

You need to use self sizing cells.

tableView.estimatedRowHeight = 100
tableView.rowHeight = UITableViewAutomaticDimension

In your storyboard or xib you have to make sure that you set proper constraints in your cells.
Do not set a predefined height constraint in your label. Just make sure you give top and bottom constraints. If you are not sure about the text , you can also give a minimum height constraint to the label.

How to support auto resizing UITableViewCell with a UILabel in it

Here is what you need to do:

  1. Need to use auto layout in your cell and set up appropriate constraints for UILabel. Since we want to resize the UILabel to fit the text set to it, we will set the number of lines value to 0. And then set the leading, trailing, bottom and top constraints to the UILabel. Please see screenshots here:

    Lines as 0
    Sample Image

  2. In your Table View controller > viewDidLoad call these two lines:

      tableView.estimatedRowHeight = 50.0  //Give an approximation here
    tableView.rowHeight = UITableViewAutomaticDimension

    and also implement delegate method:

     override func tableView(tableView: UITableView, heightForRowAtIndexPath indexPath: NSIndexPath) -> CGFloat{
    return UITableViewAutomaticDimension
    }

How I can make a custom UITableViewCell with 2 label so if the text of a label is empty the other fills the space?

OK, answer version 1.1. This time we do this:

  1. Add your top titleLabel: Set a vertical constraint in auto layout to the superview. Go to your size inspector and change the constant to -15 (which will slide it up). Set another constraint to the top of the view to whatever you want for padding. Set the priority on that constraint to 900.

  2. Now control drag from the vertical constraint of tltleLabel to the interface of your .m file to create an outlet for the constraint.

Vertical constraint in top label


  1. Add your bottom subtitleLabel: Set a vertical constraint to the superview with a multiplier of 1.5 (or whatever you need to make it look OK). Don't add any constraints that show a relationship with the top label.

  2. In your code, if you have a subtitle, then just fill your labels and you’re good. If you don’t have a subtitle, then set the subtitle to hidden, and change the constant value of your titleLabel vertical constraint to 0 so it is centered. Q.E.D.

Here's the new code for the CustomCell class. Should have done this the first time around. 100% easier than the first solution I did (I was hopped-up on coffee). Hope this works for you.

//  CustomCell.m

#import "CustomCell.h"

@interface CustomCell()

//IBOutlet to custom .xib file of UITableViewCell file
@property (weak, nonatomic) IBOutlet UILabel *titleLabel;
@property (weak, nonatomic) IBOutlet UILabel *subtitleLabel;

//This is the new outlet to the contraint.
@property (weak, nonatomic) IBOutlet NSLayoutConstraint *titleLabelVerticalConstraint;

@end

@implementation CustomCell

+ (NSString *)nibName
{
return @"CustomCell";
}

+ (NSString *)resuseIdentifier
{
return @"CustomCellReuseIdentifier";
}

- (void)setTitle:(NSString *)title
{
_title = title;
self.titleLabel.text = self.title;
}

- (void)setSubTitle:(NSString *)subTitle
{
_subTitle = subTitle;
self.subtitleLabel.text = self.subTitle;
}

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

//1. If no subtitle, override current constraint
if (!self.subTitle) {
self.subtitleLabel.hidden = YES;
self.titleLabelVerticalConstraint.constant = 0;
}
}
@end

Sample Image

Resize UILabel to fit text inside custom UITableViewCell regardless of width

Have you tried unchecking auto layout? This will remove the unnecessary (mostly unhelpful) Constraints.



Related Topics



Leave a reply



Submit