创建 UICollectionViewCell 时子视图框架不正确 [英] Subview frame is incorrect when creating UICollectionViewCell

问题描述

问题

我创建了一个带有自定义 UICollectionViewCell 的 UICollectionViewController.自定义单元格包含一个大的矩形 UIView(名为 colorView)和一个 UILabel(名为 nameLabel).

I created a UICollectionViewController with a custom UICollectionViewCell. The custom cell contains a large and rectangular UIView (named colorView) and a UILabel (named nameLabel).

当集合首次填充其单元格并打印 colorView.frame 时，打印的帧具有不正确的值.我知道它们是不正确的，因为 colorView 框架比单元格框架本身大，即使 colorView 被正确绘制.

When the collection is first populated with its cells and I print colorView.frame, the printed frames have incorrect values. I know they are incorrect, because the colorView frames are larger than the cell frame themselves, even though the colorView gets drawn correctly.

但是，如果我滚动 collectionView 足以触发对先前创建的单元格的重用，则 colorView.frame 现在具有正确的值！我需要正确的框架，因为我想对 colorView 图层应用圆角，并且我需要正确的 coloView 大小才能做到这一点.顺便说一句，如果您想知道，colorView.bounds 的大小值也与 colorView.frame 相同.

However, if I scroll the collectionView enough to trigger a reuse of a previously created cell, the colorView.frame now has correct values! I need the correct frames because I want to apply rounded corners to the colorView layer and I need the correct coloView size in order to do this. By the way, in case you are wondering, colorView.bounds also has the same wrong size value as the colorView.frame.

问题

为什么创建单元格时帧不正确?

Why are the frames incorrect when creating the cells?

现在是一些代码

这是我的 UICollectionViewCell:

This is my UICollectionViewCell:

class BugCollectionViewCell: UICollectionViewCell {
    @IBOutlet weak var colorView: UIView!
    @IBOutlet weak var nameLabel: UILabel!
}

这是 UICollectionViewController:

and this is the UICollectionViewController:

import UIKit

let reuseIdentifier = "Cell"
let colors = [UIColor.redColor(), UIColor.blueColor(),
              UIColor.greenColor(), UIColor.purpleColor()]
let labels = ["red", "blue", "green", "purple"]

class BugCollectionViewController: UICollectionViewController, UICollectionViewDelegateFlowLayout {
    override func numberOfSectionsInCollectionView(collectionView: UICollectionView) -> Int {
        return 1
    }

    override func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return colors.count
    }

    override func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCellWithReuseIdentifier(reuseIdentifier, forIndexPath: indexPath) as BugCollectionViewCell

        println("ColorView frame: (cell.colorView.frame) Cell frame: (cell.frame)")

        cell.colorView.backgroundColor = colors[indexPath.row]
        cell.nameLabel.text = labels[indexPath.row]

        return cell
    }

    func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize {
        let width = self.collectionView?.frame.width
        let height = self.collectionView?.frame.height
        return CGSizeMake(width!, height!/2)
    }
}

设置集合视图是为了一次垂直显示两个单元格，每个单元格都包含一个涂有颜色的大矩形和一个带有颜色名称的标签.

The collection view is setup in order to show two cells at a time, vertically, each cell containing a large rectangle painted with a color and a label with the color name.

当我刚刚在模拟器上运行上述代码时，我得到以下打印结果:

When I just run the above code on the simulator, I get the following printed result:

ColorView frame: (0.0,0.0,320.0,568.0) Cell frame: (0.0,0.0,375.0,333.5)
ColorView frame: (0.0,0.0,320.0,568.0) Cell frame: (0.0,343.5,375.0,333.5)

这是一个奇怪的结果 - colorView.frame 的高度为 568 磅，而单元格框架只有 333.5 磅高.

It is a weird result - colorView.frame has a height of 568 points, while the cell frame is only 333.5 points tall.

如果我向下拖动 collectionView 并重复使用一个单元格，则会打印以下结果:

If I drag the collectionView down and a cell gets reused, the following result is printed:

ColorView frame: (8.0,8.0,359.0,294.0) Cell frame: (0.0,1030.5,375.0,333.5)
ColorView frame: (8.0,8.0,359.0,294.0) Cell frame: (0.0,343.5,375.0,333.5)

在纠正colorView框架的过程中发生了一些我无法理解的事情.

Something, which I can’t understand, happened along the way that corrects the frame of colorView.

我认为这与单元格是从 Nib 加载的事实有关，因此控制器不使用 init(frame: frame) 初始化程序，而是使用 init(coder: aCoder) 初始化程序，所以只要单元格已创建，它可能带有一些我无法编​​辑的默认框架.

I think it has something to do with the fact that the cell is loaded from the Nib, so instead of using the init(frame: frame) initializer the controller uses the init(coder: aCoder) initializer, so as soon as the cell is created it probably comes with some default frame which I can't edit anyhow.

如果能帮助我了解正在发生的事情，我将不胜感激！

I’ll appreciate any help that allows me to understand what is happening!

我正在使用 Xcode 6.1.1.使用 iOS SDK 8.1.

I am using Xcode 6.1.1. with the iOS SDK 8.1.

推荐答案

您可以通过在自定义 Cell 类中重写 layoutIfNeeded() 来获取单元格的最终帧，如下所示:

You can get the final frames of your cell by overriding layoutIfNeeded() in your custom Cell class like this:

override func layoutIfNeeded() {
    super.layoutIfNeeded()
    self.subView.layer.cornerRadius = self.subView.bounds.width / 2
}

然后在你的 UICollectionView 数据源方法 cellForRowAtIndexPath: 中这样做:

then in your UICollectionView data Source method cellForRowAtIndexPath: do this:

let cell = collectionView.dequeueReusableCellWithReuseIdentifier("Cell", forIndexPath: indexPath) as! CustomCollectionViewCell
cell.setNeedsLayout()
cell.layoutIfNeeded()

这篇关于创建 UICollectionViewCell 时子视图框架不正确的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！