Implementing a Custom Keyboard

Overview

This sample introduces how to implement a custom keyboard. The custom keyboard can be bound to the system keyboard so that they can switch to each other. The onAreaChange function can be used to obtain the custom keyboard height and set layout avoidance. This sample also describes technical scenarios such as keyboard switching, custom keyboard cursor, and custom keyboard layout avoidance.

Preview

Bar Phone	Foldable	Tablet

How to Use

1. The home page is a message list. Tap any conversation to open the chat detail page, and then tap the text box at the bottom. The system keyboard is displayed by default. After switching to a custom keyboard from the keyboard menu, the layout is avoided upwards based on the custom keyboard height.

2. Tap the keyboard icon on the left of the text box and select System Keyboard, Custom Numeric Keyboard, or Custom English Keyboard from the pop-up menu to switch keyboards. In addition, the ABC button on the numeric keyboard and the 123 button on the English keyboard enable quick switching between the two custom keyboards. In this way, a text box can be bound to both the custom keyboard and system keyboard.

3. Common keyboard operations are supported, including text input, cursor setting, uppercase/lowercase change, cut, paste, and deletion.

Project Directory

├──entry/src/main/ets                 // Code area
│  ├──constants
│  │  └──Constants.ets                // Common constants
│  ├──entryability
│  │  └──EntryAbility.ets             // Entry ability
│  ├──entrybackupability
│  │  └──EntryBackupAbility.ets       // Entry backup ability
│  ├──model
│  │  ├──KeyboardController.ets       // Custom keyboard controller
│  │  └──WindowInfo.ets               // Window info class
│  ├──pages
│  │  └──MainPage.ets                 // Main page
│  ├──utils
│  │  ├──Logger.ets                   // Log utility
│  │  ├──WidthBreakpointType.ets      // Width breakpoint type
│  │  └──WindowUtil.ets               // Window utility
│  ├──view
│  │  ├──ChatViews.ets                // Chat view
│  │  ├──CustomKeyboard.ets           // Custom keyboard entry
│  │  ├──EnglishKeyboard.ets          // English keyboard component
│  │  ├──KeyboardMenuPanel.ets        // Keyboard menu panel
│  │  ├──NumberKeyboard.ets           // Numeric keyboard component
│  │  └──TextInputComponent.ets       // TextInput component bound to the custom keyboard
│  └──viewmodel
│     ├──BreakpointConfig.ets         // Breakpoint configuration
│     ├──ChatModel.ets                // Chat data model
│     ├──KeyboardHeightConfig.ets     // Keyboard height configuration
│     └──MenuModel.ets                // Keyboard button data
└──entry/src/main/resources           // App resource directory

How to Implement

1. To implement a custom keyboard, the customKeyboard attribute of the TextInput component is bound to builder.
2. To switch between the custom keyboard and the system keyboard, the customKeyboard attribute of the TextInput component is set to null and is bound to the system keyboard.
3. To set the cursor position, the system listens for the onTextSelectionChange and onChange events of the TextInput component.
4. To implement the cut and paste functions, the system listens for the onCut and onPaste events of the TextInput component.
5. To implement layout avoidance, the keyboardHeightChange and windowSizeChange events are encapsulated in WindowUtil to obtain the system keyboard height and window size changes, and the onAreaChange event is used to obtain the custom keyboard height.

Permissions

N/A

Dependencies

N/A

Constraints

1. The sample only supports running on standard systems. Supported devices: bar phones, dual-foldable phones, tri-foldable phones, wide-foldable phones, tablets, and PCs.

2. The HarmonyOS version must be HarmonyOS 26.0.0 Release or later.

3. The DevEco Studio version must be DevEco Studio 26.0.0 Release or later.

4. The HarmonyOS SDK version must be HarmonyOS 26.0.0 Release SDK or later.