DEV Community

lyc233333
lyc233333

Posted on

Hongmeng Duo subtype input method: 3 steps to realize free switching of input mode🔤

The core of implementing multilingual/mode switching in the Hongmeng input method is the flexible configuration and dynamic loading of subtypes.This article uses the simplest process to help you master the core logic~

1. Sub-type basics: Define multi-modal "digital identity" 🆔

1. Subtype configuration file (input_method_config.json) 

{  
  "subtypes": [  
    {  
"id": "en_us", // Unique ID
"label": "English", // Show name
"locale": "en-US", // Language area
"mode": "qwerty", // Keyboard mode
"icon": "$media:en_icon" // Toggle icon
    },  
    {  
      "id": "zh_cn",  
"label": "Chinese",
      "locale": "zh-CN",  
      "mode": "pinyin",  
      "icon": "$media:cn_icon"  
    }  
  ]  
}
Enter fullscreen mode Exit fullscreen mode

2. module.json5 registration 

{  
  "extensionAbilities": [  
    {  
      "type": "inputMethod",  
      "metadata": [  
        {  
          "name": "ohos.extension.input_method",  
"resource": "$profile:input_method_config" // Associate configuration file
        }  
      ]  
    }  
  ]  
}
Enter fullscreen mode Exit fullscreen mode

2. Interface switching: dynamically load different keyboard layouts🎹

1. Listen to subtype change events 

inputMethodAbility.on('setSubtype', (subtype) => {  
  switch (subtype.id) {  
    case 'en_us':  
this.loadEnglishKeyboard(); // Load English layout
      break;  
    case 'zh_cn':  
this.loadChineseKeyboard(); // Load Chinese layout
      break;  
  }  
});
Enter fullscreen mode Exit fullscreen mode

2. Multi-layout implementation (ArkUI example) 

// English keyboard layout
private loadEnglishKeyboard() {  
  this.panel.setUiContent(() => {  
    Grid() {  
      ForEach(englishKeys, (key) => {  
        Button(key.char)  
          .width(40)  
          .height(40)  
          .onClick(() => this.insertText(key.char));  
      });  
    }  
  });  
}  

// Chinese keyboard layout
private loadChineseKeyboard() {  
  this.panel.setUiContent(() => {  
    Grid() {  
      ForEach(chineseKeys, (key) => {  
        Button(key.pinyin)  
          .width(50)  
          .height(50)  
          .onClick(() => this.searchPinyin(key.pinyin));  
      });  
// Candidate word column
      Row() {  
        ForEach(candidates, (word) => {  
          Text(word).onClick(() => this.commitText(word));  
        });  
      }  
    }  
  });  
}
Enter fullscreen mode Exit fullscreen mode

3. Switching logic: User trigger and automatic adaptation 🤖

1. Manually switch (button click) 

// Toggle button click event
async switchSubtype(targetId: string) {  
  const subtypes = await inputMethod.getSetting().listCurrentInputMethodSubtype();  
  const targetSubtype = subtypes.find(s => s.id === targetId);  
  if (targetSubtype) {  
    await inputMethod.switchCurrentInputMethodSubtype(targetSubtype);  
  }  
}
Enter fullscreen mode Exit fullscreen mode

2. Automatic switch (according to input content) 

// Automatically switch when English input is detected
private detectLanguage(text: string) {  
  const isEnglish = /^[a-zA-Z]+$/.test(text);  
  if (isEnglish && this.currentSubtype.id !== 'en_us') {  
    this.switchSubtype('en_us');  
  } else if (!isEnglish && this.currentSubtype.id !== 'zh_cn') {  
    this.switchSubtype('zh_cn');  
  }  
}
Enter fullscreen mode Exit fullscreen mode

4. Optimization skills: Make the switch more "feelless"✨

1. Preload layout resources 

// Preload all subtype layouts in onCreate
private preloadLayouts() {  
this.loadEnglishKeyboard(); // Render English layout in advance
this.loadChineseKeyboard(); // Render the Chinese layout in advance
}
Enter fullscreen mode Exit fullscreen mode

2. Animation transition effect 

// Add gradient animation when switching layout
panel.setUiContent(() => {  
  Column() {  
// Current layout
    if (currentSubtype === 'en_us') EnglishKeyboard()  
    else ChineseKeyboard()  
}.animate({ type: 'opacity', duration: 300 }); // 300ms gradient
});
Enter fullscreen mode Exit fullscreen mode

Summary: The "Three Elements" of Sub-Type Development

  1. Configuration first: Define all subtype metadata through JSON file
  2. Dynamic Rendering: Load the corresponding keyboard interface according to the subtype ID
  3. Intelligent switching: Supports manual switching + automatic language detection dual mode

Top comments (0)