如何从屏幕顶部为表格视图控制器显示 UISearchBar

Question

我希望复制 Facebook Messenger 应用程序显示 UISearchBar 的方式。当您点击导航栏中的 leftBarButtonItem 时，UISearchBar 会从屏幕顶部向下出现/动画，当您取消时，它会从其起源的位置向上消失。

我曾经将 UISearchBar 作为我的表视图标题（在故事板中）中的默认设置，但现在我想做我上面所说的，但我不确定从哪里开始。我的搜索显示控制器仍在我的情节提要中，但我已从情节提要的 tableView 控制器中删除了 searchBar。

感谢您提供的任何帮助！

Answer 1

Facebook 似乎隐藏了导航栏并在顶部显示了搜索栏和搜索显示控制器。尝试使用[self.navigationController setNavigationBarHidden:YES animated:NO]; 隐藏导航栏，并将搜索栏和搜索显示显示为 tableView 的 childView。 （我假设你知道“Search Bar and Search Display Controller”对象是如何工作的）

另一种方法是避免 UITableViewController 并在 UIViewController 中添加 UITableView 并将搜索栏隐藏在导航栏下，这样当您隐藏导航栏时，搜索栏是可见的。

您也可以将 UISearchBar 设置为 UINavigationBar 的titleView 为described here。

Answer 2

省略我自己的项目的细节，我做了同样的事情，如下所示：

static CGFloat searchBarHeight = 64.0;

@implementation
{
    NSArray *_tableData; // active list of data to show in table at the moment
    NSMutableArray *_filteredContacts; // filtered list while search is active
    NSArray *_allContacts; // initial list of all data without search
    UIView* _searchBarWrapper;
    UIView *_shadowView;
    UISearchBar *_searchBar;
}

- (void)loadView
{
    [super loadView];

    self.navigationItem.leftBarButtonItem = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemSearch target:self action:@selector(showSearchBar:)];

    _searchBarWrapper = [[UIView alloc] initWithFrame:CGRectMake(0, -searchBarHeight, self.navigationController.view.bounds.size.width, searchBarHeight)];
    _searchBar = [[UISearchBar alloc] initWithFrame:CGRectMake(0, 20.0, _searchBarContainer.bounds.size.width, searchBarHeight - 20.0)];
    [_searchBarContainer addSubview:_searchBar];
    [self.navigationController.view addSubview:_searchBarContainer];

    _shadowView = [[UIView alloc] initWithFrame:self.navigationController.view.bounds];
    _shadowView.backgroundColor = [UIColor blackColor];
    _shadowView.alpha = 0;
    [self.navigationController.view addSubview:_shadowView];
    UITapGestureRecognizer *tapGesture = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(hideSearchBar:)];
    UISwipeGestureRecognizer *swipeGesture = [[UISwipeGestureRecognizer alloc] initWithTarget:self action:@selector(hideSearchBar:)];
    [_shadowView addGestureRecognizer:tapGesture];
    [_shadowView addGestureRecognizer:swipeGesture];

    //_searchController = [[UISearchDisplayController alloc] initWithSearchBar:_searchBar contentsController:self];
    //_searchController.delegate = self;
    //_searchController.searchResultsDataSource = self;
    //_searchController.searchResultsDelegate = self;
}

- (void)showSearchBar:(id)sender
{
    [_searchBar becomeFirstResponder];
    [UIView animateWithDuration:0.25 animations:^{
        _searchBarWrapper.center = CGPointMake(_searchBar.center.x, searchBarHeight/2.0);
        _shadowView.alpha = 0.5;
    }];
}

- (void)hideSearchBar:(id)sender
{
    _searchBar.text = nil;
    [_tableView reloadData];

    [UIView animateWithDuration:0.25 animations:^{
        _searchBarWrapper.center = CGPointMake(_searchBar.center.x, -searchBarHeight/2.0);
        _shadowView.alpha = 0.0;
    }];
    [_searchBar resignFirstResponder];
    [_tableView reloadData];
}

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    _tableData = _searchBar.isFirstResponder ? _filteredContacts : _allContacts;

    ....................
}


- (void)searchBar:(UISearchBar *)searchBar textDidChange:(NSString *)searchText
{
    if (searchText.length) {

        _filteredContacts = ....;

        _shadowView.alpha = 0.0;
        [_tableView reloadData];
    }
    else {
        _shadowView.alpha = 0.5;
    }
}

- (void)searchBarCancelButtonClicked:(UISearchBar*)searchBar
{
    [self hideSearchBar:searchBar];
}

注意：这种构造的一般行为类似于UISearchDisplayController，唯一的区别是我们使用同一张表来显示所有结果和过滤结果。我们还需要人工阴影视图。

这是我的初始代码，它的行为与 FB People 视图控制器一致。 在您发表评论后，我编写了标准 UISearchDisplayController 嵌入，但在将其注释掉后，因为它破坏了所需的 UI。无法更改其动画行为。

Answer 3

查看 Apple 的 UICatalog 示例代码。基本上只需以模态方式展示您的UISearchController，您就可以免费获得下拉动画。