单击 UISearchBar 时如何用 tableview 替换屏幕上的内容

Posted 2023-03-13

【中文标题】单击 UISearchBar 时如何用 tableview 替换屏幕上的内容

【英文标题】：How to replace the content on screen with a tableview when UISearchBar is clicked

【发布时间】：2020-01-21 10:59:43

【问题描述】：

我知道以前有过这样的问题：here 或 here

但它并没有像我想要的那样详细。我有这个“探索”页面屏幕之类的东西。它在顶部有一个搜索栏，我想在它的中间部分显示内容/帖子。但是当用户点击搜索栏时，我想去一个 tableview 控制器，替换屏幕上的内容，以显示搜索结果。

我在 UIView 容器中嵌入了一个 tableviewcontroller：

import UIKit
import Firebase

class SearchTableViewController: UITableViewController, UISearchResultsUpdating 


let searchController = UISearchController(searchResultsController: nil)
@IBOutlet var searchResultsTableView: UITableView!

var usersArray = [NSDictionary?]()
var filteredIsers = [NSDictionary?]()
var ref = Database.database().reference()

override func viewDidLoad() 
    super.viewDidLoad()

    searchController.searchResultsUpdater = self
    definesPresentationContext = true
    tableView.tableHeaderView = searchController.searchBar

    ref.child("users").child("public").queryOrdered(byChild: "username").observe(.childAdded, with:  (snapshot) in

        if let user = snapshot.value as? [String:Any]
            let username = user["username"] as? String ?? ""
            if(username == SpalshScreenViewController.UserData.username)
                return
            else
                self.usersArray.append(snapshot.value as? NSDictionary)
            
        else
            return
        


        print(self.usersArray)

        // insert rows

        self.searchResultsTableView.insertRows(at: [IndexPath(row: self.usersArray.count-1, section: 0)], with: UITableView.RowAnimation.automatic )
    )

    // Uncomment the following line to preserve selection between presentations
    // self.clearsSelectionOnViewWillAppear = false

    // Uncomment the following line to display an Edit button in the navigation bar for this view controller.
    // self.navigationItem.rightBarButtonItem = self.editButtonItem


// MARK: - Table view data source

override func numberOfSections(in tableView: UITableView) -> Int 
    // #warning Incomplete implementation, return the number of sections
    return 1


override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int 
    // #warning Incomplete implementation, return the number of rows
    if searchController.isActive && searchController.searchBar.text != "" 
        return filteredIsers.count
    else
        return self.usersArray.count
    


func updateSearchResults(for searchController: UISearchController) 
    filterContent(searchText: self.searchController.searchBar.text!)


func filterContent(searchText: String)
    self.filteredIsers = self.usersArray.filter user in
        let username = user!["username"] as? String

        return(username?.lowercased().contains(searchText.lowercased()))!
    
    tableView.reloadData()



override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell 
    let cell = tableView.dequeueReusableCell(withIdentifier: "Cell", for: indexPath)

    let user : NSDictionary?

    if searchController.isActive && searchController.searchBar.text != "" 
        user = filteredIsers[indexPath.row]
    else
        user = self.usersArray[indexPath.row]
    

    cell.textLabel?.text = user?["firstName"] as? String
    cell.detailTextLabel?.text = user?["username"] as? String
    let profilePicUrl = user?["profilePicURL"] as? String
    let encodedurl = URL(string: profilePicUrl!)
    print(profilePicUrl)
    cell.imageView!.kf.setImage(with: encodedurl, placeholder: UIImage(named: "profile_pic"))

    return cell

我是否可以在单独的 UITableViewController 中包含该代码，然后在单击搜索栏时显示该视图？

我知道你会将let searchController = UISearchController(searchResultsController: nil) 更改为let searchController = UISearchController(searchResultsController: tableViewController) 之类的东西

但我不知道如何将所有内容联系起来。在我的searchViewController 中，我提到了 UISearchBar，我想我会在其上添加一个轻击手势，而present 在单击时添加一个 tablecontrollerview 但是这是否意味着动画和搜索栏样式会不一致？

编辑：

所以基本上，我有一个视图控制器，在那个视图控制器中，我在顶部有一个搜索栏（目前什么都不做），在该搜索栏下方将是一个集合视图，其中包含不同的帖子。当用户单击搜索栏时，我想将该集合视图替换为带有搜索结果结果的表格视图。我将如何实现这一目标？

【问题讨论】：

再一次：不要在 Swift 中使用 NSDictionary/NSArray。你扔掉类型信息。始终使用本机类型。要获得漂亮的表格视图动画，请使用 ios 13 中引入的 diffable 数据源 API

这不仅仅是我的代码，我使用了其他人的代码进行测试，一旦我拥有如上所述的工作功能，我将更新所有这些。比起漂亮的动画，我更愿意现在有一个工作功能。

请在此处查看我的答案：***.com/a/48687827/1438311 有一个小动画和代码示例可能完全符合您的需要。

@Peter 哦哇，这看起来正是我想要的！我能否将第一个初始表视图替换为某种集合视图？我有一个视图控制器，在该视图控制器中，我在顶部有一个搜索栏（目前什么都不做），在该搜索栏下方将是一个包含不同帖子的集合视图。当用户单击搜索栏时，我想将该集合视图替换为带有搜索结果结果的表格视图。

【参考方案1】：

您应该设置UISearchController 类的searchResultsController 和searchResultsUpdater 属性

关于 UISearchBar 对象，您必须使用 UISearchController 附带的对象并以编程方式将其添加到视图中。

view.addSubview(searchController.searchBar)

【讨论】：

你能提供一些例子吗？我还会在探索视图中使用 UISearchBar 对象吗？我正在尝试实现类似 instagrams 探索页面的功能。

【参考方案2】：

嘿@nathan，如果你能解释得更详细一点，那就更好了。根据我目前的理解，其他明智的。如果您在视图顶部添加了搜索栏并且其中也有表格视图，那么您可以在搜索栏委托方法中更新您的表格视图。我正在分享搜索栏委托方法以寻求帮助。

extension SearchViewController: UISearchBarDelegate 
func searchBar(_ searchBar: UISearchBar, textDidChange searchText: String) 
    let str = searchText.trimmingCharacters(in: .whitespacesAndNewlines)
        viewModel?.search(text: str)
        tableView.reloadData()


func searchBarSearchButtonClicked(_ searchBar: UISearchBar) 
    if let t = searchBar.text?.trimmingCharacters(in: .whitespacesAndNewlines) 
        if t.count > 0 
            viewModel?.addNewSearch(text: t)
            tableView.reloadData()
        
    
    searchBar.resignFirstResponder()


func searchBarCancelButtonClicked(_ searchBar: UISearchBar) 
    viewModel?.cancel()
    navigationController?.popViewController(animated: true)
 

我在我的代码中使用了 MVVM，因此 ViewModel 基本上用于数据更新和更改。谢谢，如果您有任何困惑，可以询问。

【讨论】：

我有一个视图控制器，在那个视图控制器中，我在顶部有一个搜索栏（目前什么都不做），在该搜索栏下方将是一个包含不同帖子的集合视图。当用户单击搜索栏时，我想将该集合视图替换为带有搜索结果结果的表格视图。

@NathanEllis 您可以在搜索栏委托的 textDidChange 方法中执行此操作。一种解决方案是您可以将表视图放在集合视图之外并连接其 IBOutlet 并编写表视图委托。当搜索栏出现 textdidchange 委托方法时，您可以取消隐藏 tableview 并相应地重新加载其数据。