创建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（编码器：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屋！