将UISearchBar锁定到像Game Center这样的UITableView的顶部

时间:2011-02-02 02:00:22

标签: ios uitableview uiscrollview uisearchbar game-center

Game Center中的UITableViews以及它们顶部的搜索栏都有这个很酷的功能。与将搜索栏放在表标题视图中的应用程序(因此它计为标准表格单元格)不同,它似乎用螺栓固定到它上面的父导航栏。 因此,当滚动表格时,搜索栏确实会移动,但如果您在表格边界上滚动,搜索栏将永远不会停止触摸导航栏。

有谁知道这可能是怎么做的?我想知道Apple是否可能将搜索栏和表放在父滚动视图中,但我想知道它是否可能比这简单。

7 个答案:

答案 0 :(得分:28)

Bob的回答是相反的:它应该是MIN(0,scrollView.contentOffset.y)。

此外,为了正确支持调整大小(旋转时会发生),应重用其他帧值。

-(void)scrollViewDidScroll:(UIScrollView *)scrollView 
{
    UISearchBar *searchBar = searchDisplayController.searchBar;
    CGRect rect = searchBar.frame;
    rect.origin.y = MIN(0, scrollView.contentOffset.y);
    searchBar.frame = rect;
}

答案 1 :(得分:7)

您可以将searchBar放在表头中,并为tableView实现 - (void)scrollViewDidScroll:(UIScrollView *)scrollView委托方法。做这样的事情应该有效:

-(void) scrollViewDidScroll:(UIScrollView *)scrollView {
    searchBar.frame = CGRectMake(0,MAX(0,scrollView.contentOffset.y),320,44);
} 

如果您使用了searchDisplayController,则可以使用self.searchDisplayController.searchbar访问搜索栏。

答案 2 :(得分:5)

在Swift 2.1和iOS 9.2.1中

    let searchController = UISearchController(searchResultsController: nil)

        override func viewDidLoad() {
        /* Search controller parameters */
            searchController.searchResultsUpdater = self  // This protocol allows your class to be informed as text changes within the UISearchBar.
            searchController.dimsBackgroundDuringPresentation = false  // In this instance,using current view to show the results, so do not want to dim current view.
            definesPresentationContext = true   // ensure that the search bar does not remain on the screen if the user navigates to another view controller while the UISearchController is active.

            let tableHeaderView: UIView = UIView.init(frame: searchController.searchBar.frame)
            tableHeaderView.addSubview(searchController.searchBar)
            self.tableView.tableHeaderView = tableHeaderView

        }
        override func scrollViewDidScroll(scrollView: UIScrollView) {
           let searchBar:UISearchBar = searchController.searchBar
           var searchBarFrame:CGRect = searchBar.frame
           if searchController.active {
              searchBarFrame.origin.y = 10
           }
           else {
             searchBarFrame.origin.y = max(0, scrollView.contentOffset.y + scrollView.contentInset.top)

           }
           searchController.searchBar.frame = searchBarFrame
       }

答案 3 :(得分:3)

如果你想在游戏中心完全模仿搜索栏,还有一步。

如果您从 friedenberg的优秀答案开始,以及评论中提到的iOS 6+的 followben's 修改,您仍需要在搜索栏中调整功能本身很活跃。

在游戏中心中,当您向下滚动时,搜索栏将随表格一起滚动,但当您尝试向上滚动超出表格边界时,搜索栏将保持固定在导航栏下方。但是,当搜索栏处于活动状态并且正在显示搜索结果时,搜索栏将不再与表格一起滚动; 它仍然固定在导航栏下方

这是实现此目的的完整代码(适用于iOS 6+)。 (如果您的目标是iOS 5或更低版本,则无需将UISearchBar包装在UIView中)

<强> CustomTableViewController.m

- (void)viewDidLoad
{
    UISearchBar *searchBar = [[UISearchBar alloc] init];
    ...
    UIView *tableHeaderView = [[UIView alloc] initWithFrame:searchBar.frame];
    [tableHeaderView addSubview:searchBar];

    [self.tableView setTableHeaderView:tableHeaderView];
}

- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    UISearchBar *searchBar = self.tableView.tableHeaderView.subviews.lastObject;
    CGRect searchBarFrame = searchBar.frame;

    /*
     * In your UISearchBarDelegate implementation, set a boolean flag when
     * searchBarTextDidBeginEditing (true) and searchBarTextDidEndEditing (false)
     * are called.
     */

    if (self.inSearchMode)
    {
        searchBarFrame.origin.y = scrollView.contentOffset.y;
    }
    else
    {
        searchBarFrame.origin.y = MIN(0, scrollView.contentOffset.y);
    }

    searchBar.frame = searchBarFrame;
}

- (void)searchBarTextDidBeginEditing:(UISearchBar *)searchBar
{
    self.inSearchMode = YES;
}

- (void)searchBarTextDidEndEditing:(UISearchBar *)searchBar
{
    self.inSearchMode = NO;
}

瞧!现在,当搜索栏处于非活动状态时,它将随表一起移动,并在尝试移出表边界时保持固定。当激活时,它将保持固定,就像在游戏中心一样。

答案 4 :(得分:1)

虽然其他答案看起来很有帮助并且部分完成了工作,但它并没有解决搜索栏没有接收到用户触摸的问题,因为它在更改其帧时移动到其父视图的边界之外。

更糟糕的是,当您单击搜索栏使其成为第一个响应者时,tableView委托很可能会在搜索栏下方的单元格上调用tableView:didSelectRowAtIndexPath:

为了解决上述问题,您需要将搜索栏包装在一个简单的UIView中,该视图能够处理在其边界之外发生的触摸。通过这种方式,您可以将这些触摸传递到搜索栏。

首先让我们这样做:

class SearchBarView: UIView {
  override func hitTest(point: CGPoint, withEvent event: UIEvent?) -> UIView? {
    for subview in subviews {
      if !subview.userInteractionEnabled { continue }

      let newPoint = subview.convertPoint(point, fromView: self)
      if CGRectContainsPoint(subview.bounds, newPoint) {
        return subview.hitTest(newPoint, withEvent: event)
      }
    }
    return super.hitTest(point, withEvent: event)
  }
}

现在,我们有一个名为SearchBarView的UIView子类,它能够接收在其边界之外发生的触摸。

其次,我们应该在视图控制器加载其视图时将搜索栏放入该新视图中:

class TableViewController: UITableViewController {
  private let searchBar = UISearchBar(frame: CGRectZero)
  ...

  override func viewDidLoad() {
    super.viewDidLoad()
    ...
    searchBar.sizeToFit()
    let searchBarView = SearchBarView(frame: searchBar.bounds)
    searchBarView.addSubview(searchBar)

    tableView.tableHeaderView = searchBarView
  }
}

最后,当用户向下滚动表格视图时,我们应该更新搜索栏的框架,使其保持固定在顶部:

override func scrollViewDidScroll(scrollView: UIScrollView) {
  searchBar.frame.origin.y = max(0, scrollView.contentOffset.y)
}

结果如下:

enter image description here

-

重要提示:如果您的表格视图包含各个部分,则它们可能会遮挡您的搜索栏,因此每次表格视图的bounds更新时,您都需要将搜索栏置于其上方。

enter image description here

viewDidLayoutSubviews是一个很好的地方:

override func viewDidLayoutSubviews() {
  super.viewDidLayoutSubviews()
  ...
  if let tableHeaderView = tableView.tableHeaderView {
    tableView.bringSubviewToFront(tableHeaderView)
  }
}

-

希望这会有所帮助。您可以从here下载示例项目。

答案 5 :(得分:0)

这里的所有其他答案都为我提供了有用的信息,但它们都没有使用iOS 7.1。这是对我有用的简化版本:

MyViewController.h:

@interface MyViewController : UIViewController <UITableViewDelegate, UITableViewDataSource, UISearchBarDelegate, UISearchDisplayDelegate> {
}
@end

MyViewController.m:

@implementation MyViewController {

    UITableView *tableView;
    UISearchDisplayController *searchDisplayController;
    BOOL isSearching;
}

-(void)viewDidLoad {
    [super viewDidLoad];

    UISearchBar *searchBar = [[UISearchBar alloc] initWithFrame:CGRectMake(0, 0, 320, 44)];
    searchBar.delegate = self;

    searchDisplayController = [[UISearchDisplayController alloc] initWithSearchBar:searchBar contentsController:self];
    searchDisplayController.delegate = self;
    searchDisplayController.searchResultsDataSource = self;
    searchDisplayController.searchResultsDelegate = self;

    UIView *tableHeaderView = [[UIView alloc] initWithFrame:searchDisplayController.searchBar.frame];
    [tableHeaderView addSubview:searchDisplayController.searchBar];
    [tableView setTableHeaderView:tableHeaderView];

    isSearching = NO;
}

-(void)scrollViewDidScroll:(UIScrollView *)scrollView {

    UISearchBar *searchBar = searchDisplayController.searchBar;
    CGRect searchBarFrame = searchBar.frame;

    if (isSearching) {
        searchBarFrame.origin.y = 0;
    } else {
        searchBarFrame.origin.y = MAX(0, scrollView.contentOffset.y + scrollView.contentInset.top);
    }

    searchDisplayController.searchBar.frame = searchBarFrame;
}

- (void)searchDisplayControllerWillBeginSearch:(UISearchDisplayController *)controller {
    isSearching = YES;
}

-(void)searchDisplayControllerWillEndSearch:(UISearchDisplayController *)controller {
    isSearching = NO;
}

@end

注意:如果你正在使用&#34;下拉刷新&#34;在您的列表中,您需要使用常量替换scrollView.contentInset.top中的scrollViewDidScroll:,以允许搜索栏滚动刷新动画。

答案 6 :(得分:0)

如果您的部署目标是iOS 9及更高版本,那么您可以使用锚点并以编程方式设置UISearchBar和UITableView:

    private let tableView = UITableView(frame: .zero, style: .plain)
    private let searchBar = UISearchBar(frame: CGRect .zero)

    override func viewDidLoad() {
        super.viewDidLoad()

        tableView.delegate = self
        tableView.dataSource = self
        tableView.contentInset = UIEdgeInsets(top: 44.0, left: 0.0, bottom: 0.0, right: 0.0)

        searchBar.delegate = self
        view.addSubview(tableView)
        view.addSubview(searchBar)
        NSLayoutConstraint.activate([
            searchBar.heightAnchor.constraint(equalToConstant: 44.0),
            searchBar.leadingAnchor.constraint(equalTo: view.leadingAnchor),
            searchBar.trailingAnchor.constraint(equalTo: view.trailingAnchor),
            searchBar.topAnchor.constraint(equalTo: topLayoutGuide.bottomAnchor)
            ])
    }

我假设您从代码创建UISearchBar和UITableView,而不是在storyboard中创建。