滚动屏幕时,UICollectionViewCell的大小会有所不同

时间:2016-07-13 23:18:28

标签: ios swift uicollectionviewcell

我创建了一个UICollectionViewController,我希望它在每一行中显示三个单元格。每个单元格的宽度应为整个屏幕的1/3。但是,当我第一次进入UICollectionViewController场景时,所有单元格都非常小。当我滚动屏幕时,一些单元格变成具有预期大小的较大单元格。 enter image description here enter image description here enter image description here

我的部分代码:

class imageCollectionViewController: UICollectionViewController {
private let reuseIdentifier = "photoCell"
var photos:albumCellModel?
override func viewDidLoad() {
    super.viewDidLoad()
    navigationController?.toolbarHidden = true

    if let layout = collectionView!.collectionViewLayout as? UICollectionViewFlowLayout {
        let itemWidth = view.bounds.width / 3.0
        let itemHeight = layout.itemSize.height
        layout.itemSize = CGSize(width: itemWidth, height: itemHeight)
        layout.invalidateLayout()
    }
}
override func numberOfSectionsInCollectionView(collectionView: UICollectionView) -> Int {

    return 1
}
override func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
    if let photos = photos
    {
        return photos.photoSet.count
    }
    return 0
}

override func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
    let cell = collectionView.dequeueReusableCellWithReuseIdentifier("photoCell", forIndexPath: indexPath) as! imageCollectionViewCell
    cell.imageView.image = photos?.photoSet[indexPath.row].image
    return cell
}

2 个答案:

答案 0 :(得分:1)

我的上一个项目确实遇到了同样的问题。我设法通过使用此库来解决问题。 Snapkit。在pod中导入库并在cellForItemAtIndexPath

中实现它
func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {

let cell = collectionView.dequeueReusableCellWithReuseIdentifier(cellIdentifier, forIndexPath: indexPath) as! TestCell
let width = self.view.bounds.size.width/2 - 10
    cell.imageView.snp_makeConstraints { (make) -> Void in
        make.width.equalTo(width)
        make.height.equalTo(3*width/2)
    }

return cell

}

只在故事板中的imageView上放置顶部和前导约束。希望它有所帮助。

答案 1 :(得分:0)

尝试通过更改代码来使用UICollectionViewDelegateFlowLayout委托:

class imageCollectionViewController: UICollectionViewController, UICollectionViewDelegateFlowLayout {

    private let reuseIdentifier = "photoCell"
    var photos:albumCellModel?
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        navigationController?.toolbarHidden = true
    }

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

    override func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        guard let photos = photos else { return 0}
            
        return photos.photoSet.count
    }

    override func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCellWithReuseIdentifier("photoCell", forIndexPath: indexPath) as! imageCollectionViewCell
        cell.imageView.image = photos?.photoSet[indexPath.row].image
        return cell
    }

    // New delegate method
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        let numberOfItemsPerRow: CGFloat = 3
        let spacingBetweenCells: CGFloat = 0
        
        let totalSpacing = (2 * spacingBetweenCells) + ((numberOfItemsPerRow - 1) * spacingBetweenCells)
        
        let width = (collectionView.bounds.width - totalSpacing) / numberOfItemsPerRow
        let height: CGFloat = 200 // Put the value you desire
        
        return CGSize(width: width, height: height)
    }