在 UITableView tableViewHeader 中添加/删除 UISearchBar 的动画

Posted 2023-02-27

【中文标题】在 UITableView tableViewHeader 中添加/删除 UISearchBar 的动画

【英文标题】：Animate adding/removing UISearchBar to/from UITableView tableViewHeader

【发布时间】：2009-08-23 21:08:18

【问题描述】：

我有一个 UITableViewController 的子类。我的代码可以向/从我的 tableView 的 tableHeaderView 添加/删除 UISearchBar。这是我必须执行这些任务的代码：

self.tableView.tableHeaderView = uiSearchBar; //Make the search bar appear
self.tableView.tableHeaderView = nil; //Make the search bar disappear

问题是我希望 UISearchBar 的添加/删除是动画的；添加时从顶部滑入视图，然后在删除时向上滑动并移出视图，而不仅仅是出现和消失。有什么建议吗？

谢谢。

【参考方案1】：

我终于能够弄清楚这一点。结果很简单。我没有将 UISearchBar 添加到表头，而是将其插入到带有动画 UITableViewRowAnimationTop 的表的第一个单元格中，并使用相同的方法将其删除。这导致酒吧从顶部滑入和滑出。这是使该栏出现的代码：

NSIndexPath *indexPath = [NSIndexPath indexPathForRow:0 inSection:0];
[self.baseUiTableView insertRowsAtIndexPaths:[NSArray arrayWithObject:indexPath] withRowAnimation:UITableViewRowAnimationTop];
[self.baseUiTableView scrollToRowAtIndexPath:[NSIndexPath indexPathForRow:0 inSection:0] atScrollPosition:UITableViewScrollPositionTop animated:YES];

这是删除搜索栏的代码：

[uiSearchBar resignFirstResponder];
NSIndexPath *indexPath = [NSIndexPath indexPathForRow:0 inSection:0];
[self.baseUiTableView deleteRowsAtIndexPaths:[NSArray arrayWithObject:indexPath] withRowAnimation:UITableViewRowAnimationTop];

【讨论】：

这种方法对处理单元格交互时选择的行索引有任何影响吗？

【参考方案2】：

也适用于 UITableViewStyleGrouped 的更简单的方法（另外不需要更改行数）是为表格的contentInset 设置动画：

CGFloat h = uiSearchBar.bounds.size.height;
UITableView *tv = self.tableView;
if (tv.tableHeaderView)
  // hide bar
   [UIView animateWithDuration:0.3 animations:^
      tv.contentInset = UIEdgeInsetsMake(-h, 0, 0, 0);
    completion:^(BOOL finished) 
      tv.contentInset = UIEdgeInsetsZero;
      tv.tableHeaderView = nil;
      [tv scrollToRowAtIndexPath:[NSIndexPath indexPathForRow:0 inSection:0] atScrollPosition:UITableViewScrollPositionTop animated:NO];
   ];

else
  // show bar
   uiSearchBar.frame = CGRectMake(0, -h, tv.frame.size.width, h);
   [UIView animateWithDuration:0.3 animations:^
      [tv scrollToRowAtIndexPath:[NSIndexPath indexPathForRow:0 inSection:0] atScrollPosition:UITableViewScrollPositionTop animated:NO];
      tv.tableHeaderView = uiSearchBar;
   ];

我知道这是 OP 提出问题三年后，但由于这是实现预期效果的好选择，我认为它可能对其他遇到相同问题的人有用。

【讨论】：

发现错误...或者我错了吗？ tv.size.width 必须是 tv.frame.size.width 并且可能 tv.size.height 需要减少到，例如 44.0f 或只是 h。

确实！ +1 发现这一点。谢谢。我已经在上面的代码中解决了这个问题。

这对我来说非常有效，但是我试图弄清楚它的“显示”部分是如何工作的......为什么它会使框架动画？是因为当您将栏添加到 tableview 时，它会将栏的框架原点 y 设置为 0，这会导致它从 -h 向下动画？

确实如此。当您设置tv.tableHeaderView = uiSearchBar 时，它会自动设置uiSearchBar.frame.origin.y = 0，就像所有框架属性一样进行动画处理。

【参考方案3】：

尝试让您的表格视图滚动（动画），以便只有搜索栏下方的行可见，然后移除搜索栏并滚动到没有动画的同一行。