触摸输入框控件

BWSU

触摸输入框控件
这是一个基于RA8889/RA6809显示控制器的输入框控件实现，提供了完整的文本输入功能，包括光标显示、文本编辑、触摸输入等功能。


一、功能特点

• 多输入框支持
  
  • 支持同时创建和管理多个输入框
  • 每个输入框可以独立设置位置、大小和样式
  • 支持标签显示
    
• 文本输入功能
  
  • 支持字符输入和删除
  • 支持光标位置控制
  • 支持文本长度限制
  • 支持中英文输入
    
• 触摸交互
  
  • 支持触摸选择输入框
  • 支持触摸位置计算光标位置
  • 支持点击输入框外部取消焦点
    
• 视觉效果
  
  • 3D边框效果
  • 活动状态高亮显示
  • 光标闪烁效果
  • 文本垂直居中显示
    
• RA8889特性
  
  • 使用RA8889内建光标功能
  • 支持12x24字体显示
  • 支持16M色显示
    

二、文件结构

1. 输入框控件v1.0/
   
2. ├── widget/
   
3. │   ├── inputbox.c    # 输入框控件实现
   
4. │   └── inputbox.h    # 输入框控件头文件
   
5. ├── RA8889_01_Kernel/
   
6. │   ├── RA8889_51.c   # RA8889底层驱动
   
7. │   ├── RA8889_51.h
   
8. │   ├── RA8889_API_51.c  # RA8889 API实现
   
9. │   └── RA8889_API_51.h
   
10. └── UserDef.h         # 用户定义配置

复制代码

三、主要API初始化

1. void InputBox_Init(void);

复制代码

初始化输入框控件，设置RA8889光标参数。
创建输入框

1. int InputBox_Add(int x, int y, int width, const char* initial_text,
   
2.                 int label_x, int label_y, const char* label,
   
3.                 unsigned long text_color, unsigned long label_color);

复制代码

添加一个新的输入框，返回输入框ID。
文本操作

1. void InputBox_SetText(int id, const char* text);
   
2. const char* InputBox_GetText(int id);
   
3. void InputBox_AddChar(int id, char ch);
   
4. void InputBox_DeleteChar(int id);

复制代码

设置、获取文本，添加和删除字符。

显示控制

1. void InputBox_Draw(int id);
   
2. void InputBox_DrawAll(void);

复制代码

绘制单个或所有输入框。

触摸处理

1. int InputBox_HandleTouch(int touch_x, int touch_y);

复制代码

处理触摸事件，返回被触摸的输入框ID。

焦点控制

1. void InputBox_SetActive(int id, int active);

复制代码

设置输入框的活动状态。

四、触摸处理详解触摸处理是该输入框控件的核心功能之一。InputBox_HandleTouch函数实现了所有触摸交互逻辑，包括：

输入框选择

• 触摸事件过滤
  
  • 忽略坐标为(0,0)或负值的触摸点，避免触摸释放事件误触发焦点丢失
  • 仅处理有效区域内的触摸事件
    
• 输入框命中检测
  
  • 检查触摸坐标是否在任何输入框的范围内
  • 确定被触摸的输入框ID
    
• 焦点切换
  
  • 如果触摸了新的输入框，自动切换焦点
  • 如果触摸了当前已有焦点的输入框，保持焦点
  • 如果触摸了输入框外部的有效区域，取消当前输入框的焦点
    

光标位置计算

• 精确定位
  
  • 根据触摸点在输入框内的X坐标计算光标位置
  • 将触摸点X坐标转换为字符位置（根据12x24字体宽度）
    
• 边界处理
  
  • 在输入框左边缘点击时，光标位置设为0（文本开始位置）
  • 当计算出的位置超过文本长度时，光标位置自动设为文本末尾
    

视觉反馈

• 输入框状态切换
  
  • 当输入框获得焦点时，边框颜色变为高亮（蓝色）
  • 输入框失去焦点时，边框恢复默认颜色
    
• 光标显示
  
  • 使用RA8889的内建光标功能
  • 自动闪烁（10帧周期）
  • 当输入框获得焦点时显示光标
  • 当输入框失去焦点时隐藏光标
    

实现要点

• 事件处理顺序
  触摸事件 -> 输入框命中检测 -> 焦点管理 -> 光标位置计算 -> 状态更新 -> 视觉反馈
• 全局状态维护
  
  • active_input_box_id保存当前活动输入框ID
  • widget_input_id用于跟踪被触摸的输入框ID，供其他部分代码使用（如键盘输入）
    
• 关键触摸事件处理
  
  • 点击输入框：获得焦点，更新光标位置
  • 点击文本：光标定位到点击的字符位置
  • 点击输入框外部：取消当前焦点
    
• 误触处理
  
  • 忽略无效坐标(<=0)的触摸事件
  • 确保触摸释放事件不会导致焦点丢失
    

五、配置参数在UserDef.h中定义了以下主要配置：

1. <pre><code>#define MAX_INPUT_BOXES 10          // 最大输入框数量</code></pre><pre><code>#define INPUT_BOX_HEIGHT 40         // 输入框高度</code></pre><pre><code>#define INPUT_BOX_BORDER_WIDTH 2    // 边框宽度</code></pre><pre><code>#define INPUT_BOX_PADDING 4         // 内边距</code></pre><pre><code>#define INPUT_BOX_SHADOW_DEPTH 2    // 阴影深度</code></pre><pre><code>#define INPUT_BOX_BG_COLOR 0xFFFFFF // 背景色</code></pre><pre><code>#define INPUT_BOX_ACTIVE_BORDER_COLOR 0x0000FF  // 活动状态边框颜色</code></pre><pre><code>#define INPUT_BOX_ACTIVE_BORDER_COLOR_1 0xFFFF00 // 活动状态边框外围颜色</code></pre><h2></h2>

复制代码

六、使用示例

1. // 初始化
   
2. InputBox_Init();
   
3. 
   
4. // 创建输入框
   
5. InputBox_Add(300, 200, 400, "The label color can be changed.", -12*4-8, 8, "Name", color16M_black, color16M_red);
   
6. 
   
7. // 设置活动状态
   
8. InputBox_SetActive(id, 1);
   
9. 
   
10. // 处理触摸事件int touched_id = InputBox_HandleTouch(touch_x, touch_y);
    
11. 
    
12. // 添加字符
    
13. InputBox_AddChar(id, 'A');
    
14. 
    
15. // 删除字符
    
16. InputBox_DeleteChar(id);
    
17. 
    
18. // 获取文本const char* text = InputBox_GetText(id);

复制代码

七、注意事项

• 需要定期调用InputBox_UpdateCursor()更新光标状态
• 触摸坐标需要转换为屏幕坐标
• 文本长度受限于MAX_TEXT_LENGTH定义
• RA8889内建字体大小固定为12x24，本例仅调用内建字体
  

八、依赖项

• RA8889显示控制器驱动
• 标准C库（string.h）
• 用户自定义配置（UserDef.h）
  

九、源码下载
请至菜单栏“组件与控件”下载。

十、视频演示