【问题标题】:UICollectionViewCell subviews not sized correctlyUICollectionViewCell 子视图的大小不正确
【发布时间】:2016-05-22 23:54:20
【问题描述】:

我在另一个视图的容器视图中有一个 CollectionView(子类 CollectionViewController)。 CollectionViewCells 是在 Interface Builder 中定义的,并且包含一个带有更多子视图的 UIView。

我的收藏视图包含 7 个部分,每个部分 1 个项目。这些部分具有定义的插图和大小(通过 CollectionViewDelegateFlowLayout)。每个单元格应填充集合视图的大小,不包括插图。

问题似乎是单元格内的视图未正确呈现。使用约束将其设置为固定到每一侧,但这似乎不起作用。

我尝试记录单元格本身的宽度和高度与单元格内的视图。当我滚动浏览 collectionView 时,所有奇怪的单元格都显示内容的大小远小于单元格的大小。这也适用于第一个偶数单元格,但仅在我滚动到第二个偶数单元格之前。由于这种大小差异,单元格的子视图根本不呈现。ui

我的 IB 设置:

CollectionViewController:

// MARK: CollectionViewController

class DayViewController: UICollectionViewController {

    // MARK: Properties

    private let reuseIdentifier = "DayCell"

    // MARK: CollectionViewDataSource

    override func numberOfSectionsInCollectionView(collectionView: UICollectionView) -> Int {
        return 7
    }

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

    override func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCellWithReuseIdentifier(reuseIdentifier, forIndexPath: indexPath) as! DayViewCell
        NSLog("%f — %f", cell.bounds.width, cell.content.bounds.width)
        return cell
    }
}

// MARK: CollectionViewDelegateFlowLayout

extension DayViewController : UICollectionViewDelegateFlowLayout {
    func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize {
        // return CGSize(width: collectionView.bounds.width - 40.0, height: collectionView.bounds.height - 40.0)
        return CGSize(width: collectionView.bounds.width - 40.0, height: collectionView.bounds.height - 40.0)
    }

    func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAtIndex section: Int) -> UIEdgeInsets {
        return UIEdgeInsets(top: 20.0, left: 20.0, bottom: 20.0, right: 20.0)
    }
}

CollectionViewCell:

class DayViewCell: UICollectionViewCell {
    override var bounds: CGRect {
        didSet {
            contentView.frame = bounds
        }
    }

    @IBOutlet weak var content: UIView!
    @IBOutlet weak var progress: UIView!
    @IBOutlet weak var rank: UILabel!
    @IBOutlet weak var remainingRep: UILabel!

    override func drawRect(rect: CGRect) {
        super.drawRect(rect)

        layer.cornerRadius = 5

        layer.shadowOffset = CGSize(width: 0, height: 2)
        layer.shadowOpacity = 0.5
        layer.shadowColor = UIColor.blackColor().CGColor
        layer.shadowRadius = 5

        layer.masksToBounds = false
        clipsToBounds = false
    }

    override func layoutSubviews() {
        super.layoutSubviews()

        content.layer.cornerRadius = 5
        content.clipsToBounds = true

        progress.frame = CGRect(x: 0, y: 0, width: 100, height: 22)
    }
}

正在运行:(第一次渲染时奇数单元格/偶数单元格/第二次渲染时偶数单元格)

【问题讨论】:

    标签: ios swift uicollectionview uistoryboard uicollectionviewcell


    【解决方案1】:

    感谢您提供源代码。一些想法:

    您似乎在搞乱自动布局大小类。我不确定你是故意这样做的。

    选择容器视图,然后选择属性检查器。在底部,您会看到一些复选框。这表明您只为某些尺寸类别设置了自动布局设置。

    进入文件检查器并禁用大小类。

    你会注意到事情开始起作用了。

    如果您只是为 iPhone(而不是 iPad)开发并且只是纵向,您可能应该只禁用尺寸类。如果你想为其他东西设计,学习尺寸等级可能会有所帮助。

    https://developer.apple.com/library/ios/recipes/xcode_help-IB_adaptive_sizes/chapters/AboutAdaptiveSizeDesign.html

    【讨论】:

      【解决方案2】:

      您提到UICollectionViewController 在容器视图中。它是否设置正确,以便获得所有预期的UIViewController 调用,例如viewWillAppear()

      如果您可以发布一个演示问题的示例项目,我很乐意尝试调试它。

      对您在此处发布的代码的一些想法:

      • 在 DayViewCell 代码中,被覆盖是极不寻常的 bounds 设置框架。这让我很担心。

      • drawRect() 不是设置阴影和角落的地方
        半径。这应该在init(frame:) 和/或init?(coder:) 中完成。 在drawRect() 中执行此操作很昂贵,并且可能会影响您的帧速率 滚动时。

      • 我还会将您在layoutSubviews() 中的所有内容移至
        init 方法。分别运行该代码没有任何好处
        视图布局的时间。

      【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2013-04-16
      • 1970-01-01
      • 1970-01-01
      • 2016-03-06
      相关资源
      最近更新 更多