前言
在日常开发中，不同的应用程序都有自己专属的键盘，特别是在评论和发帖中需要自定义表情键盘，鸿蒙中对自定义键盘提供了很好的支持，本篇文章将带你一步步实现一个自定义表情键盘，建议点赞收藏！
实现效果
需求分析
对数据源进行拆分组合。
处理表情之间的间隔与删除表情的位置。
实现表情键盘的布局。
技术实现
定义一个数组用来临时存放表情字符
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)
})
}
总结
在实现自定义表情键盘的过程中，需要对表情键盘对数据源进行处理，以实现显示页面的整齐效果，同时通过不同的表情类型，实现删除效果和填充空格对齐，已经学会了的小伙伴，赶快动手试试吧。
