Skip to content

UI 视图

筷字输入法 v3 基于 Android View + RecyclerView 实现,采用六边形蜂窝网格布局键盘,自定义 LayoutManager 和手势检测器。所有视图通过 InputMsg / UserKeyMsg / UserInputMsg 消息驱动更新。


1. 主面板(MainboardView)

顶层 IME 面板容器,组合 KeyboardView + InputboardView

功能说明
消息分发onMsg(InputMsg) 分发消息到子视图
底部间距适配updateBottomSpacing() 适配导航栏重叠
加载状态toggleShowKeyboardWarning() 显示键盘加载提示

2. 键盘视图(KeyboardView)

渲染所有键盘按键布局,处理用户手势和轨迹绘制。

功能说明
按键布局更新键盘切换/主题/配置变更时更新按键网格
手势转发onMsg(UserKeyMsg) 转发按键手势
手势轨迹ViewGestureTrailer 绘制滑行轨迹
按键动画KeyboardViewKeyAnimator 按键交互动画
六边形布局继承 KeyboardViewBase(RecyclerView),KeyboardViewLayoutManager 管理六边形网格

2.1 KeyboardViewBase

基于 RecyclerView 的键盘基类:

功能说明
update(Key[][], boolean)重新绑定按键数据
updateGridBottomReservedHeight()更新底部预留高度
getXPadKeyViewHolder()获取 X-Pad 视图持有者
findVisibleKeyViewHolderUnderLoose()宽松命中检测(六边形区域)

2.2 KeyboardViewLayoutManager

基于 mixite 库的六边形网格布局管理器:

功能说明
三段布局左段/中段/右段分区排列按键
X-Pad 模式FLAT_TOP 方向六边形排列
左手模式按键区域镜像翻转
宽松命中检测六边形区域内宽松查找子视图

2.3 KeyboardViewGestureListener

将原始手势事件翻译为 UserKeyMsg 消息:

手势映射消息
PressStartPress_Key_Start
PressEndPress_Key_Stop
SingleTapSingleTap_Key
DoubleTapDoubleTap_Key
LongPressLongPress_Key_Start + Tick
MovingFingerMoving_Start/Moving/Stop
FlippingFingerFlipping

3. 按键视图(ui/view/key/)

3.1 按键 ViewHolder 体系

按键类型布局特殊功能
KeyViewHolder<V>基类六边形背景 HexagonDrawable、阴影、边框、禁用态、动态字号
CharKeyViewHolderCharKeykey_char_view按标签长度自动调整字号(1-6 字符)
CtrlKeyViewHolderCtrlKeykey_ctrl_view图标或文字标签
CtrlKeyPinyinToggleViewHolder拼音切换键key_ctrl_toggle_pinyin_spell_view显示源→目标转换(如"ü,v")
InputWordKeyViewHolder候选词键key_char_input_word_view词文本、拼音、繁体标记
SymbolKeyViewHolder符号键key_char_view继承 CharKeyViewHolder
MathOpKeyViewHolder运算键key_char_view继承 CharKeyViewHolder
XPadKeyViewHolderX-Pad 键key_xpad_view委托 XPadView 渲染
NullKeyViewHolder空占位键key_null_view透明占位

3.2 KeyboardViewAdapter

8 种视图类型:CHAR_KEYCTRL_KEYNULL_KEYINPUT_WORD_KEYTOGGLE_PINYIN_SPELL_KEYSYMBOL_KEYMATH_OP_KEYXPAD_KEY

  • 支持差异刷新和全量刷新两种更新策略
  • DefaultItemAnimator 子类最小化自定义动画

4. X-Pad 视图(ui/view/xpad/)

4.1 XPadView

核心 X 型滑行输入面板(灵感来自 8VIM),三区域环形布局:

区域形状内容
Zone 0(中心)正六边形光标定位器(CtrlKey)
Zone 1(内环)6 个方向扇形块键盘切换器(Latin/Pinyin/Number/Math)
Zone 2(外环)6 个方向扇形块 × 左右子键字符输入区域(按 Level 分层)

4.2 XPadView 功能

功能说明
手势路由滑行方向自动定位到目标 Zone/Block
区域动画输入开始时区域收缩动画
左手模式Zone 布局镜像翻转
手势轨迹滑行路径轨迹绘制
模拟模式练习引导中的自动演示
状态机Init → InputChars_Input_Waiting → InputChars_Input_Doing → Editor_Edit_Doing

4.3 绘制体系

说明
XZone绘制容器,管理路径/图标/文字画笔,支持按下/弹起视觉状态、透明度/缩放变换
XPainter基础画笔:Paint、对齐、填充/描边、阴影、圆角
XAlignPainter位置画笔:添加坐标、对齐、旋转、尺寸
XTextPainter文字画笔:沿路径绘制文字,支持对齐/旋转/加粗
XDrawablePainter图标画笔:缩放/对齐/旋转/透明度绘制 Drawable
XPathPainter路径画笔:六边形/分隔线/坐标轴,填充/描边/阴影/圆角

5. 输入视图(ui/view/input/)

5.1 InputListView

水平滚动的输入列表视图,展示字符、间隙和数学表达式:

功能说明
数据更新选择、配置变更时更新输入数据
自动滚动scrollToSelectedInput() 滚动到待确认输入
命中检测findInputPositionUnder() 含 Gap 边距的精确命中
消息上抛fire_UserInputMsg() 冒泡传递输入消息

5.2 InputListViewReadonly

只读变体,用于数学表达式内的嵌套输入列表,滚动操作委托给父视图。

5.3 InputViewHolder 体系

输入类型布局特殊功能
InputViewHolder基类间隙空格、选中颜色
CharInputViewHolderCharInputinput_char_view汉字 + 拼音展示
GapInputViewHolderGapInputinput_gap_view闪烁光标动画
SpaceInputViewHolder空格input_space_view选中高亮
MathExprInputViewHolderMathExprInputinput_math_expr_view嵌套 InputListViewReadonly + 边框标记

5.4 InputListViewAdapter

4 种视图类型:CHAR_INPUTGAP_INPUTSPACE_INPUTMATH_EXPR_INPUT,使用 DiffUtil 优化刷新。


6. 输入面板(InputboardView)

输入面板:InputListView + 工具栏/输入栏按钮。

6.1 状态机

Init → Input_Freeze_Doing → Input_Doing → Input_Cleaned_Cancel_Waiting → Toolbar_Show_Doing

6.2 工具栏按钮

按钮功能
设置打开输入法设置
切换输入法切换到其他输入法
关闭键盘收起键盘
复制/粘贴/剪切/全选编辑器操作
撤销/重做编辑器撤销重做
清空输入列表清空当前输入
撤销清空恢复被清空的输入
展开/收起工具栏工具栏折叠切换

7. 候选弹出视图(CandidatesView)

浮动弹出窗口,三种弹出类型:

类型说明
quick_list输入补全和剪贴板建议
tooltip按键预览气泡
snackbar编辑器操作反馈 + 收藏保存提示
功能说明
动画进入/退出动画
定位弹出位置在按键上方
按键提示showInputKeyTip() 按键按下气泡
操作反馈showTooltip() 操作结果反馈
收藏提示on_InputClip_CanBe_Favorite_Msg() 保存收藏提示条

7.1 InputQuickListView

水平滚动的补全/剪贴板列表:

功能说明
补全点击触发 SingleTap_InputCompletion
剪贴板点击触发 SingleTap_InputClip
自动重置数据变更时重置滚动位置

7.2 Quick Input ViewHolder

说明
InputCompletionViewHolder动态加载子字符输入视图展示补全预览
InputClipViewHolder剪贴板粘贴建议,类型标签
InputCompletionCharInputViewHolder补全中的单个字符:词+拼音或拉丁文本
InputQuickPlaceholderViewHolder透明占位符(滚动内边距)

8. 收藏面板(FavoriteboardView)

收藏管理面板,列表 + 删除/清空操作。

功能说明
列表展示垂直列表展示收藏项
多选删除复选框多选 + 确认对话框删除
清空所有确认对话框后清空
标题计数标题显示收藏数量
空状态警告无收藏时显示提示

8.1 InputFavoriteViewHolder

展示收藏项:复选框、内容(文本/HTML)、文本类型标签、创建日期、使用次数、粘贴按钮。


9. 练习引导(ui/guide/)

9.1 ExerciseGuide

主 Activity,Drawer 布局,包含导航、沙盒键盘视图、练习列表。

8 个预置练习

练习模式说明
自由练习free无交互限制的自由输入
基本介绍introduce只读介绍说明
拼音滑行输入normal交互式滑行输入练习
拼音候选筛选normal候选词筛选练习
字符替换输入normal按键替换循环练习
数学输入normal数学表达式输入练习
编辑器编辑normal文本编辑操作练习
拼音提交处理normal提交模式练习
X-Pad 输入normalX-Pad 环形输入练习

9.2 Exercise 模型

属性说明
modefree(自由)/ normal(交互)/ introduce(只读)
steps练习步骤列表
newStep()自动将 Key 参数转换为 <img> 标签
gotoNextStep()步骤推进

9.3 ExerciseStep

属性说明
contentHTML 内容
name步骤名称
actionInputMsgListener 交互动作
AutoAction自动推进步骤
Last 子类最终步骤,提供重新开始/继续回调

9.4 KeyboardSandboxView

沙盒键盘,渲染与真实键盘一致的按键图片,用于嵌入练习说明。图片缓存提升性能。


10. 主题系统

10.1 BaseThemedView

主题感知视图基类,主题切换时自动重建:

功能说明
doLayout()使用主题 Context 填充布局
handleInputMsg()主题切换消息触发重建
updateLayoutDirection()左/右手模式布局方向

10.2 支持的主题

主题说明
light亮色主题
night暗色主题
follow_system跟随系统设置

11. 关于页面(ui/about/)

页面说明
AboutApp应用信息
AboutChangelog版本更新日志
AboutDonate捐赠(支付宝/微信二维码)
AboutThanks致谢
AboutTeam团队信息
AlphaUserAgreementAlpha 测试协议
SoftwareServiceAgreement软件服务协议
Copyright版权声明

12. 通用组件(common/widget/)

组件说明
ViewGestureDetector统一手势检测:PressStart/End、LongPress(带 Tick)、SingleTap、DoubleTap、Moving、Flipping
ViewGestureTrailer手势轨迹绘制(渐隐路径)
HexagonDrawable六边形 Drawable,支持圆角、阴影、边框
AudioPlayer按键音效播放
Toast自定义 Toast
DialogAlert / DialogConfirm对话框构建器
ShadowDrawable带 Shadow 效果的 Drawable
HtmlTextViewHTML 渲染 TextView
EditorAction编辑器操作枚举(copy/paste/cut/select_all/undo/redo/favorite)
EditorSelection编辑器选择工具

12.1 自定义 RecyclerView 体系

说明
RecyclerView<A,VH>泛型 RecyclerView,含类型化适配器、条目手势检测
RecyclerViewAdapter基础适配器,DiffUtil + 手动更新策略
RecyclerViewHolder基础 ViewHolder,whenViewReady()、颜色/尺寸工具
RecyclerViewLayoutManager基础 LayoutManager,宽松/近似子视图查找
RecyclerViewLinearLayoutManager水平/垂直线性布局
RecyclerViewGestureDetector条目级手势检测
RecyclerViewGestureTrailer条目级手势轨迹装饰
RecyclerPageView分页水平滚动,页激活监听
RecyclerPageIndicatorView分页圆点指示器