iOS - 未应用我的 UICollectionViewCell 上的自定义

Posted 2023-03-11

【中文标题】iOS - 未应用我的 UICollectionViewCell 上的自定义

【英文标题】：iOS - Customisations on my UICollectionViewCell are not applied

【发布时间】：2020-01-28 13:53:33

【问题描述】：

我正在使用多个水平 UICollectionView 编写 ios 应用程序，这些 UICollectionView 堆叠在 ScrollView 内的 StackLayout 中。我想在这些集合视图中显示图像，但我的自定义 UICollectionViewCell 没有显示任何内容。

Here is what I'm doing

我关注了this tutorial 的多个集合视图，以及this one 的自定义单元格。

这是我的视图控制器：

import UIKit

struct CustomImage 
    var title: String
    var image: UIImage


class ViewController: UIViewController, UICollectionViewDataSource, UICollectionViewDelegate, UICollectionViewDelegateFlowLayout 

@IBOutlet weak var perspectiveCV: UICollectionView!
@IBOutlet weak var monkeyCV: UICollectionView!
@IBOutlet weak var beachCV: UICollectionView!

let perspectiveImages = [
    CustomImage(title: "Perspective 1", image: #imageLiteral(resourceName: "perspective-1")),
    CustomImage(title: "Perspective 2", image: #imageLiteral(resourceName: "perspective-2")),
    CustomImage(title: "Perspective 3", image: #imageLiteral(resourceName: "perspective-3")),
    CustomImage(title: "Perspective 4", image: #imageLiteral(resourceName: "perspective-4")),
    CustomImage(title: "Perspective 5", image: #imageLiteral(resourceName: "perspective-5")),
    CustomImage(title: "Perspective 6", image: #imageLiteral(resourceName: "perspective-6"))
]

let monkeyImages = [
    CustomImage(title: "Monkey 1", image: #imageLiteral(resourceName: "monkey-1")),
    CustomImage(title: "Monkey 1", image: #imageLiteral(resourceName: "monkey-2")),
    CustomImage(title: "Monkey 1", image: #imageLiteral(resourceName: "monkey-3"))
]

let beachImages = [
    CustomImage(title: "Beach 1", image: #imageLiteral(resourceName: "beach-1")),
    CustomImage(title: "Beach 2", image: #imageLiteral(resourceName: "beach-2")),
    CustomImage(title: "Beach 3", image: #imageLiteral(resourceName: "beach-3")),
    CustomImage(title: "Beach 4", image: #imageLiteral(resourceName: "beach-4"))
]

override func viewDidLoad() 
    super.viewDidLoad()
    title = "Images"

    setupCollectionViews()


fileprivate func setupCollectionViews() 
    // Heights
    perspectiveCV.heightAnchor.constraint(equalTo: view.widthAnchor, multiplier: 0.8).isActive = true
    monkeyCV.heightAnchor.constraint(equalTo: view.widthAnchor, multiplier: 0.8).isActive = true
    beachCV.heightAnchor.constraint(equalTo: view.widthAnchor, multiplier: 0.8).isActive = true

    // Left and right padding
    perspectiveCV.contentInset = UIEdgeInsets(top: 0, left: 20, bottom: 0, right: 20)
    monkeyCV.contentInset = UIEdgeInsets(top: 0, left: 20, bottom: 0, right: 20)
    beachCV.contentInset = UIEdgeInsets(top: 0, left: 20, bottom: 0, right: 20)

    // Hide scrolling indicator
    perspectiveCV.showsHorizontalScrollIndicator = false
    monkeyCV.showsHorizontalScrollIndicator = false
    beachCV.showsHorizontalScrollIndicator = false


func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int 
    switch collectionView 
    case monkeyCV:
        return monkeyImages.count
    case beachCV:
        return beachImages.count
    default:
        return perspectiveImages.count
    


func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell 
    switch collectionView 
    case monkeyCV:
        let monkeyCell = monkeyCV.dequeueReusableCell(withReuseIdentifier: "monkeyCell", for: indexPath) as! ImageCollectionViewCell
        monkeyCell.backgroundColor = UIColor.systemOrange
        monkeyCell.data = monkeyImages[indexPath.row]
        return monkeyCell
    case beachCV:
        let beachCell = beachCV.dequeueReusableCell(withReuseIdentifier: "beachCell", for: indexPath) as! ImageCollectionViewCell
        beachCell.backgroundColor = UIColor.systemBlue
        beachCell.data = beachImages[indexPath.row]
        return beachCell
    default:
        let perspectiveCell = perspectiveCV.dequeueReusableCell(withReuseIdentifier: "perspectiveCell", for: indexPath) as! ImageCollectionViewCell
        perspectiveCell.backgroundColor = UIColor.systemRed
        perspectiveCell.data = perspectiveImages[indexPath.row]
        return perspectiveCell
    


func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize 
    return CGSize(width: collectionView.frame.width * 0.8, height: collectionView.frame.width * 0.8)

这是我的自定义 UICollectionViewCell ：

import UIKit

class ImageCollectionViewCell: UICollectionViewCell 

var data: CustomImage? 
    didSet 
        guard let data = data else  return 
        bg.image = data.image
    


fileprivate let bg: UIImageView = 
    let iv = UIImageView()
    iv.translatesAutoresizingMaskIntoConstraints = false
    iv.contentMode = .scaleAspectFit
    iv.clipsToBounds = true
    return iv
()

override init(frame: CGRect) 
    super.init(frame: frame)

    bg.topAnchor.constraint(equalTo: contentView.topAnchor).isActive = true
    bg.leadingAnchor.constraint(equalTo: contentView.leadingAnchor).isActive = true
    bg.trailingAnchor.constraint(equalTo: contentView.trailingAnchor).isActive = true
    bg.bottomAnchor.constraint(equalTo: contentView.bottomAnchor).isActive = true

    contentView.addSubview(bg)


required init?(coder: NSCoder) 
    super.init(coder: coder)

And here is my Storyboard

你能解释一下我的代码有什么问题吗？

我的设置：

Swift 版本：5.1.3 Xcode 版本：11.3.1 目标 iOS 版本：13.2 MacBook Pro（13 英寸，2016 年，四个 Thunderbolt 3 端口）MacOS Catalina 10.15.2 (19C57)

【问题讨论】：

您是否将自定义单元格应用于您的 UICollectionViewCell ？在你的故事板中？

@JulianSilvestri 在情节提要中是的，通过单击单元格，在右侧检查器中，我已将自定义类设置为 ImageCollectionViewCell。

在您的故事板中，您有三个collectionView。每个人都有自己的细胞。这些单元中的每一个都需要应用于您的自定义单元类。你这样做了吗？

@JulianSilvestri 我已将自定义单元格类设置为我的 ImageCollectionViewCell，从情节提要（在右侧检查器中单击一个单元格），用于三个单元格中的每一个。这是你要求的吗？

@JulianSilvestri 是否可以将其与“UICollectionViewDelegateFlowLayout”链接：我第一次使用它，第一次遇到问题。我不明白怎么可能被困在看起来那么容易的事情上..

【参考方案1】：

您似乎尚未建立分配给每个集合视图的委托/数据源。

在您的视图中，确实加载将委托和数据源连接到您的每个集合视图。

self.mycollectionView1.delegate = self
self.mycollectionView1.datasource = self
self.mycollectionView2.delegate = self
self.mycollectionView2.datasource = self
self.mycollectionView3.delegate = self
self.mycollectionView3.datasource = self

您还可以通过情节提要设置委托和数据源。 您可以选择每个 collectionView 并 ctrl + 拖动到您的 ViewController 而不是视图！

请注意上图中突出显示的部分。 这表明您的 viewController。 Ctrl + 将每个集合视图拖动到该点并单击委托和数据源

编辑-----

而不是像您在这里所做的那样使用 switch 语句

switch collectionView 
    case monkeyCV:
        let monkeyCell = monkeyCV.dequeueReusableCell(withReuseIdentifier: "monkeyCell", for: indexPath) as! ImageCollectionViewCell
        monkeyCell.backgroundColor = UIColor.systemOrange
        monkeyCell.data = monkeyImages[indexPath.row]
        return monkeyCell
    case beachCV:
        let beachCell = beachCV.dequeueReusableCell(withReuseIdentifier: "beachCell", for: indexPath) as! ImageCollectionViewCell
        beachCell.backgroundColor = UIColor.systemBlue
        beachCell.data = beachImages[indexPath.row]
        return beachCell
    default:
        let perspectiveCell = perspectiveCV.dequeueReusableCell(withReuseIdentifier: "perspectiveCell", for: indexPath) as! ImageCollectionViewCell
        perspectiveCell.backgroundColor = UIColor.systemRed
        perspectiveCell.data = perspectiveImages[indexPath.row]
        return perspectiveCell
    

试着像这样建立你的细胞

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath)-> UICollectionViewCell 
      let cell = myCollectionView1.dequeueResuableCell(withReuseIdentifier: "myIdentifier", for: indexPath) as! mycustomCellClass
      cell.backgroundColor = UIColor.systemOrange
      return cell


      if collectionView == mycollectionView2 
          let cell2 = mycollectionView2.dequeueResuableCell(withReuseIdentifier: "myIdentifier2", for: indexPath) as! mycustomCellClass
          cell2.backgroundColor = UIColor.systemBlue
      

等等。 您可能还需要修改您的 numberOfItemsInSection 函数以替换该 switch 语句。

func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int 
    switch collectionView 
    case monkeyCV:
        return monkeyImages.count
    case beachCV:
        return beachImages.count
    default:
        return perspectiveImages.count
    

从上面改为下面

func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int 
     if (collectionView == mycollectionView1  
        return monkeyImages.count
      else if (collectionView == myCollectionView2 
        return beachImages.count
      else 
       //this is your final collectionview 
       return persepctiveImages.count
     

编辑 2-----------

尝试删除 sizeForItemAt

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize 
    return CGSize(width: collectionView.frame.width * 0.8, height: collectionView.frame.width * 0.8)

转到您的情节提要并以物理方式拖动单元格的大小。在尺寸检查器的右侧面板上，确保“估计尺寸”选项设置为无。

你也可以试试这个。

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize 
    return CGSize(width: (collectionView.frame.size.width/3), height: collectionView.frame.size.height)

除以 3 得到三个单元格。

【讨论】：

我已经从 StoryBoard 中完成了。我通过将 CollectionViews 拖到 viewController 并检查了委托和数据源再次进行了检查。毫无疑问，我也做了你在 ViewDidLoad 中告诉我的事情，但没有任何改变。如果有帮助的话，我可以将项目存档发送到这里。

我正在阅读您更新的答案，但我看不出有任何区别，因为“if/else”和“switch/case”的工作方式几乎相同。我尝试使用“if/else”语句，但结果是一样的