如何调整自定义 UITableViewCell nib 文件的大小以适合 tableView？

Question

我的应用当前加载类似于this。如您所见，这不是理想的 b/c 单元格不会填满整个单元格。此外，如果您注意到每个单元格的最左侧，白色分隔线会在单元格末尾之前停止。

我正在使用 nib 文件 DayofWeekSpendingTableViewCell.xib 来自定义我的 tableview 单元格。

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

我有一个UITableViewController SummaryTableViewController，我在其中加载 nib 文件。在 tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) 方法中，我尝试设置两个标签的框架，以便它们占用视图的宽度，但这无济于事，因为我的应用程序仍然像 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
    }
}

如果有人能告诉我如何制作自定义 UITableViewCell nib 文件以适应视图，我将不胜感激！

Answer 1

所以，我看到了几件事。首先，看起来您的单元格笔尖可以使用一些 AutoLayout 约束。你的笔尖大概是 320px 的宽度。在运行时，您的单元格的内容视图实际上会伸展以填充更大设备的新宽度，但您放置的绿色视图只是保持在它们的 320px 配置中。您可以通过更改内容视图的颜色并看到该颜色出现在模拟器中来对此进行测试。我在这里复制了你的单元格：

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

对于边插图，首先在表格上设置边插图和在每个单元格上。您可以在故事板/笔尖中执行此操作，也可以在代码中这样做：

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

应用以下解决方案，

1) 首先从情节提要中的大小检查器为您的 tableview 提供完整的自动调整大小约束。

2) 现在移动到您的 nib 文件并选择 tableViewcell 并为其提供完整的约束。

3) 现在选择左侧标签并为其赋予左和上约束，并为右侧标签赋予右、上和中间约束。

现在不要忘记在您的视图控制器中实现 heightForRowatIndexPath 委托方法，并在您的自定义 xib 中提及您的 nib 文件的相同高度。

Answer 3

我有同样的错误，这是因为在故事板中我的 tableView 的内容是静态单元格。我将其更改为动态原型，它解决了问题。