I am relatively new to iOS programming and have tried a few things but to no avail.
I would like to put a CollectionView
inside a TableViewCell
. I can code each individually, but dont understand how to set and reference each CollectionView
within a TableViewCell
.
I have found this tutorial, http://ashfurrow.com/blog/putting-a-uicollectionview-in-a-uitableviewcell/ which shows how it can be done in Objective-C but I have always struggled with Obj-C.
Does anyone know of a Swift Tutorial or can assist? I am in the process of creating a simple project/code which I will post shortly to try and assist.
EDIT 1
I have just found the swift version of the above link. I am working through this now, but seems over complicated, modifying the AppDelegate.
https://github.com/DahanHu/DHCollectionTableView
Many thanks Rob
Most of the iOS apps on the App Store have a UI representation of a list of items, so it’s clear that iOS developers spend a lot of time with TableView and CollectionView throughout development. At AppIt Ventures, we have been developing iOS apps since 2009 and adapting to all the tricks, improvements and new features that iOS offers.
With Self-Sizing Cells, displaying dynamic content with variable heights is a simple process. Most of the iOS apps on the App Store have a UI representation of a list of items, so it’s clear that iOS developers spend a lot of time with TableView and CollectionView throughout development.
Inside the collectionViewLayout () method we tell the collectionView to have square cells of width and height equal to 20 percent of the width of the screen. We use sectionInset to place a 10 point padding on left and the right side of the collectionView .
The estimatedRowHeight is the height of the prototype cell in the storyboard. When the rowHeight property is set to the UITableViewAutomaticDimension, we are telling TableView to calculate the cell height as per the other constraints we added in the cell. Let’s see a quick demo on how we can tell TableView to self size.
Create a usual UITableView and in your UITableViewCell create the UICollectionView. Your collectionView delegate and datasource should conform to that UITableViewCell.
Just go through this
In your ViewController
// Global Variable
var tableView: UITableView!
override func viewDidLoad() {
super.viewDidLoad()
tableView = UITableView(frame: self.view.bounds)
tableView.delegate = self
tableView.dataSource = self
self.view.addSubview(tableView)
tableView.registerClass(TableViewCell.self, forCellReuseIdentifier: "TableViewCell")
tableView.registerClass(UITableViewCell.self, forCellReuseIdentifier: "NormalCell")
}
func numberOfSectionsInTableView(tableView: UITableView) -> Int {
return 1
}
func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return 5
}
func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
if indexPath.row == 3 {
var cell: TableViewCell = tableView.dequeueReusableCellWithIdentifier("TableViewCell", forIndexPath: indexPath) as! TableViewCell
cell.backgroundColor = UIColor.groupTableViewBackgroundColor()
return cell
} else {
var cell: UITableViewCell = tableView.dequeueReusableCellWithIdentifier("NormalCell", forIndexPath: indexPath) as! UITableViewCell
cell.textLabel?.text = "cell: \(indexPath.row)"
return cell
}
}
As you can see I've created two different cells, a custom TableViewCell which is returned only when the row index is 3 and a basic UITableViewCell in other indices.
The custom "TableViewCell" will have our UICollectionView. So Create a UITableViewCell subclass and write down the below code.
import UIKit
class TableViewCell: UITableViewCell, UICollectionViewDataSource, UICollectionViewDelegate {
var collectionView: UICollectionView!
override init(style: UITableViewCellStyle, reuseIdentifier: String?) {
super.init(style: style, reuseIdentifier: reuseIdentifier)
let layout = UICollectionViewFlowLayout()
layout.scrollDirection = UICollectionViewScrollDirection.Horizontal
collectionView = UICollectionView(frame: self.bounds, collectionViewLayout: layout)
collectionView.delegate = self
collectionView.dataSource = self
collectionView.registerClass(UICollectionViewCell.self, forCellWithReuseIdentifier: "CollectionViewCell")
collectionView.backgroundColor = UIColor.clearColor()
self.addSubview(collectionView)
}
required init(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
}
// MARK: UICollectionViewDataSource
func numberOfSectionsInCollectionView(collectionView: UICollectionView) -> Int {
return 1
}
func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return 10
}
func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
let cell: UICollectionViewCell = collectionView.dequeueReusableCellWithReuseIdentifier("CollectionViewCell", forIndexPath: indexPath) as! UICollectionViewCell
if indexPath.row%2 == 0 {
cell.backgroundColor = UIColor.redColor()
} else {
cell.backgroundColor = UIColor.yellowColor()
}
return cell
}
}
Hope it helps.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With