UILabel dynamic height in UITableviewCell acts erratically

advertisements

Hopefully these screenshots help explain my issue - This is how my uitablecell looks like on first load(notice the title label in the cell):

If I scroll below and come back up, it becomes right (no longer ellipsisized, the way it should have been on first load):

I am calculating the dynamic labelsize and applying it as a constraint. Here is the relevant code (the following is written in ruby as part of an IOS rubymotion project ):

  def tableView(tableView, cellForRowAtIndexPath: indexPath)
    object = @posts[indexPath.row]
    cellIdentifier = "DayCell"
    cell = @day_table_view.dequeueReusableCellWithIdentifier(cellIdentifier)
    unless cell
      cell = PostCellView.alloc.initWithStyle(UITableViewCellStyleDefault, reuseIdentifier: cellIdentifier)
      cell.contentView.apply_constraints
    end
    cell
  end

  def tableView(tableView,willDisplayCell: cell, forRowAtIndexPath:indexPath)
    object = @posts[indexPath.row]
    cell.fill(object)
  end

post_cell_view.rb # fill method

def fill(post)
    self.post = post
    @title_label.text = post.title

    @reason_image_view.setImageWithURL(NSURL.URLWithString(post.reason.icon),
                   placeholderImage: nil,
                   completed: lambda{|image,error,cacheType|
                      # if cacheType == 0
                        @reason_image_view.alpha = 0
                        UIView.animateWithDuration(0.25,
                          animations: lambda{
                              @reason_image_view.alpha = 1
                            })
                      # end
                    })

    expectedTitleLabelSize = @title_label.text.sizeWithFont(@title_label.font, constrainedToSize:[App.window.frame.size.width - 50, Float::MAX], lineBreakMode: NSLineBreakByWordWrapping)
    @title_label.addConstraint Teacup::Constraint.new(@title_label, :height).equals(expectedTitleLabelSize.height).nslayoutconstraint

    @post_picture_image_view.setImageWithURL(NSURL.URLWithString(post.image.file_medium),
                   placeholderImage: nil,
                   completed: lambda{|image,error,cacheType|
                      # if cacheType == 0
                        @post_picture_image_view.alpha = 0
                        UIView.animateWithDuration(0.25,
                          animations: lambda{
                              @post_picture_image_view.alpha = 1
                            })
                      # end
                  })
    @post_picture_image_view.contentMode = UIViewContentModeScaleAspectFill

    if post.cost.blank?
      @price_flag_image.alpha = 0
    else
      @price_flag_image.alpha = 1
      @price_label.text = post.cost
    end

    @location_label.text = post.location.name
    @distance_label.text = post.location.distance.to_s

  end

I am guessing the issue is I am not applying the constraints at the right time? Please enlighten me stackoverflow gurus!


Here's how I have been handling variable-height labels:

  • set lineBreakMode to NSLineBreakByWordWrapping
  • set numberOfLines to 0
  • set a preferred maximum layout width via setPreferredMaxLayoutWidth:
  • setup auto layout constraints as you normally would

Here's a simplified gist that demonstrates the setup of a UITableView and UITableViewCell subclass:

https://gist.github.com/dblandin/6303425

and a zip if you just want to download and run it:

https://dl.dropboxusercontent.com/u/1096930/dynamic-label.zip

I also went a step further and showed you how to setup variable-height UITableViewCells.

From your screenshot, it seems like all cells are set to a fixed height.

Hope this helps! Let me know if you have any further questions.