具有CollectionView和文本行的TableView部分

时间:2019-01-22 12:56:01

标签: ios swift xcode uitableview uicollectionview

我如何创建包含三个部分的 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
    }
}

现在我看到这张照片 enter image description here

请帮我怎么做?

2 个答案:

答案 0 :(得分:0)

您可以很容易地做到这一点,您的代码中很少有遗漏和放错地方的事情

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

我将尝试解释如何对代码进行一些更改。

编码示例:

在您的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
     }
  }

}

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

答案 1 :(得分:-1)

这里的问题是,您总是将let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath)中相同的单元出队,在您的情况下,这是您的CollectionView单元。

尝试:

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

}

您必须先为default cell注册一个UITableViewCell。注册您的CollectionView单元的方法相同。