旋转后UICollectionView单元格不是水平的

DrW*_*hat 1 xcode uicollectionview swift

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

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
    }
}
Run Code Online (Sandbox Code Playgroud)

左右插图设置为0,这种方式有效 - 但只有在我旋转设备并添加单元格时才有效.详细地:

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

布局问题

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

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

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
}
Run Code Online (Sandbox Code Playgroud)

}

Rus*_*uso 5

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

// ...........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)

        }
Run Code Online (Sandbox Code Playgroud)