如何将子视图添加到自定义 UICollectionViewCell

Posted 2023-02-27

【中文标题】如何将子视图添加到自定义 UICollectionViewCell

【英文标题】：How do I add subviews to a custom UICollectionViewCell

【发布时间】：2015-12-21 14:25:49

【问题描述】：

我有一个自定义 UICollectionViewCell 类，我想在其中添加子视图。

我的单元格类：SetUpView() 方法将添加我需要的所有子视图。

import Foundation
import UIKit

class RecipeCell: UICollectionViewCell 

    var RecipeImg: UIImage!
    var StarRatingImg: UIImage!
    var RecipeTitleText = ""
    var RecipeTextDescription = ""


    var View: UIView!
    var ImageContainer: UIImageView!
    var FavIcon: UIImageView!
    var StarRatingContainer: UIImageView!
    var KCAL: UILabel!
    var RecipeTitle: UITextView!
    var RecipeText: UITextView!


    func SetUpView()
    
        //DropDown!.backgroundColor = UIColor.blueColor()
        self.translatesAutoresizingMaskIntoConstraints = false

        //View for recipe
        View = UIView(frame: CGRectMake(0, 0, self.frame.width, self.frame.height))
        View.backgroundColor = UIColor.whiteColor()

        //Recipe image
        ImageContainer = UIImageView(frame: CGRectMake(0, 0, View.frame.width, View.frame.height/2))
        ImageContainer.image = RecipeImg
        ImageContainer.contentMode = .ScaleToFill

        //Recipe favorit icon
        FavIcon = UIImageView(frame: CGRectMake(ImageContainer.frame.width - 35, 5, 30, 30))
        FavIcon.image = UIImage(named: "LikeHeart")

        //Star rating image
        StarRatingContainer = UIImageView(frame: CGRectMake(10, ImageContainer.frame.height + 5, ImageContainer.frame.width - 20, (View.frame.height/2) * (1/5)))
        StarRatingContainer.image = StarRatingImg
        StarRatingContainer.contentMode = .ScaleAspectFit

        //RecipeTitle container
        RecipeTitle = UITextView(frame: CGRectMake(10, StarRatingContainer.frame.height + ImageContainer.frame.height + 10, View.frame.width - 20, 30))
        RecipeTitle.font = UIFont(name: "OpenSans-Semibold", size: 12)
        //RecipeTitle.backgroundColor = UIColor.redColor()
        RecipeTitle.editable = false
        RecipeTitle.text = RecipeTitleText
        RecipeTitle.textContainerInset = UIEdgeInsetsMake(0, 0, 0, 0)


        //RecipeText container
        RecipeText = UITextView(frame: CGRectMake(10, StarRatingContainer.frame.height + ImageContainer.frame.height + RecipeTitle.frame.height + 15, View.frame.width - 20, 50))
        RecipeText.font = UIFont(name: "OpenSans", size: 12)
        //RecipeText.backgroundColor = UIColor.grayColor()
        RecipeText.editable = false
        RecipeText.text = RecipeTextDescription
        RecipeText.textContainerInset = UIEdgeInsetsMake(0, 0, 0, 0)

        //KCAL label
        KCAL = UILabel(frame: CGRectMake(15, StarRatingContainer.frame.height + ImageContainer.frame.height + RecipeTitle.frame.height + RecipeText.frame.height + 20, 200, 20))
        KCAL.text = "420 KCAL. PER. PORTION"
        KCAL.font = UIFont(name: "OpenSans-Bold", size: 10)
        KCAL.textColor = UIColor(CGColor: "#dc994a".CGColor)

        //Adding the views
        self.addSubview(View)
        View.addSubview(ImageContainer)
        View.addSubview(KCAL)
        View.addSubview(StarRatingContainer)
        View.addSubview(RecipeTitle)
        View.addSubview(RecipeText)
        ImageContainer.addSubview(FavIcon)

        View.bringSubviewToFront(ImageContainer)

    

我有一个使用自定义单元格类的 UICollectionView。

我在 viewDidLoad() 中创建我的 UICollectionView

// Create Collection view
        layout = UICollectionViewFlowLayout()
        layout.sectionInset = UIEdgeInsets(top: 0, left: 0, bottom: 10, right: 0)
        layout.itemSize = CGSize(width: screenWidth/MenuViewConst  - 1, height: screenWidth - 1)
        layout.minimumInteritemSpacing = 1
        layout.minimumLineSpacing = 1

        collectionView = UICollectionView(frame: CGRect(x: 0, y: 105, width: self.view.frame.width, height: self.view.frame.height - 150), collectionViewLayout: layout)
        collectionView?.tag = 5
        collectionView!.dataSource = self
        collectionView!.delegate = self
        collectionView!.registerClass(RecipeCell.self, forCellWithReuseIdentifier: "CollectionViewCell")
        collectionView!.backgroundColor = UIColor.lightGrayColor()
        collectionView!.contentInset.top = 0

在 cellForItemAtIndexPath 委托中，我设置了 UICollectionView 以使用我的自定义单元类。但是我不能在这里从我的自定义单元类中调用 SetUpView() 方法，因为这只会继续在子视图上添加子视图。在输入委托之前，我无法弄清楚如何将子视图添加到 UICollectionViewCell。希望你们能帮忙-谢谢

func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell 

        let cell  = collectionView.dequeueReusableCellWithReuseIdentifier("CollectionViewCell", forIndexPath: indexPath) as! RecipeCell

        let recipe = self.RecipeArr[indexPath.row]

        cell.backgroundColor = UIColor.grayColor()
        cell.layer.borderColor = UIColor.whiteColor().CGColor
        cell.layer.borderWidth = 0.5
        cell.RecipeImg = UIImage(named: "Burger")
        cell.StarRatingImg = UIImage(named: "StarRating")
        cell.RecipeTitleText = recipe["name"].string!
        cell.RecipeTextDescription = recipe["instruction"].string!

        //BAD IDEA!
        //cell.SetUpView()

        print("new cell")

        return cell

    

【参考方案1】：

您需要在UICollectionViewCell 中使用init(frame: CGRect) 继承函数。

class RecipeCell: UICollectionViewCell 
   var imageView : UIImageView?
   override init(frame: CGRect) 
     super.init(frame: frame)
     //initialize all your subviews.
     imageView = UIImageView()
   

别忘了在viewDidLoad 函数中注册您的自定义类

collectionView!.registerClass(RecipeCell.self, forCellWithReuseIdentifier: "CollectionViewCell")

你的collectionview委托会是这样的

func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell 

    let cell  = collectionView.dequeueReusableCellWithReuseIdentifier("CollectionViewCell", forIndexPath: indexPath) as! RecipeCell
    cell.imageView.image = UIImage(named:"yourImage.png")

【讨论】：

感谢您的回复@zumrymohamed。我试过了（initwithframe），但属性没有在 cellForItemAtIndexPath 中设置。例如：cell.RecipeImg = UIImage(named: "Burger") 和下面的属性没有设置。

正确检查编辑后的答案。你应该在“init”方法中初始化你的imageview。