How to resize custom UITableViewCell nib file to fit tableView?

Question

My app currently loads like this. As you can see this is not ideal b/c the cell does not fill the entire cell. Also if you notice on the very left of every cell, the white separator line stops before the end of the cell.

I'm using a nib file DayofWeekSpendingTableViewCell.xib to customize my tableview cell.

• Dimensions of UILabel dayOfWeek in nib file
• Dimensions of UILabel totalAmountSpent in nib file

I have a UITableViewController SummaryTableViewController where I load the nib file. In the method tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) I've attempted to set the frame of the two labels so they would take up the width of the view, but that doesn't help b/c my app still loads like this.

class SummaryTableViewController: UITableViewController {    
    override func viewDidLoad() {
        super.viewDidLoad()

        dayOfWeek = [ .Mon, .Tue, .Wed, .Thu, .Fri, .Sat, .Sun]
        totalSpentPerDay = [0, 7.27, 0, 0, 39, 0, 0]

        // Create a nib for reusing
        let nib = UINib(nibName: "DayofWeekSpendingTableViewCell", bundle: nil)
        tableView.registerNib(nib, forCellReuseIdentifier: "nibCell")

        self.tableView.separatorColor = UIColor.whiteColor()
    }

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

        // Configure the cell...
        let cell = tableView.dequeueReusableCellWithIdentifier("nibCell", forIndexPath: indexPath) as! DayOfWeekTableViewCell
        let day = dayOfWeek[indexPath.row]

        let height = CGFloat(55)
        let dayOfWeekWidth = CGFloat(80)
        cell.dayOfWeek.text = day.rawValue.uppercaseString
        cell.dayOfWeek.frame = CGRectMake(0, 0, dayOfWeekWidth, height)
        cell.dayOfWeek.backgroundColor = colorOfDay[day]

        cell.totalAmountSpent.text = "$\(totalSpentPerDay[indexPath.row])"
        cell.totalAmountSpent.frame = CGRectMake(cell.dayOfWeek.frame.maxX + 1, 0, view.bounds.width - dayOfWeekWidth, height)
        cell.totalAmountSpent.backgroundColor = colorOfDay[day]

        return cell
    }
}

If anyone could tell me how I could make the custom UITableViewCell nib file to fit the view I would be very grateful!

Answer 1

So, a couple of things I see. Firstly, it looks like your cell nib could use some AutoLayout constraints. Your nib is probably something like a 320px width. At run time, your cell's content view is actually stretching out to fill the new width of a larger device, but the green views that you placed are just staying put in their 320px configuration. You could test this by changing the color of the content view and seeing that color appear in the simulator. I sorta reproduced your cell here:

The pink view has a fixed width and is placed up against the top, left, and bottom of the content view. The blue view is 4 points to the right of the pink view to give that white margin in the middle. It is placed up against the top, right, and bottom of the content view. So as the cell's content view resizes, the AutoLayout constraints will stretch the blue view such that its right edge stays flush against the right edge of the content view.

For the edge insets, firstly set the edge insets on the table and on each cell. You can do that in the storyboard/nib or like this in code:

class ViewController: UITableViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        let nib = UINib(nibName: "yubnub", bundle: nil)
        tableView.registerNib(nib, forCellReuseIdentifier: "yub")

        tableView.separatorInset = UIEdgeInsets.zero
        tableView.layoutMargins = UIEdgeInsets.zero
    }


    override func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {

        return 10
    }

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

        return tableView.dequeueReusableCellWithIdentifier("yub", forIndexPath: indexPath)
    }

    override func tableView(tableView: UITableView, willDisplayCell cell: UITableViewCell, forRowAtIndexPath indexPath: NSIndexPath) {

        cell.layoutMargins = UIEdgeInsets.zero
    }
}

Answer 2

Apply following solutions,

1) First give full autoresizing constraints to your tableview from the size inspector in storyboard.

2) Now move to the your nib file and select tableViewcell and give full constraints to it.

3) Now select left side label and give it left & up constraints to it and give right, up and middle constraints to right side label.

Now don't forget to implement heightForRowatIndexPath delegate method in your view controller and mention same height of your nib file which is in your custom xib.

Answer 3

I Had the same mistake, and it was because in storyboard the content of my tableView was Static Cell. I change it to Dynamic Prototype and it solved the problem.