带有 CollectionView 和文本行的 TableView 部分 [英] TableView sections with CollectionView and text rows

问题描述

我如何创建具有三个部分的 TableView，但在第一部分我想用水平滚动显示 CollectionView，在第二部分我只想显示两个单元格文本，在第三部分我只想显示三个带有文本的单元格.

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
    }
}

现在我看到这张图片

请帮助我怎么做?

推荐答案

你可以很容易地做到这一点，你的代码中很少有遗漏和错位的东西

• 您尚未为表格视图中的行设置高度.
• 您需要将集合视图的委托和数据源实现到表格视图单元格类中.
• 您需要将集合视图的数据源定义到表格视图的单元格中.

我将尝试解释如何通过对代码进行一些更改来做到这一点.

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

编码示例:

在您的视图控制器中:

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
     }
  }

}

为 DayofweekCell 创建一个新类并在其中设置函数.在该类中，您需要添加集合视图委托和数据源方法.

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
    }
}

在 DayofweekCell 中添加集合视图，并在那里设置委托和数据源.仅在此处定义您的数据源.然后，您可以使用委托将您选择的集合视图项委托给视图控制器.我希望这会给你一个解决问题的想法;)

这篇关于带有 CollectionView 和文本行的 TableView 部分的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！