前言
在日常开发中，不同的应用程序都有自己专属的键盘，特别是在评论和发帖中需要自定义表情键盘，鸿蒙中对自定义键盘提供了很好的支持，本篇文章将带你一步步实现一个自定义表情键盘，建议点赞收藏！
实现效果
需求分析
- 对数据源进行拆分组合。
- 处理表情之间的间隔与删除表情的位置。
- 实现表情键盘的布局。
技术实现
- 定义一个数组用来临时存放表情字符
let array: string[] = [ "😁", "😂", "😃", "😄", "😅", "😆", "😉", "😊", "😋", "😌", "😍", "😏", "😒", "😓", "😔", "😖", "😘", "😚", "😜", "😝", "😞", "😠", "😡", "😢", "😣", "😤", "😥", "😨", "😭", "😰", "😩", "😪", "😫", "😱", "😲", "😳", "😵", "😷", "😀", "😇", "😎", "😐", "😑", "😕", "😗", "😙", "😛", "😟", "😦", "😧", "😬", "😮", "😯", "😴", "😶", "😸", "😹", "😺", "😻", "😼", "😽", "😾", "😿", "🙀" ]
- 对数据源进行处理，这里键盘每页设置 31 个表情和一个删除表情。其中对 31 取整用来实现表情分页，最后当前页面表情等于 31 时，添加一个删除类型的表情。
array.forEach((item, index) => { if (index % 31 == 0) { emojiPackages.push(new SCEmojiPackageBean()) } let laseSectionBean = emojiPackages[emojiPackages.length-1] laseSectionBean.emojis.push(item) if (laseSectionBean.emojis.length == 31) { laseSectionBean.emojis.push(SCEmojiModelType.delete) } })
3.当表情分页后，最后一页的表情不足 31 个时，填充空格以保证删除表情显示在键盘的右下角，SCEmojiModelType 是个枚举类型，定义了表情，删除，空格三个类型。
if (emojiPackages.length > 0) { let laseSectionBean = emojiPackages[emojiPackages.length-1] let appentCount = 32 - laseSectionBean.emojis.length for (let index = 0; index < appentCount; index++) { if (index == appentCount - 1) { laseSectionBean.emojis.push(SCEmojiModelType.delete) } else { laseSectionBean.emojis.push(SCEmojiModelType.space) } } }
- 当数据源与表情位置确定好后，需要实现页面布局，这里使用 Swiper 实现页面分页效果。
Swiper(this.swiperController) { ForEach(this.emojiPackages, (model: SCEmojiPackageBean, index) => { this.itemSectionView(model) }, (model: SCEmojiPackageBean, index) => { return "" + index }) } .width(FULL_WIDTH) .height(FULL_HEIGHT) .backgroundColor("#f8f8f8")
- Swiper 的每个子页面需要使用 Grid 给表情布局，实现四行八列。
Grid() { ForEach(sectionModel.emojis, (item: SCEmojiModelType | string, index) => { GridItem() { Column() { this.itemView(item) } .width(FULL_WIDTH) .height(FULL_HEIGHT) } }, (item: SCEmojiModelType | string, index) => { return "" + index }) } .columnsTemplate('1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr') .rowsTemplate('1fr 1fr 1fr 1fr') .width(FULL_WIDTH) .height(FULL_HEIGHT)
- 根据不同的数据类型显示不同的表情或填充空格。
if (text == SCEmojiModelType.space) { Text("") .fontSize($r("app.float.vp_20")) .textAlign(TextAlign.Center) } else if (text == SCEmojiModelType.delete) { Text("🔙") .fontSize($r("app.float.vp_20")) .textAlign(TextAlign.Center) .onClick(()=>{ this.inputEvent("") }) } else if (text as string) { Text(text as string) .fontSize($r("app.float.vp_20")) .textAlign(TextAlign.Center) .onClick(()=>{ this.inputEvent(text as string) }) }
总结
在实现自定义表情键盘的过程中，需要对表情键盘对数据源进行处理，以实现显示页面的整齐效果，同时通过不同的表情类型，实现删除效果和填充空格对齐，已经学会了的小伙伴，赶快动手试试吧。
