如何将UITableView用作TextField的输入视图替代UIPickerView

没问题！我来给你一步步拆解怎么把UIPickerView换成UITableView作为TextField的输入视图——这个方案用户体验会更直观，毕竟列表选择比滚轮更符合很多人的操作习惯～

1. 复用原有选项数据源 #

先把你原来给UIPickerView用的选项数组保留下来，不用重新造轮子：

let selectionOptions = ["北京", "上海", "广州", "深圳", "杭州"] // 替换成你的实际选项

2. 自定义UITableView作为输入视图 #

我们可以在ViewController里创建一个UITableView实例，同时为了方便用户手动收起视图，建议搭配一个带「完成」按钮的工具栏作为输入辅助视图。先在ViewController里声明这些属性：

class ViewController: UIViewController {
    @IBOutlet weak var inputTextField: UITextField!
    
    // 复用你的选项数组
    let selectionOptions = ["北京", "上海", "广州", "深圳", "杭州"]
    
    // 创建选择用的TableView
    private lazy var selectionTableView: UITableView = {
        let tableView = UITableView(frame: CGRect(x: 0, y: 0, width: view.bounds.width, height: 300))
        tableView.delegate = self
        tableView.dataSource = self
        // 注册默认cell，也可以用自定义cell
        tableView.register(UITableViewCell.self, forCellReuseIdentifier: "OptionCell")
        return tableView
    }()
    
    // 创建带完成按钮的工具栏
    private lazy var doneToolbar: UIToolbar = {
        let toolbar = UIToolbar(frame: CGRect(x: 0, y: 0, width: view.bounds.width, height: 44))
        toolbar.barStyle = .default
        let flexibleSpace = UIBarButtonItem(barButtonSystemItem: .flexibleSpace, target: nil, action: nil)
        let doneButton = UIBarButtonItem(title: "完成", style: .done, target: self, action: #selector(dismissInputView))
        toolbar.items = [flexibleSpace, doneButton]
        return toolbar
    }()
    
    // ... 其他生命周期代码
}

3. 给TextField绑定输入视图和辅助视图 #

在viewDidLoad里，把我们创建的TableView设为TextField的inputView，工具栏设为inputAccessoryView——这样点击TextField时，就会弹出TableView而不是系统键盘：

override func viewDidLoad() {
    super.viewDidLoad()
    inputTextField.inputView = selectionTableView
    inputTextField.inputAccessoryView = doneToolbar
}

4. 实现UITableView的核心协议方法 #

让ViewController遵守UITableViewDelegate和UITableViewDataSource协议，实现选项渲染和选中逻辑：

extension ViewController: UITableViewDelegate, UITableViewDataSource {
    // 返回选项数量
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return selectionOptions.count
    }
    
    // 渲染每个cell的内容
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "OptionCell", for: indexPath)
        cell.textLabel?.text = selectionOptions[indexPath.row]
        cell.accessoryType = .disclosureIndicator // 可选，增加选中视觉提示
        return cell
    }
    
    // 处理选中事件：把值填充到TextField并收起视图
    func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
        inputTextField.text = selectionOptions[indexPath.row]
        dismissInputView()
        tableView.deselectRow(at: indexPath, animated: true) // 取消cell选中状态
    }
}

5. 实现收起输入视图的通用方法 #

不管是点击「完成」按钮还是选中选项，都需要调用这个方法收起视图：

@objc private func dismissInputView() {
    inputTextField.resignFirstResponder()
}

额外优化建议 #

• 如果选项数量较多，可以给TableView添加搜索框或者索引条，提升用户查找效率；
• 可以自定义TableViewCell的样式，让它和你的App视觉风格更统一；
• 若需要分组选择，可把TableView改成分组样式，对应实现section相关的数据源方法。

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