头图

前言

在之前,自定义过一个车牌省份简称的键盘,其实光有省份简称是不行的,毕竟一个正常的车牌是有省份简称+字母+数字进行组成的,索性,就再自定义一个车牌字母选择键盘,可以和之前的省份简称键盘进行结合使用。

我们先看一下最终实现的效果。

image.png

分析实现方式

针对这样的一个字母加数字键盘,可以说,实现方式呢,有多种多样,我们大体可以分为三块,最上面是完成按钮,下面是一排数字按钮,再往下就是字母区域,之所以把数字和字母拆分开来,主要两个的边距是有差异的,分开来更加能容易实现;在绘制字母的时候,有一点需要注意,那就是最后的删除按钮是要占据两个格子。

数字按钮

一排数字没有什么好说的,这里使用的是Grid进行实现的,设置了10列,当然,大家也可以使用别的方式进行实现。

定义数据源

mNumberList = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0"]

代码实现

Grid() {
        ForEach(this.mNumberList, (item: string, index: number) => {
          GridItem() {
            Text(item)
              .fontSize(this.rectTextSize)
              .fontColor(this.numProhibit ? this.numProhibitColor :
                (this.itemSelectedArray[index] ? this.rectSelectTextColor : this.rectTextColor))
          }.GridItemAttribute(this, index, item)
        })
      }
      .height(this.rectHeight)
      .columnsTemplate("1fr ".repeat(10).trimEnd())
      .columnsGap(this.columnsGap)
      .rowsGap(this.rowsGap)
      .margin({ top: this.gridMarginTop })
      .scrollBar(BarState.Off)

字母按钮

字母按钮,和数字实现是类似的,也是使用的Grid组件,有一点差异就是最后的删除按钮,需要占两格,如何进行占两格呢,主要用到了Grid组件的第二个参数layoutOptions,我们使用它来实现最后的删除按钮摆放。

 (scroller?: Scroller, layoutOptions?: GridLayoutOptions): GridAttribute;

设置最后的删除按钮占两格。

 layoutOptions: GridLayoutOptions = {
    regularSize: [1, 1],
    irregularIndexes: [this.mEnglishList.length - 1],
    onGetIrregularSizeByIndex: (_: number) => {
      return [1, 2]
    }
  }

数据源

mEnglishList = [
    "Q", "W", "E", "R", "T", "Y", "U", "O", "P",
    "A", "S", "D", "F", "G", "H", "J", "K", "L",
    "Z", "X", "C", "V", "B", "N", "M", ""]

代码实现

Grid(undefined, this.layoutOptions) {
        ForEach(this.mEnglishList, (item: string, index: number) => {
          GridItem() {
            if (index == this.mEnglishList.length - 1) {
              Row() {
                Column() {
                  Image(this.deleteIconSrc)
                    .width(this.deleteIconWidth)
                }
                .width("100%")
                .height("100%")
                .backgroundColor(Color.White)
                .borderRadius(2)
                .justifyContent(FlexAlign.Center)
              }
              .width("100%")
              .height("100%")
              .justifyContent(FlexAlign.End)
            } else {
              Text(item)
                .fontSize(this.rectTextSize)
                .fontColor(this.itemSelectedArray[index+this.mNumberList.length] ? this.rectSelectTextColor :
                this.rectTextColor)
            }
          }.GridItemAttribute(this, index + this.mNumberList.length, item)

        }, (item: string, index: number) => JSON.stringify(item) + "_" + index)
      }
      .columnsTemplate("1fr ".repeat(this.columnSize).trimEnd())
      .columnsGap(this.columnsGap)
      .rowsGap(this.rowsGap)
      .margin({ top: Number(this.gridMarginTop) + 10, left: 15, right: 15 })
      .scrollBar(BarState.Off)

封装使用

和车牌省份简称一样,车牌字母也进行封装,方便大家进行使用。

方式一:在Terminal窗口中,执行如下命令安装三方包,DevEco Studio会自动在工程的oh-package.json5中自动添加三方包依赖。

建议:在使用的模块路径下进行执行命令。

ohpm install @abner/keyboard

方式二:在工程的oh-package.json5中设置三方包依赖,配置示例如下:

"dependencies": { "@abner/keyboard": "^1.0.0"}

代码调用

LicensePlateLetterView({
  onItemClick: (item: string, index: number) => {
    //点击事件
    console.log("=====点击内容:" + item + "===点击索引:" + index)
  },
  onDelete: () => {
    //点击删除
    console.log("=====点击删除")
  }
})

相关属性

属性类型概述
onItemClick(item: string, index: number) =\> void点击条目回调
onDelete() =\> void点击删除回调
onComplete(item: string) =\> void点击完成回调
rowsGapLength行间距
columnsGapLength列间距
columnSizenumber展示几列,默认是10列
bgColorResourceColor背景颜色
marginLeftLength距离左边
marginRightLength距离右边
rectHeightLength每个格子高度
titleHeightLength标题栏高度
rootHeightLength键盘整体的高度
gridMarginTopLength网格距离顶部
gridMarginBottomLength网格距离底部
completeTextColorResourceColor完成按钮的颜色
completeFontSizenumber/string/ Resource完成文字大小
isShowCompleteboolean是否显示完成按钮
rectBgColorResourceColor格子背景
rectSelectBgColorResourceColor格子选中背景
rectBorderWidthLength格子边框宽度
rectBorderRadiusLength格子圆角
rectBorderColorResourceColor格子边框颜色
rectBorderSelectColorResourceColor格子选中边框颜色
rectTextSizeLength格子的文字大小
rectTextColorLength格子文字的默认颜色
rectSelectTextColorResourceColor格子文字的选中颜色
numProhibitboolean是否禁止数字
numProhibitColorResourceColor禁止文字颜色
deleteIconWidthLength删除图片宽度
deleteIconSrcPixelMap/ResourceStr/ DrawableDescriptor删除icon资源

相关总结

车牌字母键盘和一般的键盘还有很大区别的,大家可以发现,键盘上是少一个字母的,因为I字母具有混淆性,所以这个字母是不在车牌键盘内的。


程序员一鸣
14 声望1 粉丝