在 iOS 上创建 Nx2 集合视图

Posted 2023-03-14

【中文标题】在 iOS 上创建 Nx2 集合视图

【英文标题】：Creating a Nx2 collection view on iOS

【发布时间】：2015-11-22 11:15:54

【问题描述】：

我正在尝试创建一个 Nx2（n 行，2 列）集合视图，其中单元格大小会动态调整以完全适合屏幕。

所以我的故事板中有以下控制器：

这是集合视图的约束：

这是各自的视图控制器代码：

import UIKit

class SREventAttendeesCollectionViewController: UIViewController, UICollectionViewDataSource, UICollectionViewDelegate 

    var screenSize: CGRect!
    var screenWidth: CGFloat!
    var screenHeight: CGFloat!


    @IBOutlet weak var collectionView: UICollectionView!


    override func viewDidLoad() 
        super.viewDidLoad()

        collectionView.delegate = self
        collectionView.dataSource = self

        screenSize = UIScreen.mainScreen().bounds
        screenWidth = screenSize.width
        screenHeight = screenSize.height
        let collectionViewWidth = (self.collectionView.frame.size.width/2)

        let layout: UICollectionViewFlowLayout = UICollectionViewFlowLayout()
        layout.sectionInset = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0)
        layout.itemSize = CGSize(width: collectionViewWidth, height: screenHeight/3)
        collectionView.setCollectionViewLayout(layout, animated: true)

    

    func numberOfSectionsInCollectionView(collectionView: UICollectionView) -> Int 
        return 2
    

    func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int 
        return 2
    

    func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell 
        let cell = collectionView.dequeueReusableCellWithReuseIdentifier("CollectionCell", forIndexPath: indexPath) as! SRCollectionViewCell

        // Configure the cell
        let collectionViewWidth = (self.collectionView.frame.size.width/2)
        print(collectionViewWidth)
        cell.frame.size.width = collectionViewWidth
        cell.nameAgeLabel.frame.size.width = collectionViewWidth


        //cell.pictureImageView.image = myImage
        return cell
    

遗憾的是，这导致以下情况：

有人知道我在这里缺少什么吗？

【问题讨论】：

您的应用适用于所有 iphone 或某些特定手机。

这必须适用于所有手机

只是减少你的收藏的宽度并检查........

【参考方案1】：

当然，首先您的代码在集合视图流布局方面存在一些问题。

1) 你不需要像 Objective C 中那样指定 UICollectionViewFlowLayout 的类型。Swift 可以自动匹配。相反，您应该向下转换为所需的类型（我稍后会谈到）

2) 我不会创建一个新的布局对象并分配它。相反，我只会影响当前布局对象（请参阅下面的示例代码）

3) 您没有考虑 minimumInterItemSpacing 值，这就是您的单元格不适合每行 2 个的原因。

我将对您的集合视图流布局代码的实现方式进行一些更改。这就是我将如何实现这一点（我没有编译这个，所以可能会有一些小错误）：

let screenWidth = collectionView.bounds.size.width;

if let layout = collectionView.collectionViewLayout as? UICollectionViewFlowLayout 
   layout.sectionInset = UIEdgeInsetsMake(0,0,0,0)
   layout.minimumInteritemSpacing = 0
   layout.minimumLineSpacing = 0

   let avaliableWidth = screenWidth - (layout.sectionInset.left + layout.sectionInset.right + layout.minimumInteritemSpacing)

   let itemWidth = avaliableWidth / 2

   // You can set the value of 50 to whatever your height is
   layout.itemSize = CGMake(itemWidth, 50)