首页 > 解决方案 > 带有 CollectionView 和文本行的 TableView 部分

问题描述

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

我只有部分代码,但我认为他不正确。

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

现在我看到这张照片在此处输入图像描述

请帮助我怎么做?

标签: iosswiftxcodeuitableviewuicollectionview

解决方案


你可以很容易地做到这一点,在你的代码中几乎没有遗漏和放错地方

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

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

编码示例:

在您的视图控制器中:

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 中添加您的集合视图,并在那里设置委托和数据源。仅在那里定义您的数据源。然后,您可以使用委托将您选择的集合视图项委托给视图控制器。我希望这会给您一个解决问题的想法;)


推荐阅读