如何让TableView中的SearchBar样式与iOS设置App中的一致？

我懂你想要的那种系统级搜索体验——就是设置App里那种简约干净的搜索栏样式，点击搜索时背景自动灰化的交互对吧？之前你直接用UISearchBar加代理的方式，确实没法实现这种原生效果，因为这种体验是苹果用UISearchController封装好的，不是单纯的UISearchBar能搞定的。下面一步步教你改：

1. 替换原有实现：用UISearchController替代单独的UISearchBar #

首先可以把你在Interface Builder里拖的UISearchBar删掉，我们用代码来创建UISearchController（当然也可以结合IB，但代码方式更灵活可控）。UISearchController自带了搜索栏、背景灰化、搜索状态管理这些你要的特性。

2. 在ViewController里配置UISearchController #

在你的TableView所在的ViewController的viewDidLoad方法里添加以下代码：

override func viewDidLoad() {
    super.viewDidLoad()
    
    // 初始化搜索控制器：如果搜索结果就在当前TableView展示，就传nil
    let searchController = UISearchController(searchResultsController: nil)
    
    // 设置搜索栏代理，处理搜索相关事件
    searchController.searchBar.delegate = self
    
    // 开启点击搜索时灰化背景的效果，这就是你要的交互
    searchController.obscuresBackgroundDuringPresentation = true
    
    // 设置搜索栏为系统设置App的简约样式
    searchController.searchBar.searchBarStyle = .minimal
    
    // 将搜索栏设置为TableView的头部视图
    tableView.tableHeaderView = searchController.searchBar
    
    // 确保当前控制器负责管理搜索界面的呈现，避免导航栏混乱
    definesPresentationContext = true
}

如果是Objective-C，对应的代码如下：

- (void)viewDidLoad {
    [super viewDidLoad];
    
    UISearchController *searchController = [[UISearchController alloc] initWithSearchResultsController:nil];
    searchController.searchBar.delegate = self;
    searchController.obscuresBackgroundDuringPresentation = YES;
    searchController.searchBar.searchBarStyle = UISearchBarStyleMinimal;
    self.tableView.tableHeaderView = searchController.searchBar;
    self.definesPresentationContext = YES;
}

3. 实现搜索相关的代理逻辑 #

接下来实现UISearchBarDelegate的方法，处理搜索文本变化、取消搜索等事件：

extension YourViewController: UISearchBarDelegate {
    // 搜索文本变化时触发，这里写你的数据过滤逻辑
    func searchBar(_ searchBar: UISearchBar, textDidChange searchText: String) {
        // 示例：根据搜索文本过滤数据源
        filteredDataSource = originalDataSource.filter { $0.contains(searchText) }
        tableView.reloadData()
    }
    
    // 点击取消按钮时重置数据
    func searchBarCancelButtonClicked(_ searchBar: UISearchBar) {
        filteredDataSource = originalDataSource
        tableView.reloadData()
        searchBar.resignFirstResponder()
    }
}

关键说明 #

• obscuresBackgroundDuringPresentation这个属性就是控制点击搜索时背景灰化的开关，设置为true就会有你要的效果。
• searchBarStyle = .minimal对应设置App里那种无圆角、融入背景的简约搜索栏样式。
• definesPresentationContext = true这个属性很重要，它能确保搜索界面只在当前控制器内呈现，不会覆盖导航栏或者其他控制器的内容。

这样改完之后，你的搜索栏就会和系统设置App里的样式、交互完全一致啦！

内容的提问来源于stack exchange，提问作者user9555270