教你搞定表格滚动怪相，不再担心表格越界！

Android

2023-05-24 15:39:41

在 iOS 中解决 Table View Cell 超出 View 边界

当使用 table view 在 iOS 应用中展示数据时，有时会出现 cell 超出 view 边界的问题。这不仅影响了视觉效果，还可能导致性能问题。本博客将深入探讨导致 cell 超出 view 边界的原因，并提供多种解决方法。

原因

cell 超出 view 边界的原因包括：

不准确的 Cell 高度计算： 如果 cell 中元素的高度不固定，则需要使用自动布局动态计算 cell 高度。
不正确的 Table View ContentInset： contentInset 属性设置不当会导致 cell 超出 table view 的顶部或底部。
不正确的 Table View ContentSize： contentSize 属性设置不当会导致 cell 超出 table view 的底部。

解决方法

正确计算 Cell 高度

使用自动布局来动态计算 cell 高度，考虑所有元素的高度。

正确设置 Table View ContentInset

将 contentInset 的 top 和 bottom 属性设置为适当的值，以防止 cell 超出 table view 的顶部和底部。

正确设置 Table View ContentSize

将 contentSize 的 height 属性设置为足够大的值，以防止 cell 超出 table view 的底部。

其他方法

自适应 Cell 高度： 使用 estimatedRowHeight 属性和 heightForRowAt 方法来自动计算 cell 高度。
估计行高（estimatedRowHeight）： 设置 table view 的 estimatedRowHeight 属性，以避免在加载时出现空白区域。
预加载： 在 didEndDisplayingCell 方法中预加载即将显示的 cell，以提高滚动性能。

代码示例

// 正确设置 contentInset
tableView.contentInset = UIEdgeInsets(top: 20, left: 0, bottom: 20, right: 0)

// 正确设置 contentSize
tableView.contentSize = CGSize(width: tableView.frame.width, height: 1000)

// 自适应 Cell 高度
override func tableView(_ tableView: UITableView, estimatedHeightForRowAt indexPath: IndexPath) -> CGFloat {
    return UITableView.automaticDimension
}

override func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
    return UITableView.automaticDimension
}

// 预加载
override func tableView(_ tableView: UITableView, didEndDisplaying cell: UITableViewCell, forRowAt indexPath: IndexPath) {
    let nextIndexPath = IndexPath(row: indexPath.row + 1, section: indexPath.section)
    if nextIndexPath.row < tableView.numberOfRows(inSection: indexPath.section) {
        tableView.prefetchRows(at: [nextIndexPath])
    }
}