[英]How to load custom cell ( xib) in UICollectionView cell using swift
I have created a small sample project using Swift.我使用 Swift 创建了一个小示例项目。 I have created an "MyCustomView" as xib which contains label, button and imageView as shown in below code:我创建了一个“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
}
}
Attached the image of xib for the reference.附上xib的图片以供参考。
In StoryBoard -> ViewController added UIViewCollection which as shown in the below image.在 StoryBoard -> ViewController 添加 UIViewCollection,如下图所示。 In this viewcollection, I need that orange color cell to contain my custom xib to be loaded at runtime.在此视图集合中,我需要橙色单元格来包含要在运行时加载的自定义 xib。
How do I achieve this?我如何实现这一目标?
New Modified code as suggested by Sandeep Sandeep 建议的新修改代码
// 1 import UIKit // 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 import UIKit // 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
}
}
}
Here is what you can do,这是你可以做的,
Change your MyCustomView
class to be a subclass of UICollectionViewCell and not UIView.将您的MyCustomView
类更改为 UICollectionViewCell 而不是 UIView 的子类。
Remove override init(frame : CGRect)
, required init?(coder aDecoder: NSCoder)
, func xibSetup()
, func loadViewFromNib() -> UIView
from MyCustomView
删除override init(frame : CGRect)
, required init?(coder aDecoder: NSCoder)
, func xibSetup()
, func loadViewFromNib() -> UIView
from MyCustomView
I seriously could not understand how are you using your setter and getter for mytitleLabelText and myCustomImage.我真的无法理解你是如何将你的 setter 和 getter 用于 mytitleLabelText 和 myCustomImage。 If its of no use get rid of it as well.如果它没有用,也摆脱它。
Finally you will be left with just IBOutlets in MyCustomView.最后,您将只剩下 MyCustomView 中的 IBOutlets。
For better coding practice change the name from MyCustomView to MyCustomCell (optional)为了更好的编码实践,将名称从 MyCustomView 更改为 MyCustomCell(可选)
Go to your xib, select the xib and set its class as MyCustomView.转到您的 xib,选择 xib 并将其类设置为 MyCustomView。
self.collectionView.registerNib(UINib(nibName: "your_xib_name", bundle: nil), forCellWithReuseIdentifier: "your_reusable_identifier")
let cell : MyCustomView = collectionView.dequeueReusableCellWithReuseIdentifier("your_reusable_identifier", forIndexPath: indexPath) as! MyCustomView
cell.lblName.text = "bla bla" //access your Cell's IBOutlets
return cell
Happy coding.快乐编码。 Search tutorials for better understanding.搜索教程以更好地理解。 I can't explain all delegates as I'll end up writing a blog here.我无法解释所有代表,因为我最终会在这里写一篇博客。
Happy coding快乐编码
For Swift 4.0对于 Swift 4.0
in viewDidLoad :在viewDidLoad 中:
//custom collectionViewCell
mainCollectionView.register(UINib(nibName: "your_customcell_name", bundle: nil), forCellWithReuseIdentifier: "your_customcell_identifier")
in cellForItemAt indexPath :在cellForItemAt indexPath 中:
let cell : <your_customcell_name> = mainCollectionView.dequeueReusableCell(withReuseIdentifier: "your_customcell_identifier", for: indexPath) as! <your_customcell_name>
And dont forget to set identifier for your custom cell in xib section.并且不要忘记在 xib 部分为您的自定义单元格设置标识符。
One line approach if you have to register multiple cells.如果您必须注册多个单元格,则采用一种方法。
extension UICollectionViewCell {
static func register(for collectionView: UICollectionView) {
let cellName = String(describing: self)
let cellIdentifier = cellName + "Identifier"
let cellNib = UINib(nibName: String(describing: self), bundle: nil)
collectionView.register(cellNib, forCellWithReuseIdentifier: cellIdentifier)
}
}
Steps on how to use使用步骤
Name your Cell identifier as "YourcellName" + "Identifier"
eg: CustomCellIdentifier
if your cell name is CustomCell.将您的 Cell 标识符命名为"YourcellName" + "Identifier"
例如: CustomCellIdentifier
如果您的 Cell 名称是 CustomCell。
CustomCell.register(for: collectionView)
For Swift 4.2 in viewDidLoad对于 viewDidLoad 中的 Swift 4.2
self.collectionView.register(UINib(nibName: "your_xib_name", bundle: nil), forCellWithReuseIdentifier: "your_reusable_identifier")
in cellForItemAt indexPath:在 cellForItemAt 索引路径中:
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "your_reusable_identifier", for: indexPath) as! MyCustomView
And of course as @Raj Aryan said: don't forget to set identifier for your custom cell in xib section.当然,正如@Raj Aryan 所说:不要忘记在 xib 部分为您的自定义单元格设置标识符。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.