如何在 iOS 中实现数字键盘与文本键盘切换？

2024-07-20 10:25:27

如何在 iOS 中实现数字键盘与文本键盘的灵活切换

在 iOS 开发中，处理用户文本输入是家常便饭。当用户需要输入数字时，系统默认的数字键盘提供了便捷的输入方式。然而，有时我们需要在数字键盘上添加一些自定义功能，例如允许用户在数字键盘和文本键盘之间自由切换，就像你在一些应用中见过的那样。

这篇文章将深入探讨如何在 iOS 应用中实现数字键盘与文本键盘的灵活切换，并提供完整的代码示例和详细的解释，帮助你轻松地将这一功能集成到你的应用中。

挑战在哪里

在 iOS 中，我们可以通过设置 UITextField 的 keyboardType 属性为 UIKeyboardTypeNumberPad 来调出数字键盘。但是，这种方式无法满足更灵活的需求，例如通过按钮在数字键盘和文本键盘之间切换。

传统的解决方案，例如添加子视图或使用 accessoryInputView，都存在一些局限性，无法实现理想的效果：

添加子视图: 这种方法需要操作键盘的视图层级，容易受到系统版本更新的影响，导致兼容性问题，增加维护成本。
使用 accessoryInputView: accessoryInputView 会在键盘上方添加一个工具栏，与我们期望的直接在键盘上切换的效果不符。

那么，如何才能实现那种流畅自然的切换效果呢？

`inputView` 属性：一把利器

UITextField 有一个强大的属性 inputView，它允许开发者自定义文本输入框的输入视图。利用这个属性，我们可以将其设置为一个自定义的视图，并在该视图中实现数字键盘和文本键盘的切换逻辑，从而达到我们想要的效果。

代码示例：让想法变成现实

以下是用 Swift 实现数字键盘与文本键盘切换的代码示例：

import UIKit

class ViewController: UIViewController, UITextFieldDelegate {

    @IBOutlet weak var textField: UITextField!
    
    var numberKeyboard: UIView!
    var textKeyboard: UIView!

    override func viewDidLoad() {
        super.viewDidLoad()
        
        numberKeyboard = createNumberKeyboard()
        textKeyboard = createTextKeyboard()

        textField.inputView = numberKeyboard
        textField.delegate = self
    }
    
    // 创建数字键盘视图
    func createNumberKeyboard() -> UIView {
        let keyboardView = UIView(frame: CGRect(x: 0, y: 0, width: view.frame.width, height: 250))
        keyboardView.backgroundColor = .lightGray
        
        let buttonTitles = ["1", "2", "3", "4", "5", "6", "7", "8", "9", ".", "0", "ABC"]
        var tag = 1
        for buttonTitle in buttonTitles {
            let button = UIButton(type: .system)
            button.setTitle(buttonTitle, for: .normal)
            button.tag = tag
            button.addTarget(self, action: #selector(numberKeyboardTapped(_:)), for: .touchUpInside)
            keyboardView.addSubview(button)
            tag += 1
        }
        
        let stackView = UIStackView(arrangedSubviews: keyboardView.subviews)
        stackView.axis = .vertical
        stackView.distribution = .fillEqually
        stackView.alignment = .fill
        stackView.spacing = 1
        stackView.translatesAutoresizingMaskIntoConstraints = false
        keyboardView.addSubview(stackView)
        
        NSLayoutConstraint.activate([
            stackView.topAnchor.constraint(equalTo: keyboardView.topAnchor),
            stackView.bottomAnchor.constraint(equalTo: keyboardView.bottomAnchor),
            stackView.leadingAnchor.constraint(equalTo: keyboardView.leadingAnchor),
            stackView.trailingAnchor.constraint(equalTo: keyboardView.trailingAnchor),
        ])
        
        return keyboardView
    }
    
    // 创建文本键盘视图
    func createTextKeyboard() -> UIView {
        let keyboardView = UIView(frame: CGRect(x: 0, y: 0, width: view.frame.width, height: 250))
        keyboardView.backgroundColor = .lightGray
        
        let buttonTitles = ["Q", "W", "E", "R", "T", "Y", "U", "I", "O", "P", "A", "S", "D", "F", "G", "H", "J", "K", "L", "Z", "X", "C", "V", "B", "N", "M", "123", "空格", "返回"]
        var tag = 1
        for buttonTitle in buttonTitles {
            let button = UIButton(type: .system)
            button.setTitle(buttonTitle, for: .normal)
            button.tag = tag
            button.addTarget(self, action: #selector(textKeyboardTapped(_:)), for: .touchUpInside)
            keyboardView.addSubview(button)
            tag += 1
        }
        
        let stackView = UIStackView(arrangedSubviews: keyboardView.subviews)
        stackView.axis = .vertical
        stackView.distribution = .fillEqually
        stackView.alignment = .fill
        stackView.spacing = 1
        stackView.translatesAutoresizingMaskIntoConstraints = false
        keyboardView.addSubview(stackView)
        
        NSLayoutConstraint.activate([
            stackView.topAnchor.constraint(equalTo: keyboardView.topAnchor),
            stackView.bottomAnchor.constraint(equalTo: keyboardView.bottomAnchor),
            stackView.leadingAnchor.constraint(equalTo: keyboardView.leadingAnchor),
            stackView.trailingAnchor.constraint(equalTo: keyboardView.trailingAnchor),
        ])
        
        return keyboardView
    }
    
    // 处理数字键盘按钮点击事件
    @objc func numberKeyboardTapped(_ sender: UIButton) {
        guard let buttonTitle = sender.titleLabel?.text else { return }
        
        if buttonTitle == "ABC" {
            textField.inputView = textKeyboard
            textField.reloadInputViews()
        } else {
            textField.insertText(buttonTitle)
        }
    }

    // 处理文本键盘按钮点击事件
    @objc func textKeyboardTapped(_ sender: UIButton) {
        guard let buttonTitle = sender.titleLabel?.text else { return }
        
        if buttonTitle == "123" {
            textField.inputView = numberKeyboard
            textField.reloadInputViews()
        } else {
            textField.insertText(buttonTitle)
        }
    }
}

代码解读

创建键盘视图： 我们创建了两个 UIView 类型的变量 numberKeyboard 和 textKeyboard，分别用于存储自定义的数字键盘视图和文本键盘视图。在 viewDidLoad() 方法中，我们初始化了这两个键盘视图，并将 textField 的 inputView 属性设置为 numberKeyboard，使得默认情况下显示数字键盘。
布局与事件处理： createNumberKeyboard() 和 createTextKeyboard() 方法分别用于创建数字键盘视图和文本键盘视图。在这些方法中，我们创建了 UIButton 类型的按钮，并为其设置了标题、标签和点击事件。我们使用 UIStackView 来对按钮进行布局，确保键盘外观整齐。
切换逻辑： numberKeyboardTapped() 和 textKeyboardTapped() 方法分别处理数字键盘和文本键盘的按钮点击事件。如果点击的是 "ABC" 或 "123" 按钮，则切换键盘类型；否则，将按钮的标题插入到文本框中，实现输入功能。