ios - 如何使用 swift 在 UICollectionView 单元格中加载自定义单元格(xib)

Question

我使用 Swift 创建了一个小型示例项目。我创建了一个“MyCustomView”作为 xib，其中包含标签、按钮和 imageView，如下面的代码所示:

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的图片供引用。

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

我如何实现这一目标？

Sandeep 建议的新修改代码

//1 导入 UIKit

class ViewController: UIViewController {

    @IBOutlet weak var collectionView: UICollectionView!

    override func viewDidLoad() {
        super.viewDidLoad()

        self.collectionView.register(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 导入 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
        }
    }

}

Answer 1

这是你可以做的，

1. 将您的 MyCustomView 类更改为 UICollectionViewCell 而不是 UIView 的子类。

2. 移除 override init(frame : CGRect),required init?(coder aDecoder: NSCoder),func xibSetup() ,func loadViewFromNib() -> UIView 来自 MyCustomView

3. 我真的无法理解您如何使用 mytitleLabelText 和 myCustomImage 的 setter 和 getter。如果没用，也把它去掉。

4. 最后，MyCustomView 中只剩下 IBOutlet。

5. 为了更好的编码实践，将名称从 MyCustomView 更改为 MyCustomCell(可选)

6. 转到您的 xib，选择 xib 并将其类设置为 MyCustomView。

1. 在同一屏幕中将文件所有者更改为托管 Collection View 的 View Controller

1. 在您的 viewController 的 ViewDidLoad 中注册您的 Nib 。

self.collectionView.registerNib(UINib(nibName: "your_xib_name", bundle: nil), forCellWithReuseIdentifier: "your_reusable_identifier")

1. 在 cellForItemAtIndexPath 中，

let cell : MyCustomView = collectionView.dequeueReusableCellWithReuseIdentifier("your_reusable_identifier", forIndexPath: indexPath) as! MyCustomView
cell.lblName.text = "bla bla" //access your Cell's IBOutlets
return cell

1. 最后，为了控制单元格的大小，要么覆盖 collectionView 的委托(delegate)，要么简单地转到您的 collectionView，选择其中的 collectionCell 并拖动它以匹配您的尺寸:) 就是这样 :)

快乐的编码。搜索教程以获得更好的理解。我无法解释所有代表，因为我最终会在这里写一篇博客。

快乐编码