ios - 动态表格 View 单元格在表格 View 的特定部分内相互重叠

Question

我有一个 View Controller ，它应该显示一个大文本(比如一篇包含一些图像的文章)。为此，我使用了动态 TableView 。此 TableView 包含三个部分:

第一个只有一行，单元格包含一个 UIImageView 和一个 UILabel(用于标题)。

第二个可以有不同的行数，每个单元格由一个 UIImageView 和一个 UILabel 组成。这是文章的实际文本和图像所在的位置。

最后一个只有一行，单元格由一个 UIImageView 和一个 UILabel 组成。这是有关作者的信息所在的位置。

现在，为了实现这一点，我使用 MVVM 设计模式并从一个简单的 JSON 文件中获取信息。以下是模型的样子:

 struct Review: Codable {
var reviewTitleAndImage: ReviewTitle
var reviewTextAndImage: [ReviewTextAndImage]
var reviewAuthorInfo: AuthorInfo
}

struct ReviewTitle: Codable {
var imageName: String
var reviewTitle: String
}

struct ReviewTextAndImage: Codable {
var reviewText: String
var reviewImageName: String
}

struct AuthorInfo: Codable {
var authorName: String
var authorImageName: String
}

如您所见，它分为三个部分(标题信息、实际文本和作者信息)。

在我的 ViewModel 中，我使用 enum 来区分各个部分。这是它的样子:

 enum ReviewSectionTypes {
case title
case reviewText
case reviewAuthorInfo
}

我还定义了每个项目(构成部分)应遵守的协议(protocol)。它有两个属性:type 和 numberOfRows:

 protocol ReviewViewModelSectionItem {
var type: ReviewSectionTypes {get}
var numberOfRows: Int {get}
}

extension ReviewViewModelSectionItem {
var numberOfRows: Int {
    return 1
  }
}

这里是项目:

 class TitleItem: ReviewViewModelSectionItem {
var type: ReviewSectionTypes {
    return .title
}
var numberOfRows: Int {
    return 1
}

var titleImageName: String
var titleText: String

init(titleImageName: String, titleText: String) {
    self.titleImageName = titleImageName
    self.titleText = titleText
   }
}

class ReviewText: ReviewViewModelSectionItem {
var type: ReviewSectionTypes {
    return .reviewText
}

var numberOfRows: Int {

    return reviewTextsAndImages.count
}

var reviewTextsAndImages: [ReviewTextAndImage]

init (reviewTextsAndImages: [ReviewTextAndImage]) {
    self.reviewTextsAndImages = reviewTextsAndImages
 }
}

class ReviewAuthorInfo: ReviewViewModelSectionItem {
var type: ReviewSectionTypes {
    return .reviewAuthorInfo
}

var authorName: String
var authorImageName: String

init (authorName: String, authorImageName: String) {
    self.authorName = authorName
    self.authorImageName = authorImageName
}

}

在我的 ViewModel 初始化中，我解析 JSON 并配置每个项目。之后，我创建了三种类型的单元格以在 TableView 中使用。

这是 TableView 的dataSource(sectionItems 是一个Array，其中包含在ViewModel 初始化期间配置后的项目) :

func numberOfSections(in tableView: UITableView) -> Int {
    print ("SECTIONS NUMBER:", sectionItems.count)
    return sectionItems.count
}

func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    print (sectionItems[section].numberOfRows, sectionItems[section].numberOfRows)
    return sectionItems[section].numberOfRows
}

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {

    let sectionItem = sectionItems[indexPath.section]

    switch sectionItem.type {
    case .title:
        if let cell = tableView.dequeueReusableCell(withIdentifier: TitleTableViewCell.identifier, for: indexPath) as? TitleTableViewCell {
            cell.item = sectionItem
            return cell
        }

    case .reviewText:
        if let item = sectionItem as? ReviewText, let cell = tableView.dequeueReusableCell(withIdentifier: ReviewTextAndImageTableViewCell.identifier, for: indexPath) as? ReviewTextAndImageTableViewCell {
            cell.item = item.reviewTextsAndImages[indexPath.row]
            return cell
        }

    case .reviewAuthorInfo:
        if let cell = tableView.dequeueReusableCell(withIdentifier:    ReviewAuthorInfoTableViewCell.identifier, for: indexPath) as? ReviewAuthorInfoTableViewCell {
            cell.item = sectionItem
            return cell
        }
    }

    return UITableViewCell()
}

还有我的 View Controller :

 @IBOutlet weak var tableView: UITableView!
var reviewViewModel = ReviewViewModel()


override func viewDidLoad() {
    super.viewDidLoad()

    tableView.dataSource = reviewViewModel
    tableView.estimatedRowHeight = 120
    tableView.rowHeight = UITableViewAutomaticDimension

    tableView.register(TitleTableViewCell.nib, forCellReuseIdentifier: TitleTableViewCell.identifier)
    tableView.register(ReviewTextAndImageTableViewCell.nib, forCellReuseIdentifier: ReviewTextAndImageTableViewCell.identifier)
    tableView.register(ReviewAuthorInfoTableViewCell.nib, forCellReuseIdentifier: ReviewAuthorInfoTableViewCell.identifier)
}

问题是，第一部分设置正常，但是，在第二部分内部单元格相互重叠，第三部分根本没有配置(第三部分没有调用 dequeue 方法细胞类型)。因此，由于这些问题，表格 View 无法完全滚动到底部。

我认为问题与 TableView 数据源中的第二部分配置有关，但我找不到它。

如果您知道导致问题的原因，或者您知道实现带图像的长文本(如文章)的更好方法，我将非常感谢您的帮助和建议。

Answer 1

问题是因为表格 View 为第二部分中的行设置了错误的高度。为了解决这个问题，我使用了 heightForRowAt UITableViewDelegate 方法。我在其中返回 UITableViewAutomaticDimension。

我不确定为什么，但是在 viewDidLoad 中将 tableView rowHeight 属性设置为 UITableViewAutomaticDimension 没有工作。也许，那时单元格内的标签没有文本。

如果您知道确切原因，请与我们分享。

附言感谢@Damo 为我指明了正确的思考方向。