以编程方式在 UITableView 上方添加 UITextField

Question

我正在尝试使用 MusicBrainz API 制作搜索应用程序，其中 API 将 return JSON 与输入的搜索词相匹配的数据用户。

这是我目前的 UI:

import UIKit
import WebKit

class ArtistListViewController: UIViewController{
 
    let tableView = UITableView()
    var safeArea: UILayoutGuide!
    var artists: [Artists]?
    
    let textField = UITextField()
    var searchTerm = "Search"
    
    var webView: WKWebView!
 
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        
        safeArea = view.layoutMarginsGuide
        
        searchBar()
        setUpTable()
        setUpNavigation()
  
    }
    
    func searchBar(){
        view.addSubview(textField)
        
        textField.placeholder = "Search"
        textField.frame = CGRect(x: 10,y: 200,width: 300.0,height: 30.0)
        
        textField.borderStyle = UITextField.BorderStyle.line

        textField.translatesAutoresizingMaskIntoConstraints = false
        
        
        //Layout Configs
        textField.topAnchor.constraint(equalTo: view.topAnchor).isActive = true
        
        textField.leftAnchor.constraint(equalTo: view.leftAnchor).isActive = true
        textField.rightAnchor.constraint(equalTo: view.rightAnchor).isActive = true
        
        textField.bottomAnchor.constraint(equalTo: view.bottomAnchor).isActive = true

 }
    
    func setUpTable(){
        view.addSubview(tableView)
        
        ArtistSearchModelData().loadArtists(searchTerm: "Adele"){ [weak self] (artists) in
              self?.artists = artists
              
              DispatchQueue.main.async{
                self?.tableView.reloadData()
              }
        }
        
        //populate with data
        tableView.delegate = self
        tableView.dataSource = self
        tableView.register(TableViewCell.self, forCellReuseIdentifier: "cell")
        
        
        //turn off autoresizing
        tableView.translatesAutoresizingMaskIntoConstraints = false
        
        //Layout Configs
        tableView.topAnchor.constraint(equalTo: view.topAnchor).isActive = true
        tableView.leftAnchor.constraint(equalTo: view.leftAnchor).isActive = true
        tableView.rightAnchor.constraint(equalTo: view.rightAnchor).isActive = true
        tableView.bottomAnchor.constraint(equalTo: view.bottomAnchor).isActive = true
       
    }
    
    func setUpNavigation(){
        self.navigationItem.title = "Artists"
        self.navigationController?.navigationBar.barTintColor = .white
        self.navigationController?.navigationBar.isTranslucent = false
        self.navigationController?.navigationBar.titleTextAttributes = [
            NSAttributedString.Key.foregroundColor: UIColor.orange,
            NSAttributedString.Key.font: UIFont(name: "Arial-BoldMT", size: 30)
        ]
    }

}

这是我的 UI 的样子：

如您所见，我的搜索栏完全消失了，我不知道如何呈现它。

我尝试使用 UIStackView 但得到了相同的结果。

我尝试在互联网上搜索并找到了类似的解决方案，但无法使它们中的任何一个起作用。

将 textField 和 tableView 添加到自定义子视图也不会呈现任何内容，可能是因为它们是函数？我是不是用错了方法？

感谢任何帮助！

Answer 1

您将文本字段限制在视图的顶部：

textField.topAnchor.constraint(equalTo: view.topAnchor).isActive = true

然后，您将 table 视图限制在视图顶部：

tableView.topAnchor.constraint(equalTo: view.topAnchor).isActive = true

所以您的 table 视图覆盖了您的文本字段。

你可以这样做：

tableView.topAnchor.constraint(equalTo: textField.bottomAnchor).isActive = true

将 table 视图的顶部限制在文本字段的底部。

附带说明一下，您应该限制到视图的 安全区域 ...而不是视图本身：

textField.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor).isActive = true

编辑

这是经过上述修改后的 class（请注意，我注释掉了我无法访问的内容，例如您的 Artist 特定代码）：

class ArtistListViewController: UIViewController{
    
    let tableView = UITableView()
    var safeArea: UILayoutGuide!
    //var artists: [Artists]?
    
    let textField = UITextField()
    var searchTerm = "Search"
    
    //var webView: WKWebView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        
        safeArea = view.safeAreaLayoutGuide
        
        searchBar()
        setUpTable()
        setUpNavigation()
        
    }
    
    func searchBar(){
        
        view.addSubview(textField)
        
        textField.placeholder = "Search"
        
        // not needed
        //textField.frame = CGRect(x: 10,y: 200,width: 300.0,height: 30.0)
        
        textField.borderStyle = UITextField.BorderStyle.line
        
        textField.translatesAutoresizingMaskIntoConstraints = false
        
        
        //Layout Configs
        
        // constrain Top to safeArea Top
        textField.topAnchor.constraint(equalTo: safeArea.topAnchor).isActive = true
        
        textField.leftAnchor.constraint(equalTo: safeArea.leftAnchor).isActive = true
        textField.rightAnchor.constraint(equalTo: safeArea.rightAnchor).isActive = true
        
        // don't constrain the bottom
        //textField.bottomAnchor.constraint(equalTo: view.bottomAnchor).isActive = true
        
    }
    
    func setUpTable(){
        view.addSubview(tableView)
        
//      ArtistSearchModelData().loadArtists(searchTerm: "Adele"){ [weak self] (artists) in
//          self?.artists = artists
//
//          DispatchQueue.main.async{
//              self?.tableView.reloadData()
//          }
//      }
//
//      //populate with data
//      tableView.delegate = self
//      tableView.dataSource = self
//      tableView.register(TableViewCell.self, forCellReuseIdentifier: "cell")
        
        
        //turn off autoresizing
        tableView.translatesAutoresizingMaskIntoConstraints = false
        
        //Layout Configs
        
        // constrain Top to textField Bottom
        tableView.topAnchor.constraint(equalTo: textField.bottomAnchor).isActive = true
        
        tableView.leftAnchor.constraint(equalTo: safeArea.leftAnchor).isActive = true
        tableView.rightAnchor.constraint(equalTo: safeArea.rightAnchor).isActive = true
        tableView.bottomAnchor.constraint(equalTo: safeArea.bottomAnchor).isActive = true
        
    }
    
    func setUpNavigation(){
        self.navigationItem.title = "Artists"
        self.navigationController?.navigationBar.barTintColor = .white
        self.navigationController?.navigationBar.isTranslucent = false
        self.navigationController?.navigationBar.titleTextAttributes = [
            NSAttributedString.Key.foregroundColor: UIColor.orange,
            NSAttributedString.Key.font: UIFont(name: "Arial-BoldMT", size: 30)
        ]
    }
    
}

如果您运行按原样编写代码，您应该将搜索文本字段置于（空）table视图上方。

如果您随后取消注释特定于艺术家的代码，它应该可以正常工作。

Answer 2

无法准确找出您使用 UIViewController 而不是 UITableViewController 的原因，因此这是第二个解决方案...

对于这类任务，没有嵌入 UITextField，而是有一个更简单、随时可用的解决方案，称为 UISearchController-

Use a search controller to provide a standard search experience of the contents of another view controller. When the user interacts with a UISearchBar, the search controller coordinates with a search results controller to display the search results.

import UIKit

class TableViewController: UITableViewController, UISearchResultsUpdating, UISearchControllerDelegate {
    
    override func viewDidLoad() {
        super.viewDidLoad()
        createSearchController()
    }

    // MARK: - Table view data source
    
    let items = ["item1", "item2", "item3", "item4"]

    override func numberOfSections(in tableView: UITableView) -> Int { return 1 }
    override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int { return items.count }
    
    override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "identifier", for: indexPath)
        cell.textLabel?.text = items[indexPath.row]
        cell.detailTextLabel?.text = items[indexPath.row] + " detail"
        return cell
    }
    
    // MARK: - Search controller
    
    private let searchController = UISearchController(searchResultsController: nil)
    func createSearchController(){
        searchController.searchResultsUpdater = self
        searchController.delegate = self
        tableView.tableHeaderView = searchController.searchBar
    }
    
    func updateSearchResults(for searchController: UISearchController) {
        // Do something with it
        let searchedText = searchController.searchBar.text
    }
}

最后就是这个样子了

Answer 3

更新约束，它将起作用：

 //Layout Configs
        textField.topAnchor.constraint(equalTo: view.topAnchor).isActive = true
        textField.leftAnchor.constraint(equalTo: view.leftAnchor).isActive = true
        textField.rightAnchor.constraint(equalTo: view.rightAnchor).isActive = true
        textField.heightAnchor.constraint(equalToConstant: 30).isActive = true



  tableView.topAnchor.constraint(equalTo: textField.bottomAnchor).isActive = true
        tableView.leftAnchor.constraint(equalTo: view.leftAnchor).isActive = true
        tableView.rightAnchor.constraint(equalTo: view.rightAnchor).isActive = true
        tableView.bottomAnchor.constraint(equalTo: view.bottomAnchor).isActive = true

Answer 4

当使用调用两个方法时 searchBar() setUpTable() - 您的 tableView 将位于 searchBar 之上。我的意思是您选择调用此方法的顺序

当你像调用它一样调用它时，顶部的一些单元格将隐藏在 searchBar 下。

你可以做这个约束

    textField.translatesAutoresizingMaskIntoConstraints = false
    textField.topAnchor.constraint(equalTo: view.topAnchor).isActive = true
    textField.leftAnchor.constraint(equalTo: view.leftAnchor).isActive = true
    textField.rightAnchor.constraint(equalTo: view.rightAnchor).isActive = true


    tableView.translatesAutoresizingMaskIntoConstraints = false
    tableView.topAnchor.constraint(equalTo: textField.bottomAnchor).isActive = true
    tableView.leftAnchor.constraint(equalTo: view.leftAnchor).isActive = true
    tableView.rightAnchor.constraint(equalTo: view.rightAnchor).isActive = true
    tableView.bottomAnchor.constraint(equalTo: view.bottomAnchor).isActive = true

或者您可以将搜索栏添加到 navigationBar

    let searchController = UISearchController(searchResultsController: nil)
    navigationItem.searchController = searchController
    navigationItem.searchController?.searchBar.delegate = self
    navigationItem.searchController?.obscuresBackgroundDuringPresentation = false
    navigationItem.searchController?.hidesNavigationBarDuringPresentation = false
    navigationItem.searchController?.searchBar.placeholder = "Enter text here..."

以编程方式在 UITableView 上方添加 UITextField

Programatically adding UITextField above UITableView

uitableview

uitextfield

uikit

ios

swift