重新排序 UITableView 中的部分
Reordering sections in UITableView
我有带部分和行的 UITableView(https://imgur.com/a/hrYTEVR)。我知道如何启用行的重新排序,但我不知道如何实现部分的重新排序。
我需要向 sections(https://imgur.com/a/V5kU9Ew) 添加重新排序控件,然后当用户触摸此控件时,section 下的行应该失败。之后,用户可以将部分移动到新位置。
在阅读了 Whosebug 和其他网站上的主题后,我不知道如何实现这样的东西。
我考虑过通过单元格实现部分,但在这种情况下,我无法在部分下翻转行以进一步移动到新位置。
如果你知道如何实现这个——给我建议。谢谢!
没有实现您想要的本机功能。如果我理解正确的话,您会想要折叠整个行部分,然后开始拖动 "header" 。如果您想自己完成此操作,我建议您从在 header 按钮上触发的平移手势识别器开始。
手势应该比较明显。在 header 上启动后,您需要在 table 视图中使用 locationIn
跟踪位置。
要折叠行,您需要做的就是使用适当的动画修改 table 视图单元格,例如:
tableView.beginUpdates()
tableView.deleteSections([myIndexPath], with: .top) // Maybe experiment with animation type
// Modify whatever you need to correspond this change in the data source
tableView.endUpdates()
由于您将删除该部分,因此您还将删除具有手势识别器的视图 (header)。这意味着将手势直接添加到 table 视图或什至其父视图可能会更好。您需要强制它仅在按下 headers 上的其中一个按钮时触发。您可以对此有所了解 here。其余不受此更改影响。
此时您可能需要创建一个额外的视图来代表您的部分堆栈并跟随您的手指。如果您将它添加为子视图并在其超级视图中使用平移手势识别器 locationIn
操纵它的中心,这应该非常容易:
movableSectionView.center = panGestureRecognizer.location(in: movableSectionView.superview!)
到目前为止,您应该能够抓取折叠所有单元格的部分并能够拖动 "section stack" 视图。现在您需要检查手指在 table 视图中的位置,以了解该部分的放置位置。这有点痛苦,但可以用 visibleCells
和 tableView.indexPath(for: )
:
来完成
func indexPathForGestureRecognizer(_ recognizer: UIGestureRecognizer) -> IndexPath {
let coordinateView: UIView = tableView.superview! // This can actually be pretty much anything as long as it is in hierarchy
let y = recognizer.location(in: coordinateView).y
if let hitCell = tableView.visibleCells.first(where: { cell in
let frameInCoordinateView = cell.convert(cell.bounds, to: coordinateView)
return frameInCoordinateView.minY >= y && frameInCoordinateView.maxY <= y
}) {
// We have the cell at which the finger is. Retrieve the index path
return tableView.indexPath(for: hitCell) ?? IndexPath(row: 0, section: 0) // This should always succeed but just in case
} else {
// We may be out of bounds. That may be either too high which means above the table view otherwise too low
if recognizer.location(in: tableView).y < 0.0 {
return IndexPath(row: 0, section: 0)
} else {
guard tableView.numberOfSections > 0 else {
return IndexPath(row: 0, section: 0) // Nothing in the table view at all
}
let section = tableView.numberOfSections-1
return IndexPath(row: tableView.numberOfRows(inSection: section), section: section)
}
}
}
手势识别器结束后,您可以使用此方法获取您要将项目放入的部分。所以只是:
tableView.beginUpdates()
// Modify whatever you need to correspond this change in the data source
tableView.insertSections([indexPathForGestureRecognizer(panGestureRecognizer).section], with: .bottom)
tableView.endUpdates()
这基本上应该足以重新排序,但您可能希望在 table 视图中显示拖动部分所在的位置。就像在堆栈将被放入的部分的末尾有一个占位符。这应该相对容易,只需添加然后移动一个额外的占位符单元格,重新使用 indexPathForGestureRecognizer
来为其定位。
玩得开心。
我有带部分和行的 UITableView(https://imgur.com/a/hrYTEVR)。我知道如何启用行的重新排序,但我不知道如何实现部分的重新排序。 我需要向 sections(https://imgur.com/a/V5kU9Ew) 添加重新排序控件,然后当用户触摸此控件时,section 下的行应该失败。之后,用户可以将部分移动到新位置。 在阅读了 Whosebug 和其他网站上的主题后,我不知道如何实现这样的东西。 我考虑过通过单元格实现部分,但在这种情况下,我无法在部分下翻转行以进一步移动到新位置。 如果你知道如何实现这个——给我建议。谢谢!
没有实现您想要的本机功能。如果我理解正确的话,您会想要折叠整个行部分,然后开始拖动 "header" 。如果您想自己完成此操作,我建议您从在 header 按钮上触发的平移手势识别器开始。
手势应该比较明显。在 header 上启动后,您需要在 table 视图中使用 locationIn
跟踪位置。
要折叠行,您需要做的就是使用适当的动画修改 table 视图单元格,例如:
tableView.beginUpdates()
tableView.deleteSections([myIndexPath], with: .top) // Maybe experiment with animation type
// Modify whatever you need to correspond this change in the data source
tableView.endUpdates()
由于您将删除该部分,因此您还将删除具有手势识别器的视图 (header)。这意味着将手势直接添加到 table 视图或什至其父视图可能会更好。您需要强制它仅在按下 headers 上的其中一个按钮时触发。您可以对此有所了解 here。其余不受此更改影响。
此时您可能需要创建一个额外的视图来代表您的部分堆栈并跟随您的手指。如果您将它添加为子视图并在其超级视图中使用平移手势识别器 locationIn
操纵它的中心,这应该非常容易:
movableSectionView.center = panGestureRecognizer.location(in: movableSectionView.superview!)
到目前为止,您应该能够抓取折叠所有单元格的部分并能够拖动 "section stack" 视图。现在您需要检查手指在 table 视图中的位置,以了解该部分的放置位置。这有点痛苦,但可以用 visibleCells
和 tableView.indexPath(for: )
:
func indexPathForGestureRecognizer(_ recognizer: UIGestureRecognizer) -> IndexPath {
let coordinateView: UIView = tableView.superview! // This can actually be pretty much anything as long as it is in hierarchy
let y = recognizer.location(in: coordinateView).y
if let hitCell = tableView.visibleCells.first(where: { cell in
let frameInCoordinateView = cell.convert(cell.bounds, to: coordinateView)
return frameInCoordinateView.minY >= y && frameInCoordinateView.maxY <= y
}) {
// We have the cell at which the finger is. Retrieve the index path
return tableView.indexPath(for: hitCell) ?? IndexPath(row: 0, section: 0) // This should always succeed but just in case
} else {
// We may be out of bounds. That may be either too high which means above the table view otherwise too low
if recognizer.location(in: tableView).y < 0.0 {
return IndexPath(row: 0, section: 0)
} else {
guard tableView.numberOfSections > 0 else {
return IndexPath(row: 0, section: 0) // Nothing in the table view at all
}
let section = tableView.numberOfSections-1
return IndexPath(row: tableView.numberOfRows(inSection: section), section: section)
}
}
}
手势识别器结束后,您可以使用此方法获取您要将项目放入的部分。所以只是:
tableView.beginUpdates()
// Modify whatever you need to correspond this change in the data source
tableView.insertSections([indexPathForGestureRecognizer(panGestureRecognizer).section], with: .bottom)
tableView.endUpdates()
这基本上应该足以重新排序,但您可能希望在 table 视图中显示拖动部分所在的位置。就像在堆栈将被放入的部分的末尾有一个占位符。这应该相对容易,只需添加然后移动一个额外的占位符单元格,重新使用 indexPathForGestureRecognizer
来为其定位。
玩得开心。