如何创建自定义 iOS 键盘

Question

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

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

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

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

我尝试了很多不同的 GitHub 回购协议，但 none 符合我的需要。

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

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

干杯！

Answer 1

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

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

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

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 = [=10=]
        button.setTitle("\([=10=])", 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)

//        if useDecimalSeparator {
//            subStackView.addArrangedSubview(decimalButton)
//        } else {
//            let blank = UIView()
//            blank.layer.borderWidth = 0.5
//            blank.layer.borderColor = UIColor.darkGray.cgColor
//            subStackView.addArrangedSubview(blank)
//        }
        
//        let blank = UIView()
//                  blank.layer.borderWidth = 0.5
//            blank.layer.borderColor = UIColor.darkGray.cgColor
//                   subStackView.addArrangedSubview(blank)
//
//        let blank2 = UIView()
//                  blank2.layer.borderWidth = 0.5
//            blank2.layer.borderColor = UIColor.darkGray.cgColor
//                   subStackView.addArrangedSubview(blank2)

        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(exponentButton3)
        
        subStackView.addArrangedSubview(deleteButton)
        
    //    subStackView.addArrangedSubview(numericButtons[0])
        
        
        
    }

    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)
    }
}

然后我将我的InputView输入法设置为textField.inputView = NumericKeyboard(target: textField)

效果很好。

如何创建自定义 iOS 键盘

How to create a custom iOS keyboard

keyboard

ios

swift