Swift 创建自定义键盘 （金融、聊天等领域）

最新推荐文章于 2024-04-21 10:07:07 发布
最新推荐文章于 2024-04-21 10:07:07 发布
阅读量1.3k 收藏 1
点赞数
分类专栏： iOS 文章标签： swift ios xcode
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kicinio/article/details/119919280
版权

前言：

某些业务领域要求使用自定义键盘而非系统内置的键盘，这时候可选择基于View类来完成一个键盘的开发。这里模拟一个简单的数字键盘，来演示一个自定义键盘的完成。

业务模拟：

某ViewController内存在一个这样的UITextField，该UITextField点击后可弹出我们自定义的键盘（称之为MyKeyBoard），而系统内置的键盘则不会被弹出。另外，MyKeyBoard内存在0～9内这10个数值，以及一个DEL键（删除键）。每个按键的作用与常见的按键功能相同，不再赘述。当用户输入完后一个特定的动作（对应委托方法：textFieldShouldBeginEditing()） 则会将键盘收回。

编码：

View部分：

采用SnapKit进行布局。下面是一个非常简单易懂的思路：

  • 按键总计共12个，即每行3个每列4个。可按从上至下、从左到右分为1、2、3、4、5、6、7、8、9、*、0、DEL。
  • 最左侧按键其对于左侧的约束相同，即按键1、4、7、* 这4个按键的相对于根视图左侧约束相同。
  • 位于中间的按键其X轴都位于其根视图的中央，即3、6、9、0这4个按键的centerX()等于根视图。
  • 位于最右侧的按键相对于最右侧约束都相同，即按键2、5、8、DEL这4个按键相对于根视图右侧约束都相同。
  • 每一行的按键都位于其上一行的按键的下方，即下一行的按键的top.equalTo(上一行按键.snp.bottom).offset(偏移值)；第一行按键直接进行布局，无须参考上一行按键。
  • 可设置一UIButton泛型集合，用以保存创建的按键变量进行引用。
    var WIDTH: Int = Int(UIScreen.main.bounds.size.width)
    var HEIGHT: Int = Int(UIScreen.main.bounds.size.height)
    var keyBoardTitles: Array<String> = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "*", "0", "Del"]

    private func installKeyButton(){
        var fowardButtonArray: Array<UIButton> = Array<UIButton>()
        
        //  Create custom button type.
        for i in 0..<12 {
            let button = UIButton(type: .system)
            button.tag = i
            button.addTarget(self, action: #selector(buttonEvent(button:)), for: UIControl.Event.touchDown)
            button.isEnabled = true
            button.isUserInteractionEnabled = true
            button.titleLabel?.font = .boldSystemFont(ofSize: 21)
            button.setTitleColor(UIColor.black, for: UIControl.State.normal)
            button.setTitle(keyBoardTitles[i], for: UIControl.State.normal)
            
            // Put the index of every cow's last position.
            // It's meanning of next cow's top equals foward cow's UIButton's bottom.
            if (i == 2) || (i == 5) || (i == 8) || (i == 11){
                fowardButtonArray.append(button)
            }
            
            self.addSubview(button)
            
            // Judgement if the button is licated in keyboard matrix.
            if (i == 0) || (i == 3) || (i == 6) || (i == 9){
                
                // If keyboard of button is not located in first cow.
                if (i == 3) || (i == 6) || (i == 9) {
                    button.snp.makeConstraints{ make in
                        make.width.equalTo((WIDTH / 3) - 60)
                        make.height.equalTo(40)
                        make.left.equalTo(self.snp.left).offset(5)
                        make.top.equalTo(fowardButtonArray[returnIndex(index: i)].snp.bottom).offset(30)
                    }
                } else {
                    button.snp.makeConstraints{ make in
                        make.width.equalTo((WIDTH / 3) - 60)
                        make.height.equalTo(40)
                        make.left.equalTo(self.snp.left).offset(5)
                    }
                }
            } else if (i == 1) || (i == 4) || (i == 7) || (i == 10){

                // If keyboard of button is not located in first cow.
                if (i == 4) || (i == 7) || (i == 10) {
                    button.snp.makeConstraints{ make in
                        make.width.equalTo((WIDTH / 3) - 60)
                        make.height.equalTo(40)
                        make.centerX.equalToSuperview()
                        make.top.equalTo(fowardButtonArray[returnIndex(index: i)].snp.bottom).offset(30)
                    }
                } else {
                    button.snp.makeConstraints{ make in
                        make.width.equalTo((WIDTH / 3) - 60)
                        make.height.equalTo(40)
                        make.centerX.equalToSuperview()
                    }
                }
            } else if (i == 2) || (i == 5) || (i == 8) || (i == 11){
                // If keyboard of button is not located in first cow.
                if (i == 5) || (i == 8) || (i == 11) {
                    button.snp.makeConstraints{ make in
                        make.width.equalTo((WIDTH / 3) - 60)
                        make.height.equalTo(40)
                        make.right.equalTo(self.snp.right).offset(-5)
                        make.top.equalTo(fowardButtonArray[returnIndex(index: i)].snp.bottom).offset(30)
                    }
                } else {
                    button.snp.makeConstraints{ make in
                        make.width.equalTo((WIDTH / 3) - 60)
                        make.height.equalTo(40)
                        make.right.equalTo(self.snp.right).offset(-5)
                    }
                }
            }
            
        }
    }
    
    // MARK: - Business block.
    // Return a concrete cow index by colum index.
    private func returnIndex(index: Int) -> Int{
        if (index == 3) || (index == 4) || (index == 5) {
            return 0
        } else if (index == 6) || (index == 7) || (index == 8) {
            return 1
        } else if (index == 9) || (index == 10) || (index == 11) {
            return 2
        } else {
            return 0
        }
    }

响应部分：

响应部分具体有以下几个部分：

  • 每个按键的响应功能。
  • 弹出。
  • 消失。

弹出与消失很简单，依附于UIView即可完成这类操作。下面是每个按键的响应部分分析：
主VC弹出MyKeyBoardView后，后者的按键事件要能传递到前者内的UITextField，且要保证健壮性（DEL键不能操纵其它变量为nil类型）使用协议与代理可很容易完成这点。下面是MyKeyBoardView的全部代码：

//
//  MyKeyBoardView.swift
//  Compent
//
//  Created by Eldest's MacBook on 2021/8/23.
//

import UIKit
import SnapKit

class MyKeyBoardView: UIView {
    public var delegate: KeyBoardViewProtocol?
    
    // MARK: - Global variables.
    var WIDTH: Int = Int(UIScreen.main.bounds.size.width)
    var HEIGHT: Int = Int(UIScreen.main.bounds.size.height)
    var keyBoardTitles: Array<String> = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "*", "0", "Del"]
    var tempString: String = ""
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        
        initConfig()
        
        installKeyButton()
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    // MARK: - Init configuration.
    private func initConfig(){
        self.backgroundColor = UIColor(red: 0.99, green: 0.99, blue: 0.998, alpha: 1.0)
    }
    
    // MARK: - Install widget.
    private func installKeyButton(){
        var fowardButtonArray: Array<UIButton> = Array<UIButton>()
        
        //  Create custom button type.
        for i in 0..<12 {
            let button = UIButton(type: .system)
            button.tag = i
            button.addTarget(self, action: #selector(buttonEvent(button:)), for: UIControl.Event.touchDown)
            button.isEnabled = true
            button.isUserInteractionEnabled = true
            button.titleLabel?.font = .boldSystemFont(ofSize: 21)
            button.setTitleColor(UIColor.black, for: UIControl.State.normal)
            button.setTitle(keyBoardTitles[i], for: UIControl.State.normal)
            
            // Put the index of every cow's last position.
            // It's meanning of next cow's top equals foward cow's UIButton's bottom.
            if (i == 2) || (i == 5) || (i == 8) || (i == 11){
                fowardButtonArray.append(button)
            }
            
            self.addSubview(button)
            
            // Judgement if the button is licated in keyboard matrix.
            if (i == 0) || (i == 3) || (i == 6) || (i == 9){
                
                // If keyboard of button is not located in first cow.
                if (i == 3) || (i == 6) || (i == 9) {
                    button.snp.makeConstraints{ make in
                        make.width.equalTo((WIDTH / 3) - 60)
                        make.height.equalTo(40)
                        make.left.equalTo(self.snp.left).offset(5)
                        make.top.equalTo(fowardButtonArray[returnIndex(index: i)].snp.bottom).offset(30)
                    }
                } else {
                    button.snp.makeConstraints{ make in
                        make.width.equalTo((WIDTH / 3) - 60)
                        make.height.equalTo(40)
                        make.left.equalTo(self.snp.left).offset(5)
                    }
                }
            } else if (i == 1) || (i == 4) || (i == 7) || (i == 10){

                // If keyboard of button is not located in first cow.
                if (i == 4) || (i == 7) || (i == 10) {
                    button.snp.makeConstraints{ make in
                        make.width.equalTo((WIDTH / 3) - 60)
                        make.height.equalTo(40)
                        make.centerX.equalToSuperview()
                        make.top.equalTo(fowardButtonArray[returnIndex(index: i)].snp.bottom).offset(30)
                    }
                } else {
                    button.snp.makeConstraints{ make in
                        make.width.equalTo((WIDTH / 3) - 60)
                        make.height.equalTo(40)
                        make.centerX.equalToSuperview()
                    }
                }
            } else if (i == 2) || (i == 5) || (i == 8) || (i == 11){
                // If keyboard of button is not located in first cow.
                if (i == 5) || (i == 8) || (i == 11) {
                    button.snp.makeConstraints{ make in
                        make.width.equalTo((WIDTH / 3) - 60)
                        make.height.equalTo(40)
                        make.right.equalTo(self.snp.right).offset(-5)
                        make.top.equalTo(fowardButtonArray[returnIndex(index: i)].snp.bottom).offset(30)
                    }
                } else {
                    button.snp.makeConstraints{ make in
                        make.width.equalTo((WIDTH / 3) - 60)
                        make.height.equalTo(40)
                        make.right.equalTo(self.snp.right).offset(-5)
                    }
                }
            }
            
        }
    }
    
    // MARK: - Business block.
    // Return a concrete cow index by colum index.
    private func returnIndex(index: Int) -> Int{
        if (index == 3) || (index == 4) || (index == 5) {
            return 0
        } else if (index == 6) || (index == 7) || (index == 8) {
            return 1
        } else if (index == 9) || (index == 10) || (index == 11) {
            return 2
        } else {
            return 0
        }
    }
    
    // According to buttons's tag (parameter is index) to return KeyBoard's real content in the
    // world.
    private func returnContent(index: Int) -> String{
        switch index {
        case 0:
            return "1"
        case 1:
            return "2"
        case 2:
            return "3"
        case 3:
            return "4"
        case 4:
            return "5"
        case 5:
            return "6"
        case 6:
            return "7"
        case 7:
            return "8"
        case 8:
            return "9"
        case 9:
            return "*"
        case 10:
            return "0"
        case 11:
            return "del"
        default:
            return ""
        }
    }
    
    // MARK: - Event block.
    @objc func show(){
        UIApplication.shared.keyWindow?.addSubview(self)
        UIView.animate(withDuration: 0.55, animations: {
            self.alpha = 1.0
            self.center = CGPoint(x: (Int(self.frame.width) / 2), y: self.HEIGHT - 138)
        })
    }
    
    @objc func dismissView(){
        UIView.animate(withDuration: 0.3, animations: {
            self.alpha = 0
        }) { (true) in
            self.removeFromSuperview()
        }
    }
    
    @objc func buttonEvent(button: UIButton){
        // If touch down the DEL button.
        if button.tag == 11 {
            // If currently tempString's count equals 0 and which means tempString should not
            // call the menthod of removeLast().
            if tempString.count != 0 {
                tempString.removeLast()
                delegate?.sentData(tempString)
            }
        } else {
            tempString.append(returnContent(index: button.tag))
            delegate?.sentData(tempString)
        }
    }

}

// MARK: - Protocol block.
protocol KeyBoardViewProtocol {
    func sentData(_ data: String)
}

主VC：

主VC内需要注意就是响应者的问题。虚拟机内无内置键盘，因此一定会弹出我们的自定义键盘，而真机则会将二者均弹出。

这就需要当textFieldShouldBeginEditing()被调用时我们将MyKeyBoardView注册为第一响应者，当textFieldShouldReturn()被调用时失去焦点，卸载第一响应者的身份。

import UIKit

class KeyBoardViewController: BaseViewController, UITextFieldDelegate, KeyBoardViewProtocol {
    
    func sentData(_ data: String) {
        self.textField?.text = data
    }
    
    private var textField: UITextField!
    private var tempString: String = ""
    private var mKeyBoardView: MyKeyBoardView!
    
    private func initView(){
        textField = UITextField(frame: CGRect(x: 10, y: 200, width: (Int(self.view.frame.width) - 20), height: 45))
        textField.borderStyle = .bezel
        textField.delegate = self
        self.view.addSubview(textField)
    }

    override func viewDidLoad() {
        super.viewDidLoad()

        // Do any additional setup after loading the view.
        initView()
    }
    
    func textFieldShouldBeginEditing(_ textField: UITextField) -> Bool {
        let keyBoardView = MyKeyBoardView(frame: CGRect(x: 0, y: self.view.frame.height - 277, width: self.view.frame.width, height: 277))
        mKeyBoardView = keyBoardView
        keyBoardView.delegate = self
        tempString = keyBoardView.tempString
        keyBoardView.becomeFirstResponder()
        self.textField.inputView = keyBoardView
        keyBoardView.show()
        
        return true
    }

    func textFieldShouldEndEditing(_ textField: UITextField) -> Bool {
        textField.text = tempString
        return true
    }
    
    func textFieldShouldReturn(_ textField: UITextField) -> Bool {
        mKeyBoardView.resignFirstResponder()
        mKeyBoardView.dismissView()
        return true
    }

}

效果：

未弹出键盘时：
未弹出键盘
弹出后点击了部分按键：
在这里插入图片描述

点击了删除按键：
在这里插入图片描述

kicinio
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
SwiftUI 键盘组件大全之SwiftUI 3.0 中的键盘更新
iCloudEnd的博客
12-29 1078
本文将向您展示如何添加完成按钮、替换返回按钮、在键盘上方添加自定义栏以及如何使用 FocusState 使 TextField 成为第一响应者。 完成按钮 首先，要添加完成按钮，只需添加一个 TextField 并添加以下修饰符： .submitlabel(.done) 这应该产生这样的结果： 如果有关于仅在 IOS 15 中可用的错误，请通过单击您的 Xcode 项目并单击目标然后单击 IOS 版本来更改目标操作系统，或者执行 Xcode 提供的自动完成代码。 键盘上方的自定义视图 要像在 Goo.
Objective-C-如何自定义键盘（iOS）
京津追梦人
09-21 853
//createMyInputView该方法返回一个UIImageView类型的视图     UIImageView *myView= [self createMyInputView];     //让此视图作为键盘的背景视图     textField.inputView = myView;          //添加附件区域     UIView *u
[译] 用 Swift 创建自定义的键盘
gongyuhonglou的博客
05-31 1468
本文翻译自 How to make a custom keyboard in iOS 8 using Swift 我将讲解一些关于键盘扩展的基本知识，然后使用iOS 8 提供的新应用扩展API来创建一个莫斯码键盘。大概需要你花20多分钟来走完所有的步骤。 完整代码 综述 一个自定义的键盘会替换系统的键盘，来提供给用户一个新的文本输入方法，或者输入哪些iOS系统还不支持的语言。一个自定义键盘的基本
DKSChatKeyboard：一款高度自定义的聊天输入法 SDK
最新发布
gitblog_00046的博客
04-21 277
DKSChatKeyboard：一款高度自定义的聊天输入法 SDK 项目地址:https://gitcode.com/FirstDKS521/DKSChatKeyboard 项目简介 DKSChatKeyboard 是一个开源的 iOS 开发框架，专为打造个性化的聊天应用输入界面而设计。开发者可以轻松集成此 SDK 到自己的应用中，为用户提供丰富的表情、贴图、文字编辑等功能，增强用户的互动体验。 ...
swift-Swift自定义键盘
08-15
Swift自定义键盘
swift4.0 - 自定义键盘
super_niuxinhuai的博客
07-10 1368
老规矩 Demo地址 看下我们自定义的键盘效果 项目中需求不能让用户使用汉字输入法，同时不能联想等等。说了一大堆。没办法自己手动实现一下只带大小写英文和数字输入法以及标点符号输入。 首先还是要先感谢@Misaki_yuyi这篇文章的思路iOS 自定义数字和字母键盘 基于自定义的基础上实现了基本的需求 大致实现思路如下 1.主键盘26个按钮采用UIC...
iOS开发之UIKeyboardTypeNumberPad数字键盘自定义按键
01-05
最近做一个搜索用户的功能，这里使用了UISearchBar。由于搜索的方式只有手机号码，所以这里的键盘要限制为数字输入，可以这么做： self.searchBar.keyboardType = UIKeyboardTypeNumberPad;如果使用的不是搜索框而是textField输入框，可以设置textField的键盘属性来展示 self.textField.keyboardType = UIKeyboardTypeNumberPad;监听事件如下所示即可。 但是这里有个问题，就是数字键盘上面没有“搜索”按钮，这样子用户在输入完手机号码后无法搜索。所以这个时候我们需要自己添加一个自定
CustomExtensionKeyboard:用Swift 4.1编写的自定义键盘扩展
05-02
使用Swift和App扩展API的自定义键盘。 从iOS 8开始，应用程序可以在用户使用其他应用程序时向其扩展自定义功能。 自定义键盘就是其中之一。 一旦您运行该应用程序，您的扩展程序将被加载到该设备上。 但是您需要...
Swift类型创建之自定义一个类型详解
09-03
本文主要讨论如何在Swift中创建自定义类型，特别是基于布尔逻辑的自定义类型。我们将深入探讨以下几个方面： 1. **自定义原型**： 在Swift中，`Bool`类型是基于枚举（`enum`）实现的，它有两个枚举案例：`true`和`...
swift-自定义键盘自带简单的计算
08-15
在Swift编程中，自定义键盘是一项常见的需求，尤其在创建具有特定功能的输入界面时，如计算器应用。本文将深入探讨如何使用Swift来创建一个自定义键盘，该键盘集成了基本的计算功能。 首先，我们需要了解自定义键盘...
Swift 3.1聊天界面键盘效果的实现详解
08-30
本文将详细介绍如何在Swift 3.1中创建一个具有类似微信、QQ聊天界面的键盘效果，确保用户在各种消息数量情况下都能获得良好的体验。 首先，我们需要理解两种基本的处理方式：输入栏随键盘移动和整个屏幕随键盘移动...
swift-KeyBoard-Swift使用Swift编写的字母和数字键键盘可以用于UITextField和UITextView
08-15
使用Swift编写的字母和数字键键盘，可以用于UITextField和UITextView
iOS自定义键盘
08-19
自定义iOS键盘，支持手机号，身份证和金额三种场景
keyboard-cat:用 Swift 编写的适用于 iOS8 的键盘 Cat 自定义键盘
06-11
键盘猫 用 Swift 编写的适用于 iOS8 的键盘 Cat 自定义键盘。 安装 在 Xcode 中构建。 用法 至少在 iOS 8 上运行（支持自定义键盘） 截屏 执照 麻省理工学院
swift中UITextView的使用
番薯大佬的专栏
09-28 4131
let textview = UITextView(frame: CGRectMake(10.0, 10.0, (CGRectGetWidth(self.view.bounds) - 10.0 * 2), 80.0)) self.view.addSubview(textview) textview.backgroundColor = UIColor.lightGrayColor(
Swift之键盘事件
Francis-ChinaFeng
03-04 3519
在IOS开发过程中，监听键盘弹出事件，修改对应的UI改变，会使用户体验更加丰富。 首先直接看代码 // 监听键盘弹出事件，控制toolbar位置 NSNotificationCenter.defaultCenter().addObserver(self, selector: "onKeyboardWillChangeFrame:", name: UIKeyboa
swift3.0关于UITextField中的使用收起键盘等一些方法
loveiosolovehua的博客
03-29 4422
本文纯属作为iOS程序员的一点点个人观点有错误之处敬请原谅 1.首先是定义属性,遵守代理方法 let tf = UITextField() 2.穿件 tf.frame = CGRect(x:60,y:68,width:SCREEN_WIDTH - 60 ,height:30)         tf.placeholder = "填写唯一标示"         tf.deleg
swift 输入框随键盘移动
任意门
10-13 2105
step 1: //监听键盘改变 NSNotificationCenter.defaultCenter().addObserver(self, selector:#selector(CommentDetailViewController.keyboardWillChange(_:)), name:UIKeyboardWillChangeFrameNotification, ob
SwiftUI自定义布局
08-24
SwiftUI提供了多种方法来实现自定义布局。其中，可以使用HStack、VStack、ZStack等布局容器来组合和排列视图元素，实现各种复杂界面。 另外，SwiftUI还提供了对齐指南来帮助文本对齐，如.leading、.trailing、.top等。但是当处理在不同视图之间分割的视图时，如果需要使完全不同的两个视图部分对齐，可以使用自定义的对齐辅助线。使用这些辅助线可以在整个界面中创建和使用辅助线，在视图之前或之后发生的变化并不重要，它们仍然会按照一条线排列。 例如，可以使用offset(x: CGFloat, y: CGFloat)方法为视图指定水平和垂直的偏移距离。这个方法可以将视图在水平和垂直方向上移动指定的距离。 综上所述，使用SwiftUI可以通过布局容器和对齐指南实现自定义布局，同时也可以使用偏移方法来调整视图的位置。这些功能可以帮助您创建个性化的布局。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [SwiftUI 布局之自定义手动布局设置各种相对位置(教程含源码)](https://blog.csdn.net/iCloudEnd/article/details/107718464)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* [SwiftUI之深入解析布局如何自定义AlignmentGuides](https://blog.csdn.net/Forever_wj/article/details/121958698)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值