如何将集合视图单元格设置为所有屏幕的相等行单元格

Posted 2023-03-13

【中文标题】如何将集合视图单元格设置为所有屏幕的相等行单元格

【英文标题】：how to set collection view cell as equal row cell for all screen

【发布时间】：2016-03-08 09:50:18

【问题描述】：

我正在使用 swift 2.o 集合视图。因为每件事都运行良好。但是当我在不同的屏幕上运行时，每个单元格之间的宽度差距是不同的。我需要在集合视图的每一行中三个单元格，集合视图中的所有单元格的左、右、上、下间隔为 8 px。而且我还需要将单元格设置为角半径。我需要像下图： [![在此处输入图片描述][1]][1]

但是当我在 5s 屏幕上运行时，我会变成这样，而对于 6 屏幕，就像第二张图片一样：

[![在此处输入图片描述][2]][2]

iPhone 6：

[![在此处输入图片描述][3]][3]

看到 left, right, bottom , top 之间的差距不像我的第一张图片那样均匀。我需要像我的第一张照片一样。

我在情节提要中将单元格的最小行间距设置为 6。但我无法像我的第一张图片一样。

请帮帮我。

我的 popvc.swift ：

import UIKit

class popVC: UIViewController, UICollectionViewDataSource, UICollectionViewDelegate 

    var tableData: [String] = ["RESTAURANTS", "BANKS", "COFFEE","PIZZA", "HOTELS", "TAXI", "RESTAURANTS", "BANKS","COFFEE","PIZZA", "HOTELS", "TAXI","RESTAURANTS", "BANKS", "COFFEE","PIZZA", "HOTELS", "TAXI"]
    var tableImages: [String] = ["img1.png", "img2.png", "img3.png", "img4.png", "img5.png", "img6.png", "img7.png", "img8.png", "img9.png", "img10.png", "img11.png", "img11.png", "img1.png", "img2.png", "img3.png", "img4.png", "img5.png", "img6.png"]

    override func viewDidLoad() 
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
    

    func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int 
        return tableData.count
    

    func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell 
        let cell: colvwCell = collectionView.dequeueReusableCellWithReuseIdentifier("Cell", forIndexPath: indexPath) as! colvwCell
        cell.lblCell.text = tableData[indexPath.row]
        cell.imgCell.image = UIImage(named: tableImages[indexPath.row])
        return cell
    

    func collectionView(collectionView: UICollectionView, didSelectItemAtIndexPath indexPath: NSIndexPath) 
        print("Cell \(indexPath.row) selected")
    


    override func didReceiveMemoryWarning() 
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    

【问题讨论】：

检查你的collectionview frame /constratint

框架还是约束？？对于单元格，我没有设置约束。对于我设置的图像和标签

【参考方案1】：

从尺寸检查器的情节提要中将 CollectionViews Section Inset 设置为 Top = 8、Bottom = 8、Left = 8 和 Right = 8，它应该看起来像

并将单元格的大小返回为

- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath 

   //If you want your cell should be square in size the return the equal height and width, and make sure you deduct the Section Inset from it.
   return CGSizeMake((self.view.frame.size.width/3) - 16, (self.view.frame.size.width/3) - 45);

就是这样，仅此而已。你应该看到我的结果：

【讨论】：

还要确保适当地设置约束。

你能用swift发布那个obj c代码吗？因为你的解决方案在6个屏幕以上工作。但是对于 5s 屏幕，我每行得到 2 个单元格。我需要像我发布的第一张图片一样的矩形

1.您可以将 Obj-c 代码转换为 Swift，它不超过两行。 2.这将适用于所有屏幕，请参阅更新的答案。 3.如果您希望您的单元格为矩形，则根据需要设置高度。

是的，转换它，但是当我改变高度时。它仍然看起来像正方形`return CGSizeMake((self.view.frame.size.width/3) - 10, (self.view.frame.size.width/3) - 10)`

再减去一些分数，看看结果，CGSizeMake((self.view.frame.size.width/3) - 10, (self.view.frame.size.width/3) - 45 )

【参考方案2】：

使用以下代码创建一个集合视图：

@IBOutlet var collectionView: UICollectionView?
    var screenSize: CGRect!
    var screenWidth: CGFloat!
    var screenHeight: CGFloat!

 override func viewDidLoad() 


        print("select block is \(self.strBlockname)")

        screenSize = UIScreen.mainScreen().bounds
        screenWidth = screenSize.width
        screenHeight = screenSize.height
        let layout: UICollectionViewFlowLayout = UICollectionViewFlowLayout()
        layout.sectionInset = UIEdgeInsets(top: 10, left: 0, bottom: 10, right: 0)
        layout.itemSize = CGSize(width: (screenWidth/3)-1, height: (screenWidth/3)-1)
        layout.minimumInteritemSpacing = 1
        layout.minimumLineSpacing = 1
        collectionView = UICollectionView(frame: CGRectMake(0, 0, screenWidth, screenHeight-65), collectionViewLayout: layout)
        collectionView!.dataSource = self
        collectionView!.delegate = self
        collectionView!.registerClass(CollectionViewCell.self, forCellWithReuseIdentifier: "CollectionViewCell")
        collectionView!.backgroundColor = UIColor.whiteColor()
        self.view.addSubview(collectionView!)

        super.viewDidLoad()

        // Do any additional setup after loading the view.
    

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

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





    func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell 
        let cell = collectionView.dequeueReusableCellWithReuseIdentifier("CollectionViewCell", forIndexPath: indexPath) as! CollectionViewCell
        cell.backgroundColor = UIColor.blackColor()
        cell.textLabel?.text = "\(indexPath.section):\(indexPath.row)"
        cell.imageView?.image = UIImage(named: "circle")
        return cell
    
    override func didReceiveMemoryWarning() 
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    

iPhone5s、6s 和 6+ 的输出如下：

iPhone5s

iPhone6s

【讨论】：

因为我使用了一些 18 左右的图像和 18 标签。我是新来的。所以只有我问过

将我的 viewdidload 代码放入你的 viewdidload 然后检查

我在这一行出现错误`collectionView!.registerClass(CollectionViewCell.self, forCellWithReuseIdentifier: "cell")`

应用程序崩溃“致命错误：在展开可选值 (lldb) 时意外发现 nil”

如何使用相同的代码添加图像和标签？在每个单元格内

【参考方案3】：

@user5513630 在集合视图中添加以下代码。

func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize 
        let size = UIScreen.mainScreen().bounds.size

// 8 - space between 3 collection cells
// 4 - 4 times gap will appear between cell.
        return CGSize(width: (size.width - 4 * 8)/3, height: 40)

    

【参考方案4】：

阅读this 教程。它会满足你的要求