Search code examples
iosswiftuitableviewuinib

How to resize custom UITableViewCell nib file to fit tableView?


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.

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!


Solution

  • 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:

    enter image description 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
        }
    }