TableView sections with CollectionView and text ro

Question

how i can create TableView with three sections, but in first section I want to display CollectionView with horizontal scroll, in second section I want to display only two cells with text and in third section I want to display only three cells with text.

I have only part of code, but I think he is not correct.

class SettingsScheduleAndPricesViewController: UITableViewController {

    var dayOfWeek = [NSLocalizableMo,
                     NSLocalizableTu,
                     NSLocalizableWe,
                     NSLocalizableTh,
                     NSLocalizableFr,
                     NSLocalizableSa,
                     NSLocalizableSu]

    let sectionTitle = ["Day of week", "Second section", "Third section"]
    let secondRowText = ["First row", "Second row"]
    let thirdRowText = ["Row one", "Row two", "Row three"]

    override func numberOfSections(in tableView: UITableView) -> Int {
        return sectionTitle.count
    }

    override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        switch section {
        case 0: return 1
        case 1: return 2
        default: return 3
        }
    }
    override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath)
        if indexPath.section == 0 {

        } else if indexPath.section == 1 {
            cell.textLabel?.text = secondRowText[indexPath.row]
        } else {
            cell.textLabel?.text = thirdRowText[indexPath.row]
        }
        return cell
    }
    override func tableView(_ tableView: UITableView, titleForHeaderInSection section: Int) -> String? {
        return self.sectionTitle[section]
    }
}
// MARK: - CollectionView
extension SettingsScheduleAndPricesViewController: UICollectionViewDelegate, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout {
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return dayOfWeek.count
    }

    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "dayOfWeekCell", for: indexPath) as! SettingsDayOfWeekCell
        cell.dayOfWeekLabel.text = dayOfWeek[indexPath.item]
        return cell
    }

    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        let width = collectionView.bounds.width / 7.0
        let height = width
        return CGSize(width: width, height: height)
    }
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
        return UIEdgeInsets.zero
    }
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat {
        return 0
    }
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
        return 0
    }
}

Now I see this picture

Pls help how I can do it?

Answer 1

You can do this very easily, There are few things which are missed and misplaced in your code

• You haven't set height for a row in the table view.
• You need to implement your collection view's delegate and data source into the table view cell class.
• You need to define your collection view's data source into the table view's cell.

I will try to explain how you can do it with having some changes in your code.

Coding Example:

In Your View Controller:

class SettingsScheduleAndPricesViewController: UITableViewController {
    let sectionTitle = ["Day of week", "Second section", "Third section"]
    let secondRowText = ["First row", "Second row"]
    let thirdRowText = ["Row one", "Row two", "Row three"]

    override func numberOfSections(in tableView: UITableView) -> Int {
        return sectionTitle.count
    }

    override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        switch section {
        case 0: return 1
        case 1: return 2
        default: return 3
        }
    }
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        if indexPath.section == 0 {
          let cell = tableView.dequeueReusableCell(withIdentifier: "DayofweekCell", for: indexPath) as! DayofweekCell
            return cell
        } else {
        let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath)
        if indexPath.section == 1 {
            cell.textLabel?.text = secondRowText[indexPath.row]
        } else {
            cell.textLabel?.text = thirdRowText[indexPath.row]
        }
        return cell
    }
}
    override func tableView(_ tableView: UITableView, titleForHeaderInSection section: Int) -> String? {
        return self.sectionTitle[section]
    }

    func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
    switch indexPath.section {
    case 0 :
        return //Your height
    case 1:
         return //Your height
    case 2:
         return //Your height
    default:
         return //Your height
     }
  }

}

Create One new class for DayofweekCell and setup function in it. In that class you need to add your collection view delegate and data source methods.

class DayofweekCell : UITableViewCell {

   override func awakeFromNib() {
        super.awakeFromNib()
     // Setup delegate and data source of collectionview.
    }
        var dayOfWeek = [NSLocalizableMo,
                         NSLocalizableTu,
                         NSLocalizableWe,
                         NSLocalizableTh,
                         NSLocalizableFr,
                         NSLocalizableSa,
                         NSLocalizableSu]
}

// MARK: - CollectionView Delegate and Data source methods.
extension DayofweekCell: UICollectionViewDelegate, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout {
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return dayOfWeek.count
    }

    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "dayOfWeekCell", for: indexPath) as! SettingsDayOfWeekCell
        cell.dayOfWeekLabel.text = dayOfWeek[indexPath.item]
        return cell
    }

    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        let width = collectionView.bounds.width / 7.0
        let height = width
        return CGSize(width: width, height: height)
    }
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
        return UIEdgeInsets.zero
    }
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat {
        return 0
    }
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
        return 0
    }
}

Add your collection view in your DayofweekCell and set delegate and data source there. define your data source there only. you can then use delegation to delegate your selection of collection view item to view controller. I hope this will give you an idea to solve your problem ;)

Answer 2

Issue here is, that you always dequeue the same cell in let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath) which in your case is your CollectionView cell.

Try:

if indexPath.section == 0 {

    let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath) // This is where you need to set up your collection view

    // Set the delegate / dataSource of the collectionView in the cell to `self` here...

    return cell

} else {

    let cell = tableView.dequeueReusableCell(withIdentifier: "defaultCell", for: indexPath) // A default cell

    if indexPath.section == 1 {
        cell.textLabel?.text = secondRowText[indexPath.row]
    } else {
        cell.textLabel?.text = thirdRowText[indexPath.row]
    }

    return cell

}

You have to register a UITableViewCell for default cell before. The same way you registered your CollectionView cell.