旋转后 UICollectionView 单元格不水平

Posted 2023-03-14

【中文标题】旋转后 UICollectionView 单元格不水平

【英文标题】：UICollectionView cells not horizontal after rotation

【发布时间】：2015-01-22 11:58:50

【问题描述】：

我有一个带有按钮的 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
    

将左右插图设置为 0 时，这种方法有效 - 但前提是我旋转设备并添加一个单元格。详细：

模拟 iPhone 5，如果以纵向添加单元格，它们按预期显示在彼此下方，但是当设备旋转时，单元格保持在垂直列中，而不是每行两个单元格。如果我在横向添加一个单元格，这些单元格然后每行安排两个单元格，这是正确的（除了必须添加一个单元格来实现它）。 模拟 iPad，如果纵向添加单元格，而不是三个，则每行仅添加两个单元格，并在它们之间留出第三个单元格的空间。 在 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

【参考方案1】：

数字 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)

        

【讨论】：

嗨，Ruso，不错的代码，可以最大化方形单元格的大小，然后在添加更多单元格时缩小它们。对于给定的设备和旋转，我的单元格的大小是恒定的。我的问题是尺寸设置似乎没有正确应用，除非我在设备处于横向位置时添加单元格！

【参考方案2】：

你是不是把节数设置为1，如果没有设置为1，再试一次。

【讨论】：

您能否提供源代码并解释一下为什么会这样？

是的，第 1 节已指定。我在原帖底部附加了完整的 VC 代码。