如何使用swift在UICollectionView单元格中加载自定义单元格（xib） [英] How to load custom cell ( xib) in UICollectionView cell using swift

问题描述

我使用Swift创建了一个小型示例项目。我创建了一个MyCustomView作为xib，其中包含label，button和imageView，如下面的代码所示：

I have created a small sample project using Swift. I have created an "MyCustomView" as xib which contains label, button and imageView as shown in below code:

import UIKit

@IBDesignable class MyCustomView: UIView {

    @IBOutlet weak var lblName: UILabel!
    @IBOutlet weak var btnClick: UIButton!
    @IBOutlet weak var myImageView: UIImageView!

    var view:UIView!

    @IBInspectable
    var mytitleLabelText: String? {
        get {
            return lblName.text
        }
        set(mytitleLabelText) {
            lblName.text = mytitleLabelText
        }
    }

    @IBInspectable
    var myCustomImage:UIImage? {
        get {
            return myImageView.image
        }
        set(myCustomImage) {
            myImageView.image = myCustomImage
        }
    }


    override init(frame : CGRect)
    {
        super.init(frame: frame)
        xibSetup()
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        xibSetup()
    }


    func xibSetup()
    {
        view = loadViewFromNib()
        view.frame = self.bounds

        // not sure about this ?
        view.autoresizingMask = [UIViewAutoresizing.FlexibleWidth, UIViewAutoresizing.FlexibleHeight]
        addSubview(view)
    }


    func loadViewFromNib() -> UIView {

        let bundle = NSBundle(forClass: self.dynamicType)
        let nib = UINib(nibName: "MyCustomView", bundle: bundle)
        let view = nib.instantiateWithOwner(self, options: nil)[0] as! UIView

        return view
    }
}

附上xib的图像作为参考。

Attached the image of xib for the reference.

在StoryBoard中 - > ViewController添加了UIViewCollection，如下图所示。在这个viewcollection中，我需要橙色颜色单元格来包含我要在运行时加载的自定义xib。

In StoryBoard -> ViewController added UIViewCollection which as shown in the below image. In this viewcollection, I need that orange color cell to contain my custom xib to be loaded at runtime.

我如何实现这一目标？

Sandeep建议的新修改代码

New Modified code as suggested by Sandeep

// 1
import UIKit

// 1 import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var collectionView: UICollectionView!

    override func viewDidLoad() {
        super.viewDidLoad()

        self.collectionView.registerNib(UINib(nibName: "MyCustomView", bundle: nil), forCellWithReuseIdentifier: "myCell")

    }

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

    func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return 7
    }

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

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

        let cell : MyCustomView = collectionView.dequeueReusableCellWithReuseIdentifier("your_reusable_identifier", forIndexPath: indexPath) as! MyCustomView

        cell.lblName.text = "MyNewName"
        return cell
    }
}

// 2
import UIKit

// 2 import UIKit

@IBDesignable class MyCustomView: UICollectionViewCell {

    @IBOutlet weak var lblName: UILabel!
    @IBOutlet weak var btnClick: UIButton!
    @IBOutlet weak var myImageView: UIImageView!

    var view:UIView!

    @IBInspectable
    var mytitleLabelText: String? {
        get {
            return lblName.text
        }
        set(mytitleLabelText) {
            lblName.text = mytitleLabelText
        }
    }

    @IBInspectable
    var myCustomImage:UIImage? {
        get {
            return myImageView.image
        }
        set(myCustomImage) {
            myImageView.image = myCustomImage
        }
    }

}

推荐答案

sia，

这是你可以做的，

1. 更改你的 MyCustomView calss是UICollectionViewCell的子类而不是UIView。

1. Change your MyCustomView calss to be a subclass of UICollectionViewCell and not UIView.

删除覆盖init（ frame：CGRect），必需的init？（编码器aDecoder：NSCoder）， func xibSetup（）， func loadViewFromNib（） - > UIView 来自 MyCustomView

我真的不明白你是怎么用的mytitleLabelText和myCustomImage的setter和getter。如果它没用也可以摆脱它。

I seriously could not understand how are you using your setter and getter for mytitleLabelText and myCustomImage. If its of no use get rid of it as well.

最后，你将只剩下MyCustomView中的IBOutlets。

Finally you will be left with just IBOutlets in MyCustomView.

为了更好的编码实践，将名称从MyCustomView更改为MyCustomCell（可选）

For better coding practice change the name from MyCustomView to MyCustomCell (optional)

转到xib，选择xib和将其类设置为MyCustomView。

Go to your xib, select the xib and set its class as MyCustomView.

1. 在同一屏幕中将文件所有者更改为您的View控制器托管collectionView

1. 在viewController的ViewDidLoad中注册你的笔尖。

1. In ViewDidLoad of your viewController register your nib.

self.collectionView.registerNib（UINib（nibName：your_xib_name，bundle：nil），forCellWithReuseIdentifier： your_reusable_identifier）

在cellForItemAtIndexPath中，

In cellForItemAtIndexPath,

让cell：MyCustomView = collectionView.dequeueReusableCellWithReuseIdentifier（your_reusable_identifier，forIndexPath：indexPath）为！ MyCustomView

cell.lblName.text =bla bla//访问你的Cell的IBOutlets
返回单元格

1. 最后为了控制单元格的大小，要么覆盖collectionView的委托或者只是转到你的collectionView中选择collectionCell并拖动它以匹配你的尺寸:)这就是它：）

快乐的编码。搜索教程以便更好地理解。不能解释所有代表，因为我最终会在这里写博客。

Happy coding. Search tutorials for better understanding. Cant explain all delegates as I'll end up writing a blog here.

快乐编码

这篇关于如何使用swift在UICollectionView单元格中加载自定义单元格（xib）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！