搜尋框UISearchController的使用及所遇到的坑

TongRy發表於2017-12-13
UIController

不忘初心，堅持下去

以前沒遇到過搜尋功能，所以一直也沒做，這次專案中用到了，就查了下資料，因為我們專案支援iOS8以上的裝置，所以就採用的UISearchController，然後就愉快的用了起來，可是不用不知道，一用嚇一跳呀，剛開始寫的demo，沒有navigation，也沒有sectionIndex,感覺一點坑都沒有，簡直很爽，殊不知無數的坑在等著我跳。下面我就講講我的使用及我所遇到的坑。 #UISearchController的使用 使用懶載入：

- (UISearchController *)searchController {
    if(!_searchController) {
        UISearchController *searchVC = [[UISearchController alloc] initWithSearchResultsController:nil];
        _searchController = searchVC;
        //取消蒙版
        _searchController.dimsBackgroundDuringPresentation = NO;
        _searchController.searchResultsUpdater = self;
        _searchController.searchBar.placeholder = @"搜尋";
        //改變searchBar的文字
        [_searchController.searchBar setValue:@"取消" forKey:@"_cancelButtonText"];
        //改變取消按鈕字型顏色
        self.searchController.searchBar.tintColor = [UIColor colorWithRed:239 / 255.0 green:128 / 255.0 blue:25 / 255.0 alpha:1];
        //去掉searchController.searchBar的上下邊框（黑線）
        UIImageView *barImageView = [[[_searchController.searchBar.subviews firstObject] subviews] firstObject];
        barImageView.layer.borderColor = UIColorFromRGB(0xe5e5e5).CGColor;
        barImageView.layer.borderWidth = 1;
        //改變searchController背景顏色
        _searchController.searchBar.barTintColor = UIColorFromRGB(0xe5e5e5);
         //此處重要一步，將searbar顯示到介面上（在tableView頭檢視中新增時searbar有時會消失，不可控制，原因未找到）
        [self.view addSubview:_searchController.searchBar];
        
    }
    return _searchController;
}
複製程式碼

#第一個大坑 —— sectionIndex 和 searchBar衝突 searchBar加到tableView的headerView上，然後為tableView新增sectionIndex，問題就出來了，因為sectionIndex會佔用位置，tableView整體左移，searchBar也不例外。下面請看圖：

tableView整體左移.png
根據需求這個不是我們要的效果，那如何解決這個問題的，所以在網上找答案，剛開始用百度（沒買翻牆軟體，所以沒到萬不得已不Google），說把sectionIndex背景清除就可以，可是並不能。

    [self.brandListTableView setSectionIndexBackgroundColor:[UIColor clearColor]];
複製程式碼

然後在百度找了好幾頁也沒找到滿意的答案，最後在google裡面找到了，解決方法是把searchBar加在一個UIView上，然後把UIView加在tableHeaderView上，同時sectionIndex背景色要清除，也就是上面一段程式碼（因為sectionIndex一直浮在最上層），就完美解決問題。

    UIView *headerView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, _brandListTableView.bounds.size.width, _searchController.searchBar.size.height)];
    [headerView addSubview:self.searchController.searchBar];
    //設定tableHeaderView
    [self.brandListTableView setTableHeaderView:headerView];
複製程式碼

效果圖：

正常圖.png
#第二個坑 —— 搜尋時searchBar向上偏移64 當在有navigation的時候點選，搜尋時，searchBar向上偏移64，網上的解決方案是：

    self.definesPresentationContext = YES;
複製程式碼

給出的解釋是：

設定definesPresentationContext為YES，可以保證在UISearchController在啟用狀態下使用者push到下一個view controller之後search bar不會仍留在介面上。 蘋果對它官方的解釋是// know where you want UISearchController to be displayed a、如果不新增上面這行程式碼，在設定hidesNavigationBarDuringPresentation這個屬性為YES的時候，搜尋框進入編輯模式會導致，searchbar不可見，偏移-64; 在設定為NO的時候，進入編輯模式輸入內容會導致高度為64的白條，猜測是導航欄沒有渲染出來 b、如果新增了上面這行程式碼，在設定hidesNavigationBarDuringPresentation這個屬性為YES的時候，輸入框進入編輯模式正常顯示和使用;在設定為NO的時候，搜尋框進入編輯模式導致向下偏移64，具體原因暫時未找到

#第三個坑 —— 搜尋結果tableView向上偏移20px 上面的問題解決之後，新問題又出現了，那就是搜尋出結果後，tableView會向上偏移20px。 如圖：

搜尋結果向上偏移20px.png
解決辦法是：

-(void)viewDidLayoutSubviews {
        if(self.searchController.active) {
              [self.brandListTableView setFrame:CGRectMake(0, 20, TLScreenWidth, self.view.height -20)];
        }else {
              self.brandListTableView.frame =self.view.bounds;
        }
}
複製程式碼

解決之後：

搜尋正常.png
這個問題解決之後，新問題又出來了，那就是，每次搜尋完返回之後，tableView都向上偏移20（每次累加），如圖：
tableView向上偏移20px.png
解決辦法是，讓控制器不自動滾動：

      self.automaticallyAdjustsScrollViewInsets = NO;
複製程式碼

以上就是我這次專案中使用的UISearchController和遇到的坑，歡迎交流，如有什麼寫的不好的，請多多指教！

相關文章