Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

ios 8 Swift - TableView with embedded CollectionView

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

like image 364
Robert Plant Avatar asked Jul 23 '15 08:07

Robert Plant


People also ask

What do iOS developers use Tableview and collectionview for?

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.

What are self-sizing cells in iOS?

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.

What is sectioninset inside a collectionviewlayout?

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 .

What is estimatedrowheight in a UITableView?

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.


1 Answers

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.

like image 191
Matt Avatar answered Sep 28 '22 08:09

Matt