How to create UICollectionViewCell programmatically
Try to copy and paste this code into your xcode, it should work
//// HomeVIewController.swift// Photolancer//// Created by Lee SangJoon on 9/8/16.// Copyright © 2016 Givnite. All rights reserved.//import UIKitclass HomeViewController: UIViewController, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout { var collectionview: UICollectionView! var cellId = "Cell" override func viewDidLoad() { super.viewDidLoad() // Create an instance of UICollectionViewFlowLayout since you cant // Initialize UICollectionView without a layout let layout: UICollectionViewFlowLayout = UICollectionViewFlowLayout() layout.sectionInset = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0) layout.itemSize = CGSize(width: view.frame.width, height: 700) collectionview = UICollectionView(frame: self.view.frame, collectionViewLayout: layout) collectionview.dataSource = self collectionview.delegate = self collectionview.registerClass(FreelancerCell.self, forCellWithReuseIdentifier: cellId) collectionview.showsVerticalScrollIndicator = false collectionview.backgroundColor = UIColor.whiteColor() self.view.addSubview(collectionview) } func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int { return 10 } func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell { let cell = collectionview.dequeueReusableCellWithReuseIdentifier(cellId, forIndexPath: indexPath) as! FreelancerCell return cell }}class FreelancerCell: UICollectionViewCell { let profileImageButton: UIButton = { let button = UIButton() button.backgroundColor = UIColor.whiteColor() button.layer.cornerRadius = 18 button.clipsToBounds = true button.setImage(UIImage(named: "Profile"), forState: .Normal) button.translatesAutoresizingMaskIntoConstraints = false return button }() let nameLabel: UILabel = { let label = UILabel() label.font = UIFont.systemFontOfSize(14) label.textColor = UIColor.darkGrayColor() label.text = "Bob Lee" label.translatesAutoresizingMaskIntoConstraints = false return label }() let distanceLabel: UILabel = { let label = UILabel() label.textColor = UIColor.lightGrayColor() label.font = UIFont.systemFontOfSize(14) label.text = "30000 miles" label.translatesAutoresizingMaskIntoConstraints = false return label }() let pricePerHourLabel: UILabel = { let label = UILabel() label.textColor = UIColor.darkGrayColor() label.font = UIFont.systemFontOfSize(14) label.text = "$40/hour" label.translatesAutoresizingMaskIntoConstraints = false return label }() let ratingLabel: UILabel = { let label = UILabel() label.textColor = UIColor.lightGrayColor() label.font = UIFont.systemFontOfSize(14) label.text = "4.9+" label.translatesAutoresizingMaskIntoConstraints = false return label }() let showCaseImageView: UIImageView = { let imageView = UIImageView() imageView.backgroundColor = UIColor.whiteColor() imageView.image = UIImage(named: "Profile") imageView.translatesAutoresizingMaskIntoConstraints = false return imageView }() let likesLabel: UILabel = { let label = UILabel() label.textColor = UIColor.lightGrayColor() label.font = UIFont.systemFontOfSize(14) label.text = "424 likes" label.translatesAutoresizingMaskIntoConstraints = false return label }() let topSeparatorView: UIView = { let view = UIView() view.backgroundColor = UIColor.darkGrayColor() view.translatesAutoresizingMaskIntoConstraints = false return view }() let bottomSeparatorView: UIView = { let view = UIView() view.backgroundColor = UIColor.darkGrayColor() view.translatesAutoresizingMaskIntoConstraints = false return view }() let likeButton: UIButton = { let button = UIButton() button.setTitle("Like", forState: .Normal) button.titleLabel?.font = UIFont.systemFontOfSize(18) button.setTitleColor(UIColor.darkGrayColor(), forState: .Normal) button.translatesAutoresizingMaskIntoConstraints = false return button }() let hireButton: UIButton = { let button = UIButton() button.setTitle("Hire", forState: .Normal) button.titleLabel?.font = UIFont.systemFontOfSize(18) button.setTitleColor(UIColor.darkGrayColor(), forState: .Normal) button.translatesAutoresizingMaskIntoConstraints = false return button }() let messageButton: UIButton = { let button = UIButton() button.setTitle("Message", forState: .Normal) button.titleLabel?.font = UIFont.systemFontOfSize(18) button.setTitleColor(UIColor.darkGrayColor(), forState: .Normal) button.translatesAutoresizingMaskIntoConstraints = false return button }() let stackView: UIStackView = { let sv = UIStackView() sv.axis = UILayoutConstraintAxis.Horizontal sv.alignment = UIStackViewAlignment.Center sv.distribution = UIStackViewDistribution.FillEqually sv.translatesAutoresizingMaskIntoConstraints = false; return sv }() override init(frame: CGRect) { super.init(frame: frame) addViews() } func addViews(){ backgroundColor = UIColor.blackColor() addSubview(profileImageButton) addSubview(nameLabel) addSubview(distanceLabel) addSubview(pricePerHourLabel) addSubview(ratingLabel) addSubview(showCaseImageView) addSubview(likesLabel) addSubview(topSeparatorView) addSubview(bottomSeparatorView) // Stack View addSubview(likeButton) addSubview(messageButton) addSubview(hireButton) addSubview(stackView) profileImageButton.leftAnchor.constraintEqualToAnchor(leftAnchor, constant: 5).active = true profileImageButton.topAnchor.constraintEqualToAnchor(topAnchor, constant: 10).active = true profileImageButton.heightAnchor.constraintEqualToConstant(36).active = true profileImageButton.widthAnchor.constraintEqualToConstant(36).active = true nameLabel.leftAnchor.constraintEqualToAnchor(profileImageButton.rightAnchor, constant: 5).active = true nameLabel.centerYAnchor.constraintEqualToAnchor(profileImageButton.centerYAnchor, constant: -8).active = true nameLabel.rightAnchor.constraintEqualToAnchor(pricePerHourLabel.leftAnchor).active = true distanceLabel.leftAnchor.constraintEqualToAnchor(nameLabel.leftAnchor).active = true distanceLabel.centerYAnchor.constraintEqualToAnchor(profileImageButton.centerYAnchor, constant: 8).active = true distanceLabel.widthAnchor.constraintEqualToConstant(300) pricePerHourLabel.rightAnchor.constraintEqualToAnchor(rightAnchor, constant: -10).active = true pricePerHourLabel.centerYAnchor.constraintEqualToAnchor(nameLabel.centerYAnchor).active = true // Distance depeneded on the priceLabel and distance Label ratingLabel.rightAnchor.constraintEqualToAnchor(pricePerHourLabel.rightAnchor).active = true ratingLabel.centerYAnchor.constraintEqualToAnchor(distanceLabel.centerYAnchor).active = true showCaseImageView.topAnchor.constraintEqualToAnchor(profileImageButton.bottomAnchor, constant: 10).active = true showCaseImageView.widthAnchor.constraintEqualToAnchor(widthAnchor).active = true showCaseImageView.heightAnchor.constraintEqualToConstant(UIScreen.mainScreen().bounds.width - 20).active = true likesLabel.topAnchor.constraintEqualToAnchor(showCaseImageView.bottomAnchor, constant: 10).active = true likesLabel.leftAnchor.constraintEqualToAnchor(profileImageButton.leftAnchor).active = true topSeparatorView.topAnchor.constraintEqualToAnchor(likesLabel.bottomAnchor, constant: 10).active = true topSeparatorView.widthAnchor.constraintEqualToAnchor(widthAnchor).active = true topSeparatorView.heightAnchor.constraintEqualToConstant(0.5).active = true stackView.addArrangedSubview(likeButton) stackView.addArrangedSubview(hireButton) stackView.addArrangedSubview(messageButton) stackView.topAnchor.constraintEqualToAnchor(topSeparatorView.bottomAnchor, constant: 4).active = true stackView.widthAnchor.constraintEqualToAnchor(widthAnchor).active = true stackView.centerXAnchor.constraintEqualToAnchor(centerXAnchor).active = true bottomSeparatorView.topAnchor.constraintEqualToAnchor(stackView.bottomAnchor, constant: 4).active = true bottomSeparatorView.widthAnchor.constraintEqualToAnchor(widthAnchor).active = true bottomSeparatorView.heightAnchor.constraintEqualToConstant(0.5).active = true } required init?(coder aDecoder: NSCoder) { fatalError("init(coder:) has not been implemented") }}
Your problem lies here. In your viewDidLoad()
, you're registering your collectionView cell twice. You are registering the collectionview's cell to your custom cell class in the first line and then in the second line you are registering it to the class UICollectionViewCell
.
collectionView.registerClass(MyCollectionViewCell.self, forCellWithReuseIdentifier: cellReuseIdentifier) collectionView.registerClass(UICollectionViewCell.self, forCellWithReuseIdentifier: "collectionCell")
Just remove the second line and your code should work.
I changed Bob Lee answer for swift 4
import UIKitclass noNibCollectionViewController: UIViewController, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout { var collectionview: UICollectionView! var cellId = "Cell" override func viewDidLoad() { super.viewDidLoad() // Create an instance of UICollectionViewFlowLayout since you cant // Initialize UICollectionView without a layout let layout: UICollectionViewFlowLayout = UICollectionViewFlowLayout() layout.sectionInset = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0) layout.itemSize = CGSize(width: view.frame.width, height: 700) collectionview = UICollectionView(frame: self.view.frame, collectionViewLayout: layout) collectionview.dataSource = self collectionview.delegate = self collectionview.register(FreelancerCell.self, forCellWithReuseIdentifier: cellId) collectionview.showsVerticalScrollIndicator = false collectionview.backgroundColor = UIColor.white self.view.addSubview(collectionview) } func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int { return 10 } func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell { let cell = collectionview.dequeueReusableCell(withReuseIdentifier: cellId, for: indexPath) as! FreelancerCell return cell }}class FreelancerCell: UICollectionViewCell { let profileImageButton: UIButton = { let button = UIButton() button.backgroundColor = UIColor.white button.layer.cornerRadius = 18 button.clipsToBounds = true button.setImage(UIImage(named: "Profile"), for: .normal) button.translatesAutoresizingMaskIntoConstraints = false return button }() let nameLabel: UILabel = { let label = UILabel() label.font = UIFont.systemFont(ofSize: 14) label.textColor = UIColor.darkGray label.text = "Bob Lee" label.translatesAutoresizingMaskIntoConstraints = false return label }() let distanceLabel: UILabel = { let label = UILabel() label.textColor = UIColor.lightGray label.font = UIFont.systemFont(ofSize: 14) label.text = "30000 miles" label.translatesAutoresizingMaskIntoConstraints = false return label }() let pricePerHourLabel: UILabel = { let label = UILabel() label.textColor = UIColor.darkGray label.font = UIFont.systemFont(ofSize: 14) label.text = "$40/hour" label.translatesAutoresizingMaskIntoConstraints = false return label }() let ratingLabel: UILabel = { let label = UILabel() label.textColor = UIColor.lightGray label.font = UIFont.systemFont(ofSize: 14) label.text = "4.9+" label.translatesAutoresizingMaskIntoConstraints = false return label }() let showCaseImageView: UIImageView = { let imageView = UIImageView() imageView.backgroundColor = UIColor.white imageView.image = UIImage(named: "Profile") imageView.translatesAutoresizingMaskIntoConstraints = false return imageView }() let likesLabel: UILabel = { let label = UILabel() label.textColor = UIColor.lightGray label.font = UIFont.systemFont(ofSize: 14) label.text = "424 likes" label.translatesAutoresizingMaskIntoConstraints = false return label }() let topSeparatorView: UIView = { let view = UIView() view.backgroundColor = UIColor.darkGray view.translatesAutoresizingMaskIntoConstraints = false return view }() let bottomSeparatorView: UIView = { let view = UIView() view.backgroundColor = UIColor.darkGray view.translatesAutoresizingMaskIntoConstraints = false return view }() let likeButton: UIButton = { let button = UIButton() button.setTitle("Like", for: .normal) button.titleLabel?.font = UIFont.systemFont(ofSize: 18) button.setTitleColor(UIColor.darkGray, for: .normal) button.translatesAutoresizingMaskIntoConstraints = false return button }() let hireButton: UIButton = { let button = UIButton() button.setTitle("Hire", for: .normal) button.titleLabel?.font = UIFont.systemFont(ofSize: 18) button.setTitleColor(UIColor.darkGray, for: .normal) button.translatesAutoresizingMaskIntoConstraints = false return button }() let messageButton: UIButton = { let button = UIButton() button.setTitle("Message", for: .normal) button.titleLabel?.font = UIFont.systemFont(ofSize: 18) button.setTitleColor(UIColor.darkGray, for: .normal) button.translatesAutoresizingMaskIntoConstraints = false return button }() let stackView: UIStackView = { let sv = UIStackView() sv.axis = UILayoutConstraintAxis.horizontal sv.alignment = UIStackViewAlignment.center sv.distribution = UIStackViewDistribution.fillEqually sv.translatesAutoresizingMaskIntoConstraints = false; return sv }() override init(frame: CGRect) { super.init(frame: frame) addViews() } func addViews(){ backgroundColor = UIColor.black addSubview(profileImageButton) addSubview(nameLabel) addSubview(distanceLabel) addSubview(pricePerHourLabel) addSubview(ratingLabel) addSubview(showCaseImageView) addSubview(likesLabel) addSubview(topSeparatorView) addSubview(bottomSeparatorView) // Stack View addSubview(likeButton) addSubview(messageButton) addSubview(hireButton) addSubview(stackView) profileImageButton.leftAnchor.constraint(equalTo: leftAnchor, constant: 5).isActive = true profileImageButton.topAnchor.constraint(equalTo: topAnchor, constant: 10).isActive = true profileImageButton.heightAnchor.constraint(equalToConstant: 36).isActive = true profileImageButton.widthAnchor.constraint(equalToConstant: 36).isActive = true nameLabel.leftAnchor.constraint(equalTo: profileImageButton.rightAnchor, constant: 5).isActive = true nameLabel.centerYAnchor.constraint(equalTo: profileImageButton.centerYAnchor, constant: -8).isActive = true nameLabel.rightAnchor.constraint(equalTo: pricePerHourLabel.leftAnchor).isActive = true distanceLabel.leftAnchor.constraint(equalTo: nameLabel.leftAnchor).isActive = true distanceLabel.centerYAnchor.constraint(equalTo: profileImageButton.centerYAnchor, constant: 8).isActive = true distanceLabel.widthAnchor.constraint(equalToConstant: 300) pricePerHourLabel.rightAnchor.constraint(equalTo: rightAnchor, constant: -10).isActive = true pricePerHourLabel.centerYAnchor.constraint(equalTo: nameLabel.centerYAnchor).isActive = true // Distance depeneded on the priceLabel and distance Label ratingLabel.rightAnchor.constraint(equalTo: pricePerHourLabel.rightAnchor).isActive = true ratingLabel.centerYAnchor.constraint(equalTo: distanceLabel.centerYAnchor).isActive = true showCaseImageView.topAnchor.constraint(equalTo: profileImageButton.bottomAnchor, constant: 10).isActive = true showCaseImageView.widthAnchor.constraint(equalTo: widthAnchor).isActive = true showCaseImageView.heightAnchor.constraint(equalToConstant: UIScreen.main.bounds.width - 20).isActive = true likesLabel.topAnchor.constraint(equalTo: showCaseImageView.bottomAnchor, constant: 10).isActive = true likesLabel.leftAnchor.constraint(equalTo: profileImageButton.leftAnchor).isActive = true topSeparatorView.topAnchor.constraint(equalTo: likesLabel.bottomAnchor, constant: 10).isActive = true topSeparatorView.widthAnchor.constraint(equalTo: widthAnchor).isActive = true topSeparatorView.heightAnchor.constraint(equalToConstant: 0.5).isActive = true stackView.addArrangedSubview(likeButton) stackView.addArrangedSubview(hireButton) stackView.addArrangedSubview(messageButton) stackView.topAnchor.constraint(equalTo: topSeparatorView.bottomAnchor, constant: 4).isActive = true stackView.widthAnchor.constraint(equalTo: widthAnchor).isActive = true stackView.centerXAnchor.constraint(equalTo: centerXAnchor).isActive = true bottomSeparatorView.topAnchor.constraint(equalTo: stackView.bottomAnchor, constant: 4).isActive = true bottomSeparatorView.widthAnchor.constraint(equalTo: widthAnchor).isActive = true bottomSeparatorView.heightAnchor.constraint(equalToConstant: 0.5).isActive = true } required init?(coder aDecoder: NSCoder) { fatalError("init(coder:) has not been implemented") }}