ios - 如何创建自定义 iOS 键盘

Question

首先，我会让您知道，我在 StackOverflow 以及 Google 和 Github 上查看了很多很多不同的帖子。我已经到处寻找对我有帮助的任何。但是，似乎没有任何效果。它要么已经过时(超过 10 年)，要么完全用 Objective-C 编写。我知道还有其他关于此主题的帖子，但我需要 Swift 5.0 + 中的解决方案，而不是 11 年前在 Obj-C 中使用的古老解决方案，它在今天的所有内容中都已完全弃用。

现在，我的问题。我需要为我的 iOS 应用程序开发一个键盘。它需要是一个数字/操作符类型的键盘，实际上是一个基本的数学键盘。

我不知道如何或从哪里开始，总的来说，我对 Swift/iOS 开发还比较陌生。

我尝试使用 KeyboardKit，(See Github Page)但没有运气；文档非常极少，不足以让初学者有效地学习和使用。

我尝试了许多不同的 GitHub 存储库，但没有一个符合我的需要。

总而言之，我的键盘需要设置为应用程序的默认键盘，(但我稍后会问这个不同的问题)；所以它需要那个选项。它需要完全(轻松 =)可定制。它需要像默认的 Apple 键盘一样工作。

我正在寻找相关的、可扩展的东西

干杯!

Answer 1

我的问题已经解决了。我发现了这个site

在 StackOverflow 上完全解决了我的问题。我能够向键盘添加自定义键，这是我的主要问题。

我创建了一个名为 DigitButton.swift 的类。

import UIKit

class DigitButton: UIButton {
    var digit: Int = 0
}

class NumericKeyboard: UIView {
    weak var target: (UIKeyInput & UITextInput)?
    var useDecimalSeparator: Bool
    
    lazy var parenthesis1: UIButton = {
        let button = UIButton(type: .system)
        let decimalSeparator = "("
        button.setTitle(decimalSeparator, for: .normal)
        button.titleLabel?.font = .preferredFont(forTextStyle: .largeTitle)
        button.setTitleColor(.black, for: .normal)
        button.layer.borderWidth = 0.5
        button.layer.borderColor = UIColor.darkGray.cgColor
        button.accessibilityTraits = [.keyboardKey]
        button.accessibilityLabel = decimalSeparator
        button.addTarget(self, action: #selector(didTapParenthesis1(_:)), for: .touchUpInside)
        return button
    }()
    
    lazy var squareroot: UIButton = {
        let button = UIButton(type: .system)
        let decimalSeparator = "√"
        button.setTitle(decimalSeparator, for: .normal)
        button.titleLabel?.font = .preferredFont(forTextStyle: .largeTitle)
        button.setTitleColor(.black, for: .normal)
        button.layer.borderWidth = 0.5
        button.layer.borderColor = UIColor.darkGray.cgColor
        button.accessibilityTraits = [.keyboardKey]
        button.accessibilityLabel = decimalSeparator
        button.addTarget(self, action: #selector(didTapSquareRoot(_:)), for: .touchUpInside)
        return button
    }()
    
    lazy var parenthesis2: UIButton = {
        let button = UIButton(type: .system)
        let decimalSeparator = ")"
        button.setTitle(decimalSeparator, for: .normal)
        button.titleLabel?.font = .preferredFont(forTextStyle: .largeTitle)
        button.setTitleColor(.black, for: .normal)
        button.layer.borderWidth = 0.5
        button.layer.borderColor = UIColor.darkGray.cgColor
        button.accessibilityTraits = [.keyboardKey]
        button.accessibilityLabel = decimalSeparator
        button.addTarget(self, action: #selector(didTapParenthesis2), for: .touchUpInside)
        return button
    }()
    
    lazy var exponentButton: UIButton = {
        let button = UIButton(type: .system)
        let decimalSeparator = "^0"
        button.setTitle(decimalSeparator, for: .normal)
        button.titleLabel?.font = .preferredFont(forTextStyle: .largeTitle)
        button.setTitleColor(.black, for: .normal)
        button.layer.borderWidth = 0.5
        button.layer.borderColor = UIColor.darkGray.cgColor
        button.accessibilityTraits = [.keyboardKey]
        button.accessibilityLabel = decimalSeparator
        button.addTarget(self, action: #selector(didTapExponentButton(_:)), for: .touchUpInside)
        return button
    }()
    
    lazy var exponentButton2: UIButton = {
        let button = UIButton(type: .system)
        let decimalSeparator = "^2"
        button.setTitle(decimalSeparator, for: .normal)
        button.titleLabel?.font = .preferredFont(forTextStyle: .largeTitle)
        button.setTitleColor(.black, for: .normal)
        button.layer.borderWidth = 0.5
        button.layer.borderColor = UIColor.darkGray.cgColor
        button.accessibilityTraits = [.keyboardKey]
        button.accessibilityLabel = decimalSeparator
        button.addTarget(self, action: #selector(didTapExponentButton2(_:)), for: .touchUpInside)
        return button
    }()
    
    lazy var exponentButton3: UIButton = {
        let button = UIButton(type: .system)
        let decimalSeparator = "^3"
        button.setTitle(decimalSeparator, for: .normal)
        button.titleLabel?.font = .preferredFont(forTextStyle: .largeTitle)
        button.setTitleColor(.black, for: .normal)
        button.layer.borderWidth = 0.5
        button.layer.borderColor = UIColor.darkGray.cgColor
        button.accessibilityTraits = [.keyboardKey]
        button.accessibilityLabel = decimalSeparator
        button.addTarget(self, action: #selector(didTapExponentButton3(_:)), for: .touchUpInside)
        return button
    }()
    
    lazy var exponentButton4: UIButton = {
        let button = UIButton(type: .system)
        let decimalSeparator = "^"
        button.setTitle(decimalSeparator, for: .normal)
        button.titleLabel?.font = .preferredFont(forTextStyle: .largeTitle)
        button.setTitleColor(.black, for: .normal)
        button.layer.borderWidth = 0.5
        button.layer.borderColor = UIColor.darkGray.cgColor
        button.accessibilityTraits = [.keyboardKey]
        button.accessibilityLabel = decimalSeparator
        button.addTarget(self, action: #selector(didTapExponentButton4(_:)), for: .touchUpInside)
        return button
    }()
    
    lazy var addButton: UIButton = {
        let button = UIButton(type: .system)
        let decimalSeparator = "+"
        button.setTitle(decimalSeparator, for: .normal)
        button.titleLabel?.font = .preferredFont(forTextStyle: .largeTitle)
        button.setTitleColor(.black, for: .normal)
        button.layer.borderWidth = 0.5
        button.layer.borderColor = UIColor.darkGray.cgColor
        button.accessibilityTraits = [.keyboardKey]
        button.accessibilityLabel = decimalSeparator
        button.addTarget(self, action: #selector(didTapAddButton(_:)), for: .touchUpInside)
        return button
    }()
    
    lazy var subtractButton: UIButton = {
        let button = UIButton(type: .system)
        let decimalSeparator = "-"
        button.setTitle(decimalSeparator, for: .normal)
        button.titleLabel?.font = .preferredFont(forTextStyle: .largeTitle)
        button.setTitleColor(.black, for: .normal)
        button.layer.borderWidth = 0.5
        button.layer.borderColor = UIColor.darkGray.cgColor
        button.accessibilityTraits = [.keyboardKey]
        button.accessibilityLabel = decimalSeparator
        button.addTarget(self, action: #selector(didTapSubtractButton(_:)), for: .touchUpInside)
        return button
    }()
    
    lazy var divideButton: UIButton = {
        let button = UIButton(type: .system)
        let decimalSeparator = "/"
        button.setTitle(decimalSeparator, for: .normal)
        button.titleLabel?.font = .preferredFont(forTextStyle: .largeTitle)
        button.setTitleColor(.black, for: .normal)
        button.layer.borderWidth = 0.5
        button.layer.borderColor = UIColor.darkGray.cgColor
        button.accessibilityTraits = [.keyboardKey]
        button.accessibilityLabel = decimalSeparator
        button.addTarget(self, action: #selector(didTapDivideButton(_:)), for: .touchUpInside)
        return button
    }()
    
    
    lazy var multiplyButton: UIButton = {
        let button = UIButton(type: .system)
        let decimalSeparator = "*"
        button.setTitle(decimalSeparator, for: .normal)
        button.titleLabel?.font = .preferredFont(forTextStyle: .largeTitle)
        button.setTitleColor(.black, for: .normal)
        button.layer.borderWidth = 0.5
        button.layer.borderColor = UIColor.darkGray.cgColor
        button.accessibilityTraits = [.keyboardKey]
        button.accessibilityLabel = decimalSeparator
        button.addTarget(self, action: #selector(didTapMultiplyButton(_:)), for: .touchUpInside)
        return button
    }()
    
    

    lazy var numericButtons: [DigitButton] = (0...9).map {
        let button = DigitButton(type: .system)
        button.digit = $0
        button.setTitle("\($0)", for: .normal)
        button.titleLabel?.font = .preferredFont(forTextStyle: .title1)
        button.setTitleColor(.black, for: .normal)
        button.layer.borderWidth = 0.5
        button.sizeToFit()
        button.titleLabel?.numberOfLines = 1
        button.titleLabel?.adjustsFontSizeToFitWidth = true
        button.titleLabel?.lineBreakMode = .byTruncatingTail
        button.layer.borderColor = UIColor.darkGray.cgColor
        button.accessibilityTraits = [.keyboardKey]
        button.addTarget(self, action: #selector(didTapDigitButton(_:)), for: .touchUpInside)
        button.inputView.self?.sizeToFit()
        return button
    }

    var deleteButton: UIButton = {
        let button = UIButton(type: .system)
        button.setTitle("⌫", for: .normal)
        button.titleLabel?.font = .preferredFont(forTextStyle: .largeTitle)
        
        button.setTitleColor(.black, for: .normal)
        button.layer.borderWidth = 0.5
        button.layer.borderColor = UIColor.darkGray.cgColor
        button.accessibilityTraits = [.keyboardKey]
        button.accessibilityLabel = "Delete"
        button.addTarget(self, action: #selector(didTapDeleteButton(_:)), for: .touchUpInside)
        return button
    }()
    
    

    init(target: UIKeyInput & UITextInput, useDecimalSeparator: Bool = false) {
        self.target = target
        self.useDecimalSeparator = useDecimalSeparator
        super.init(frame: .zero)
        configure()
    }

    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}

// MARK: - Actions

extension NumericKeyboard {
    
    @objc func didTapSquareRoot(_ sender: DigitButton) {
        insertText("√")
    }
    
    @objc func didTapParenthesis1(_ sender: DigitButton) {
        insertText("(")
    }
    
    @objc func didTapParenthesis2(_ sender: DigitButton) {
        insertText(")")
    }
    @objc func didTapDigitButton(_ sender: DigitButton) {
        insertText("\(sender.digit)")
    }

    @objc func didTapDecimalButton(_ sender: DigitButton) {
        insertText(Locale.current.decimalSeparator ?? ".")
    }
    
    @objc func didTapExponentButton(_ sender: DigitButton){
        insertText("^0")
    }
    
    @objc func didTapExponentButton2(_ sender: DigitButton){
        insertText("^2")
    }
    
    @objc func didTapExponentButton3(_ sender: DigitButton){
        insertText("^3")
    }
    
    @objc func didTapExponentButton4(_ sender: DigitButton){
        insertText("^")
    }
    
    
    @objc func didTapAddButton(_ sender: DigitButton){
        insertText("+")
    }
    
    
    @objc func didTapSubtractButton(_ sender: DigitButton){
        insertText("-")
    }
    
    
    @objc func didTapDivideButton(_ sender: DigitButton){
        insertText("/")
    }
    
    
    @objc func didTapMultiplyButton(_ sender: DigitButton){
        insertText("*")
    }

    @objc func didTapDeleteButton(_ sender: DigitButton) {
        target?.deleteBackward()
    }
}

// MARK: - Private initial configuration methods

private extension NumericKeyboard {
    func configure() {
        autoresizingMask = [.flexibleWidth, .flexibleHeight]
        addButtons()
    }

    func addButtons() {
        let stackView = createStackView(axis: .vertical)
        stackView.frame = bounds
        stackView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
        addSubview(stackView)

        for row in 0 ..< 3 {
            let subStackView = createStackView(axis: .horizontal)
            stackView.addArrangedSubview(subStackView)

            for column in 0 ..< 3 {
                subStackView.addArrangedSubview(numericButtons[row * 3 + column + 1])
            }
        }

        let subStackView = createStackView(axis: .horizontal)
        stackView.addArrangedSubview(subStackView)

        subStackView.addArrangedSubview(numericButtons[0])
        
        subStackView.addArrangedSubview(parenthesis1)
        subStackView.addArrangedSubview(parenthesis2)
        subStackView.addArrangedSubview(squareroot)
                
        subStackView.addArrangedSubview(addButton)
        subStackView.addArrangedSubview(subtractButton)
        subStackView.addArrangedSubview(multiplyButton)
        subStackView.addArrangedSubview(divideButton)
        
        
        subStackView.addArrangedSubview(exponentButton)
        subStackView.addArrangedSubview(exponentButton2)
        subStackView.addArrangedSubview(exponentButton4)
        
        subStackView.addArrangedSubview(deleteButton)
        
    }

    func createStackView(axis: NSLayoutConstraint.Axis) -> UIStackView {
        let stackView = UIStackView()
        stackView.axis = axis
        stackView.alignment = .fill
        stackView.distribution = .fillProportionally
        return stackView
    }

    func insertText(_ string: String) {
        guard let range = target?.selectedRange else { return }

        if let textField = target as? UITextField, textField.delegate?.textField?(textField, shouldChangeCharactersIn: range, replacementString: string) == false {
            return
        }

        if let textView = target as? UITextView, textView.delegate?.textView?(textView, shouldChangeTextIn: range, replacementText: string) == false {
            return
        }

        target?.insertText(string)
    }
}

// MARK: - UITextInput extension

extension UITextInput {
    var selectedRange: NSRange? {
        guard let textRange = selectedTextRange else { return nil }

        let location = offset(from: beginningOfDocument, to: textRange.start)
        let length = offset(from: textRange.start, to: textRange.end)
        return NSRange(location: location, length: length)
    }
}

然后我使用 textField.inputView = NumericKeyboard(target: textField)

设置我的 InputView 输入法

这非常有效。