如何调整自定义 UITableViewCell nib 文件的大小以适合 tableView? [英] How to resize custom UITableViewCell nib file to fit tableView?

问题描述

我的应用当前加载的方式类似于

粉红色视图具有固定宽度，并且位于内容视图的顶部、左侧和底部.蓝色视图位于粉红色视图右侧 4 个点处，以在中间提供白色边缘.它位于内容视图的顶部、右侧和底部.因此，当单元格的内容视图调整大小时，自动布局约束将拉伸蓝色视图，使其右边缘与内容视图的右边缘保持齐平.

对于边缘插入，首先在表格上设置边缘插入和在每个单元格上.您可以在故事板/笔尖中执行此操作或在代码中执行此操作:

class ViewController: UITableViewController {覆盖 func viewDidLoad() {super.viewDidLoad()让 nib = UINib(nibName: "yubnub", bundle: nil)tableView.registerNib(nib, forCellReuseIdentifier: "yub")tableView.separatorInset = UIEdgeInsets.zerotableView.layoutMargins = UIEdgeInsets.zero}覆盖 func tableView(tableView: UITableView, numberOfRowsInSection 部分: Int) ->整数{返回 10}覆盖 func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) ->UITableViewCell {return tableView.dequeueReusableCellWithIdentifier("yub", forIndexPath: indexPath)}覆盖 func tableView(tableView: UITableView, willDisplayCell cell: UITableViewCell, forRowAtIndexPath indexPath: NSIndexPath) {cell.layoutMargins = UIEdgeInsets.zero}}

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!

解决方案

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
    }
}

这篇关于如何调整自定义 UITableViewCell nib 文件的大小以适合 tableView?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！