旋转后 UICollectionView 单元格不水平 [英] UICollectionView cells not horizontal after rotation

问题描述

我有一个 UICollectionView 和一个按钮来创建单元格，它应该按照创建的顺序出现(空间允许的情况下，横向和向下分别为 1、2、3、4).文本视图受限于灵活的宽度以填充单元格.单元格的大小取决于设备和旋转，以允许每行 1、2、3 或 4 个单元格，如下所示:

I have a UICollectionView with a button to create cells, which should appear in the order of creation (1,2,3,4 across and down as space permits). The text views are constrained with flexible widths to fill the cell. The size of the cell depends on the device and rotation to allow 1, 2, 3 or 4 cells per row as follows:

func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize
{
    var size = collectionView.bounds.size       // size of collection view

    switch size.width
    {
    case 0...450:
        println(size.width)
        return CGSize(width: (size.width - 10), height: 145)
    case 451..<768:
        println(size.width)
        return CGSize(width: ((size.width - 10) / 2), height: 145)
    case 768:
        println(size.width)
        return CGSize(width: ((size.width - 10) / 3), height: 145)
    default:
        println(size.width)
        return CGSize(width: 248, height: 150)      // in case there is no size
    }
}

将左右插入设置为 0，这种方法有效 - 但前提是我旋转设备并添加一个单元格.详细说明:

With left and right insets set to 0, this sort of works - but only if I rotate the device and add a cell. In detail:

1. 模拟 iPhone 5，如果单元格以纵向方式添加，它们会按预期显示在彼此下方，但是当设备旋转时，单元格保持在垂直列中，而不是每行两个单元格.如果我在横向添加一个单元格，那么这些单元格会每行排列两个单元格，这是正确的(除了必须添加一个单元格才能实现).
2. 模拟 iPad，如果以纵向方式添加单元格，而不是三个，则每行只添加两个单元格，它们之间有空间放置第三个单元格.
3. 继续在 iPad 上，如果设备被旋转，而不是四个，每行只出现三个单元格，它们之间有空间.与 iPhone 类似，如果在横向模式下添加另一个单元格，则每行出现四个单元格，并且如果将设备旋转回纵向，则每行放置三个单元格，这是正确的(除了必须旋转设备，添加一个单元格并将其旋转回来).

我在添加单元格时调用 reloadData，如果我理解正确，我不应该在设备旋转时调用 reload(自动调用).为什么我必须将设备旋转到横向并添加一个单元格才能在两个方向上显示正确的布局?

I am calling reloadData when adding the cells, and if I understand correctly, I should not have to call reload upon device rotation (called automatically). Why do I have to rotate the device to landscape and add a cell for the correct layouts to appear in both orientations?

根据要求，这里是 VC 源代码的精简版本.使用简单的单元格(244*150，文本字段为 228)和页脚中的按钮，这应该会重复问题:

As requested, here is a thinned out version of the source code for the VC. With a simple cell (244*150 with text field 228) and button in the footer, this should repeat the problem:

import UIKit

class CountCollectionViewController: UICollectionViewController, UICollectionViewDelegateFlowLayout
{
private var reuseIdentifier = "CountCell"

var cells = 1

override func viewDidLoad() {
    super.viewDidLoad()
    self.collectionView!.registerClass(UICollectionViewCell.self, forCellWithReuseIdentifier: "Cell")
}

@IBAction func addCount(sender: AnyObject)
{
    cells += 1
    self.collectionView?.reloadData()
}

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

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

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

override func collectionView(collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, atIndexPath indexPath: NSIndexPath) -> UICollectionReusableView
{
    switch kind     // the kind of supplimentary view provided by layout
    {
    case UICollectionElementKindSectionFooter:      // section header was selected in storyboard
        let footerView = collectionView.dequeueReusableSupplementaryViewOfKind(kind, withReuseIdentifier: "CountFooterView", forIndexPath: indexPath) as UICollectionReusableView     // deque and select correct header
        return footerView

    default:
        assert(false, "Unexpected element kind")
    }
}

func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize
{
    var size = collectionView.bounds.size
    switch size.width
    {
    case 0...450:
        return CGSize(width: (size.width - 20), height: 145)
    case 451..<768:
        return CGSize(width: ((size.width - 20) / 2), height: 145)
    case 768:
        return CGSize(width: ((size.width - 20) / 3), height: 145)
    default:
        return CGSize(width: 248, height: 150)
    }
}

private let sectionInsets = UIEdgeInsets(top: 20.0, left: 0, bottom: 50.0, right: 0.0)

func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAtIndex section: Int) -> UIEdgeInsets
{
    return sectionInsets
}

}

推荐答案

数量 33 = 项目数！您可以独立于您的总项目数对其进行调整，以适应屏幕中更多或更少的项目！例如，iPhone 4 上的/(Double(33)) 将在 4 列中容纳 33 个项目，每行容纳 4 个项目！在 iPhone 6 Plus 中，您会看到相同的图片单元格将按 4 列放大！

Number 33 = items count! You can tweak it independently from your total items count to fit more or less items in screen! For example / (Double(33)) on iPhone 4 will fit 33 items in 4 columns and 4 items per row! in iPhone 6 Plus you will see same picture cells will scale up respecting 4 columns!

// ...........returning cell size based on device screen size by calculating square roo

        func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize {

            let deviceSize = UIScreen.mainScreen().bounds.size
            let cellSize = sqrt(Double(deviceSize.width * deviceSize.height) / (Double(33)))

                return CGSize(width: cellSize , height: cellSize)

        }

这篇关于旋转后 UICollectionView 单元格不水平的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！