UICollectionView 单元格旋转后不水平

2024-05-06

我有一个 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 时,这种方法有效 - 但前提是我旋转设备并添加一个单元格。详细地:

  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
}

}


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

        }
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

UICollectionView 单元格旋转后不水平 的相关文章

随机推荐