Resizable TableView Cell

Question

So I have been trying to create a generic chat bubble-ish look with a resizable view and label inside a UITableView cell. Things were working well until I tried to add in the resizable feature. It cuts off just a bit at the bottom (or does not give any margin), and I have not worked with completely dynamic cells like this before so I am not sure how to fix this. I tried adding a 20px buffer but it did not help. I appreciate the help! (Code below)

import QuartzCore
import UIKit

class ViewController: UIViewController, UITableViewDataSource, UITableViewDelegate {

    @IBOutlet weak var tableView: UITableView!

    var listOfStrings = [String] ()

    override func viewDidLoad() {
        super.viewDidLoad()

        // Do any additional setup after loading the view, typically from a nib.

     // When I Uncomment the 2 lines below, the cell cuts off and only displays a little bit of the blue view.
  //  self.tableView.rowHeight = UITableViewAutomaticDimension
  //         self.tableView.estimatedRowHeight = 75
        listOfStrings.append("Switch, Button, Segmented Control, Slider, Textfield")
        listOfStrings.append("Switch, Button, Segmented Control, Slider, Textfield")
        listOfStrings.append("Switch, Button, Segmented Control, Slider, Textfield")
    }


    func tableView(tableView: UITableView, didSelectRowAtIndexPath indexPath: NSIndexPath) {
        print(indexPath.row)
    }

    func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {

        let cell = self.tableView.dequeueReusableCellWithIdentifier("someCell") as! SomeTableViewCell

        cell.contentView.viewWithTag(0)!.backgroundColor = UIColor.clearColor()
        let size = cell.layer.bounds
        let tableSize = self.tableView.layer.bounds
        let viewCGR = CGRect(x: size.minX, y: size.height/2, width: tableSize.width, height: size.height/2)
        let view: UIView = UIView(frame: viewCGR)

        let labelCGR = CGRect(x: 0, y: 0, width: viewCGR.width, height: viewCGR.height)
        let label: UILabel = UILabel(frame: labelCGR)
        label.numberOfLines = 0

        label.preferredMaxLayoutWidth = CGRectGetWidth(tableView.bounds)


        label.textAlignment = NSTextAlignment.Center
        label.text = listOfStrings[indexPath.row]
        label.sizeToFit()
        self.tableView.updateConstraints()


        let newViewCGR = CGRect(x: viewCGR.minX, y: viewCGR.minY, width: label.frame.width+20, height: label.frame.height+20)
        view.frame = newViewCGR
        view.sizeToFit()
        label.textColor = UIColor.blackColor()
         label.center.x = view.center.x
       //  self.tableView.updateConstraints()
        view.addSubview(label)
        self.tableView.updateConstraints()
        view.backgroundColor = UIColor.blueColor()
        view.layer.cornerRadius = 6
        cell.addSubview(view)
         self.tableView.updateConstraints()
        return cell

    }

    func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return listOfStrings.count
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }


}

Btw I am not using autolayout + constraints to get the functionality of having the bubble be able to appear on the left or right (depending on incoming or outgoing).

[Set the height](https://www.hackingwithswift.com/read/32/2/automatically-resizing-uitableviewcells-with-dynamic-type-and-ns) then reload that row. [`reloadRowsAtIndexPaths:`](http://stackoverflow.com/questions/3069339/how-to-dynamically-resize-uitableviewcell-height) — twodayslate, Aug 22 '16 at 01:59
try call `cell.layoutIfNeeded()` before `return cell` and use `UITableViewAutomaticDimension ` — Tj3n, Aug 22 '16 at 02:00
use heightForRowAtIndexPath: calculate the text height dynamically and change the height of the cell according to it — Tyson Vignesh, Aug 22 '16 at 02:00
@twodayslate where do I reload the row? It seems like most places would result in an infinite loop — Ryan Cocuzzo, Aug 22 '16 at 02:08
@TysonVignesh how do you recommend I calculate the height dynamically? — Ryan Cocuzzo, Aug 22 '16 at 02:14
@twodayslate that works for a millisecond then it shrinks down to its smaller size before my eyes — Ryan Cocuzzo, Aug 22 '16 at 02:19
I have read all answers and tried all solutions and none have landed, I really appreciate the support though, do you guys have any other ideas? — Ryan Cocuzzo, Aug 22 '16 at 02:39
@Ryan calculate the height of the tableview cell based on the width of the cell and the text using boundingRectWithSize and set the height. — Tyson Vignesh, Aug 22 '16 at 04:22

score 0 · Answer 1 · edited May 23 '17 at 12:01

0

After the new API by apple you don't calculate height. You just use autolayout to do the work. I think this link could help you a lot. By the way there is a nice tutorial Self-sizing Table View Cells

edited May 23 '17 at 12:01

Community

1
1

answered Aug 22 '16 at 02:58

Priyansh

1,163
11
28

This way does not allow you to change the location of the view or the label. This becomes a problem when I want to change the side that the view is on – Ryan Cocuzzo Aug 22 '16 at 03:02
You know how incoming messages appear on the left and outgoing messages appear on the right? Constraints make it so you cannot do that – Ryan Cocuzzo Aug 22 '16 at 03:03
try giving UILabel height >0. Change the height constrain from = to > – Priyansh Aug 22 '16 at 03:05
I think this is the right way. If you are trying to make your cell dynamic. It does't include coding and you can make necessary changes right away in storyboard. Let me know if you found a better way other than these two. – Priyansh Aug 22 '16 at 03:08
I will try it this way in the morning, if this is a simpler implementation than it seems to me right now I will Up and Verify your answer. If it doesnt, ill comment again and we will go from there hah – Ryan Cocuzzo Aug 22 '16 at 03:15

score 0 · Answer 2 · answered Aug 22 '16 at 03:56

0

you don't have to calculate height row for height cell . you add this code in viewDidLoad()

    tableView.rowHeight = UITableViewAutomaticDimension
    tableView.estimatedRowHeight = 50

answered Aug 22 '16 at 03:56

Farhad Faramarzi

425
5
15

score 0 · Answer 3 · answered Aug 22 '16 at 04:27

@Ryan find the height of the cell with the text using following method,

  CGRect textRect =
  [attributedText boundingRectWithSize:CGSizeMake(cellWidth, CGFLOAT_MAX)
  options:(NSStringDrawingUsesLineFragmentOrigin|NSStringDrawingUsesFontLeading)
  context:nil];

call this method from

heightForRowAtIndexPath:

and set the height of the cell here as textRect.size.height

Resizable TableView Cell

3 Answers3