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

最新推荐文章于 2024-07-20 17:29:37 发布
最新推荐文章于 2024-07-20 17:29:37 发布
阅读量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
    评论
专栏目录
[译] 用 Swift 创建自定义的键盘
gongyuhonglou的博客
05-31 1471
本文翻译自 How to make a custom keyboard in iOS 8 using Swift 我将讲解一些关于键盘扩展的基本知识，然后使用iOS 8 提供的新应用扩展API来创建一个莫斯码键盘。大概需要你花20多分钟来走完所有的步骤。 完整代码 综述 一个自定义的键盘会替换系统的键盘，来提供给用户一个新的文本输入方法，或者输入哪些iOS系统还不支持的语言。一个自定义键盘的基本
CustomExtensionKeyboard:用Swift 4.1编写的自定义键盘扩展
05-02
使用Swift和App扩展API的自定义键盘。 从iOS 8开始，应用程序可以在用户使用其他应用程序时向其扩展自定义功能。 自定义键盘就是其中之一。 一旦您运行该应用程序，您的扩展程序将被加载到该设备上。 但是您需要...
推荐开源项目：Slidden——你的Swift定制键盘解决方案
gitblog_00046的博客
05-19 393
推荐开源项目：Slidden——你的Swift定制键盘解决方案 项目地址:https://gitcode.com/Brimizer/Slidden Slidden 是一个基于Swift编写的开源、可定制的iOS 8键盘框架，它为开发者提供了一种简单的方式来构建自己的iOS键盘应用。该项目名称来源于最早的商业化打字机——肖尔斯和格里登打字机，这正是现代QWERTY键盘的起源。 项目介绍 iOS 8...
App Store审核规则中文版(App审核被拒原因,苹果开发必备)
热门推荐
南通SEO
04-02 1万+
App Store审核规则中文版(App审核被拒原因,苹果开发必备) 简介 App Store的指导原则非常简单 - 我们希望为用户获取 app 时提供更安全可靠的体验，并为所有开发者提供借助 app 获得成功的契机。为此，我们精心打造了App Store，其中的每个 app 都会经过专家审核，而且还有编辑团队每天帮助广大用户发现新的 app。至于别的一切，可以考虑在开放的互联网上分享。如...
前端每周清单半年盘点之 React 与 ReactNative 篇
weixin_33811961的博客
08-16 285
前端每周清单专注前端领域内容，以对外文资料的搜集为主，帮助开发者了解一周前端热点；分为新闻热点、开发教程、工程实践、深度阅读、开源项目、巅峰人生等栏目。欢迎关注【前端之巅】微信公众号（ID：frontshow），及时获取前端每周清单；本文则是对于半年来发布的前端每周清单中的 React 相关的教程实践与开源项目的盘点，可以查看这里获得往期清单或者其他盘点篇。 教程实践 Twitter 宣布移动 ...
程序员常用的28+10款开发工具以及年度各方向的工具
usa_washington的博客
09-09 1557
工具
我的全栈之路-Go语言基础之Go语言概述与开发环境搭建
weixin_30595035的博客
09-01 1965
我的全栈之路-Go语言基础之Go语言概述与开发环境搭建 我的全栈之路 1.1 信息技术发展趋势 目前信息技术主要经历了互联网、移动互联网以及以大数据、云计算、物联网、人工智能区块为代表的新兴技术三个阶段。 互联网 互联网自从20世纪90年代逐渐兴起，主要是通过网络连接了世界各地的PC机，笔记本以及背后提供数据服务的大型服务器集群。 其中绝大多数PC机都运行...
盘点AI编程效率神器合集，代码助手工具大模型、Agent智能体
Peter的博客
04-02 1944
程序员是最擅长革自己命的职业，让我们借助AI的力量一起摸鱼一起卷！
从 Python 潮流周刊提取了 800 个链接，精选文章、开源项目、播客视频集锦
最新发布
m0_62283350的博客
07-20 772
本文从从 《Python 潮流周刊》整理了约 800 个链接，有 5 大分类，你可以快速浏览文章、项目、播客、视频和话题讨论的标题，快速找到自己感兴趣的内容进行查看。
Java开发常见专业术语
weixin_42408447的博客
05-10 1万+
1.脚本 脚本（Script），是使用一种特定的描述性语言，依据一定的格式编写的可执行文件。 2.http协议 HTTP协议，即超文本传输协议(Hyper text transfer protocol)。是一种详细规定了浏览器和万维网(WWW = World Wide Web)服务器之间互相通信的规则，通过因特网传送万维网文档的数据传送协议。 3.B/S结构和C/S结构 B/S（Browser/Server）：指浏览器和服务器架构。 C/S（Client/Server）：指客户端和服务器架构 4.报文 报文
Swift类型创建之自定义一个类型详解
09-03
本文主要讨论如何在Swift中创建自定义类型，特别是基于布尔逻辑的自定义类型。我们将深入探讨以下几个方面： 1. **自定义原型**： 在Swift中，`Bool`类型是基于枚举（`enum`）实现的，它有两个枚举案例：`true`和`...
swift-Swift自定义键盘
08-15
以上就是使用Swift创建自定义键盘的基本流程。在实际开发中，你可能还需要处理更多细节，如键盘的动画效果、多语言支持、输入预测等功能。总的来说，Swift提供的强大API使得创建自定义键盘变得相对简单，但同时也...
swift-自定义键盘自带简单的计算
08-15
在Swift编程中，自定义键盘是一项常见的需求，尤其在创建具有特定功能的输入界面时，如计算器应用。本文将深入探讨如何使用Swift来创建一个自定义键盘，该键盘集成了基本的计算功能。 首先，我们需要了解自定义键盘...
Swift 3.1聊天界面键盘效果的实现详解
08-30
本文将详细介绍如何在Swift 3.1中创建一个具有类似微信、QQ聊天界面的键盘效果，确保用户在各种消息数量情况下都能获得良好的体验。 首先，我们需要理解两种基本的处理方式：输入栏随键盘移动和整个屏幕随键盘移动...
Failed to start remote service “com.apple.debugserver“ on device.
kicinio的博客
12-21 6916
今天用真机调试时报出“Failed to start remote service “com.apple.debugserver” on device.”百思不得解。遂关机重启，果然运行成功。猜测可能是真机长时间没关机，一些服务被关闭了。
Swift 如何使用AVAudioPlayer播放音频
kicinio的博客
12-21 4677
前言： iOS里面导入AVFoundation包进行音频使用管理，调用AVAudioPlayer对象进行音频操作。这里有个小方法，直接粘贴即可使用。 调用方法： private func playAudio(forResource: String, ofType: String){ if let bundlePath = Bundle.main.path(forResource: forResource, ofType: ofType) { let url = URL.ini
SPM(Swift Package Manager)开发及常见事项
kicinio的博客
08-06 4291
spm还可引入oc / c / c++，至于二进制化或者静态库大家可以共同探讨，这方面的网上资料较少。
SwiftUI自定义布局
08-24
SwiftUI提供了多种方法来实现自定义布局。其中，可以使用HStack、VStack、ZStack等布局容器来组合和排列视图元素，实现各种复杂界面。 另外，SwiftUI还提供了对齐指南来帮助文本对齐，如.leading、.trailing、.top...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值