手把手教你撸touchgfx的数字键盘(一)
目录
1、准备工作
1.1、软件准备
1.2、硬件准备
2、键盘制作
2.1、键盘背景图设计
2.2、自定义键盘控件
2.3、screenview与keyboard之间传递消息
3、实验效果
4、功能拓展和项目资料
4.1、改进的方面
4.2、项目资料
5、总结
1、准备工作
1.1、软件准备
PowerPoint软件、TouchGFXdesigner软件、VS2019软件、win10的图片编辑软件
1.2、硬件准备
ART-PI开发板一块、5寸的电容LCD屏幕一块
2、键盘制作
2.1、键盘背景图设计
打开PowerPoint软件设计自己的键盘背景图，这里自由发挥即可，根据自己的审美观念来操作即可，我们这里设计的键盘主要是实现数字的输入与删除，所以必不可少的是10个数字键0-9，还要能够实现输入错误了，还能够删除；当然这里要分为全部清除和部分清除两个部分，同时要设计小数点输入的按键；以及输入框的显示；确认按钮的设置。总之根据自己的需求来设计，下面就看看我的设计图吧！不要嫌弃我的太丑哈！（小心菜哥从屏幕里飞出来打你哈！）
还不错吧！说丑的统统拉出去，痛打50大板！在设计完了之后，保存成图片格式即可！当然现在还不能直接用啊！毕竟分辨率啥的都没弄呢！分辨率的设定使用win10自带的图片编辑工具即可，根据自己的需要设计背景图的大小，这里我使用的是400*400；请看下图：
用这个工具来编辑图片的大小，非常好用的一款图片编辑器！
编辑完后另存为即可！之后我们就在这张背景图上面开展工作即可！
2.2、自定义键盘控件
我们先来讨论一下这个keyboard该怎么设计，首先按照简单的设计思路就是堆按键来实现，这种方法呢，虽然比较快，但是菜哥不喜欢；所以今天菜哥要讲的一种设计方法是利用box+keyboard.png这种方式来实现的。首先box是带有点击事件绑定功能的，我们只需要将之前准备的keyboard图片设置为控件背景，使用box控件放置在对应的按键处，将box的透明度设置为100%，这样就看不见Box啦！再为每一个box设定点击事件即可！
好啦，废话不多说，我们先来设计自定义控件吧！首先你需要创建一个自定义控件，命名为keyboard，为这个里面添加一个picture控件，用来放置背景图，再添加一个box用来充当背景面板，因为咱们的keyboard.png图片是透明的，所以咱们利用box来充当键盘的背景色即可，要是喜欢透明键盘，那么这个box你可以去掉哦！之后就是为设计图上的每一个按键添加一个box，来获取点击事件；完成上面的步骤后，大概就是这个样子的
接下来我们使用vs2019将咱们的项目工程打开，分别需要编辑keyboard.cpp以及keyboard.hpp文件，首先需要设定回调函数，以及将操作对象绑定到相应的控件上面，这一部分可以看看官方的文档，说的很清楚，我就不多讲了，直接上代码！
首先需要在keyboard.hpp文件中添加函数的声明，以及一些变量的声明，
virtual void ButtonClickHandle(const Box& box, const ClickEvent& evt);Callback ButtonCallBack;uint8_t key_value; //辅助变量，用来存取键值 在keyboard.cpp文件中，需要添加以下代码：
第一处是为了初始化回调函数，第二处是为了为相应的box控件设定回调函数，接下来就是回调函数的书写啦！
首先我们来分析一下在这个回调函数里面我们需要做点什么，第一点，你需要判断是哪一个按键摁下，不同的按键有不同的事件处理机制，其次你还要将输入的键值显示在设定的input text上面，同时你还需要考虑怎么实现错误删除，以及清空等操作！
ButtonClickHandle(const Box& box, const ClickEvent& evt)
{if(evt.getType() == evt.EVENT_CLICK) //这里是判断事件类型，EVENT_CLICK属于点击事件{if(&box == &num1){key_value = 1;}else if(&box == &num2){key_value = 2;}................}
}接下来我们需要对key_value进行不同的事件分类啦！key_value < 10,这是数字输入，就执行下面的语句即可
if(key_value < 10)
{textBuffer[index++] = key_value + 48; //为啥加48呢？好好想想，textBuffer[index] = 0;textArea1.resizeToCurrentText(); //文本框自适应textArea1.invalidate(); //控件刷新
}关于如何清除单个字符，以及清空输入框中的内容，我就不挨个讲了，具体操作请看下面的图图
2.3、screenview与keyboard之间传递消息
screenview与keyboard之间我们采用触发器的方式进行数据通信，这里的触发器指的就是Trigger；我们为keyboard添加一个触发器，并且设定传输的参数为一个unsigned short 类型的指针;具体操作如下图所示:
设置完触发器之后呢，需要在点击OK恩建后触发这一事件，同时将数据发送到screenview中,具体触发器是怎么工作的，可以参考TouchGFX官方文档进行学习!调用触发器的代码如下，请看：
else if (key_value == 15){//memcpy(KeyValueBuffer, textArea1Buffer, TEXTAREA1_SIZE);Unicode::strncpy(KeyValueBuffer, textArea1Buffer, TEXTAREA1_SIZE);emitKeyValueTransforCallback(KeyValueBuffer);memset(KeyValueBuffer, 0, 12);}感兴趣的小伙伴可以试一下 我注释掉的语句，把Unicode::strncpy语句注释掉，你看看这样的现象你能否接受呢？想一下为什么会出现这样的现象呢？想通的小伙伴请在评论区留言，没想通的小伙伴也可以在评论区留言哈！
这样，我们输入的数据就已经发送到screenview啦！那么我们需要设定一个触发事件，用来提醒我们，有数据发送过来了，并且要设定相应的处理函数来处理咱们发送过来的数据；这里呢？我们在screenview中添加一个事件监听，而事件发生的触发方式我们就选择咱们在keyboard中自定义的触发器，并且设定相应的处理函数！具体操作如下图所示：
红色框框所圈起来来的就是咱们设定的触发源，也就是咱们在keyboard中自定义的触发器；好啦，接下来就是数据处理函数的编写啦！这就已经很简单啦，我就直接上代码啦！
void Screen1View::SetTextValue(unsigned short* value)
{memset(textArea1Buffer, 0, TEXTAREA1_SIZE);Unicode::strncpy(textArea1Buffer, value, TEXTAREA1_SIZE);textArea1.setWildcard(textArea1Buffer);textArea1.resizeToCurrentText();textArea1.invalidate();
}好了，到这里基本的键盘输入咱们就做完了，回头看看，是不是很简单呢！
3、实验效果
啊哈！来我们看看最终制作的效果图哈！
颜值是不是很高哇，比你堆键盘的好看多了，（堆键盘的方式固然快捷，但是颜值确实不敢恭维），好啦！到这里咱们的键盘就制作成功啦！
4、功能拓展和项目资料
4.1、改进的方面
上面我们已经完成了键盘的基本功能了，但是在实际应用中你是否会有以下的几点需求呢？
- 能否将我的键盘使用到多个screenview中呢？如何实现呢？
- 能否进行修改我原有的数据呢？比如原来的数据是123，但是我想修改成1230，那么我是否还需要在键盘上输入1230呢？还是说我只用补一个0即可？
- 又比如说，我想将数据1234，修改为123？那么我是否能直接调用键盘上的单个字符清除按键进行清除呢？还是说我还要重新输入123呢？
- 键盘如何影藏起来？在我点击输入框的时候，键盘才显示出来，输入完毕之后，我的键盘影藏起来呢？
- 小数如何输入呢？怎么输入空格呢？虽说 菜哥的键盘上面有设置这些恩建，可是并没有实现相应的功能，
好啦！上面几条问题留给大家思考一下！大家可以动手做一做，要是有不会的地方，欢迎在评论区留言，最后呢，我希望大家能够自己动手实现一下上面所说的几个问题！
4.2、项目资料
你是不是点进来就想着要项目源码呢？如果是的话！那菜哥很不开心，因为菜哥希望你能够自己先做一遍，不会的地方上网查资料，请教一下大牛，实在不会了，再来看看源码！当然菜哥也会分享项目源码的！（为了分享源码，菜哥也建了个仓库）。对啦，这期博客配有手把手教学视屏哈！视频我放在B站上面啦！大家可以看看哇(教学视屏1)（教学视屏2）上面还有中文输入法的演示视频，至于教程嘛，等菜哥有空了就会写哈！
5、总结
总的来说，自制数字键盘，整个过程难度不大！还请大家耐心学习，最后呢，欢迎大家在评论区留言，记得点赞哇！（一个又菜又爱玩的博主！大家加油！）
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！