DEV Community

Cover image for HarmonyOS Development: Customize a License Plate Letter Keyboard
程序员一鸣
程序员一鸣

Posted on

HarmonyOS Development: Customize a License Plate Letter Keyboard

#harmonyos

Foreword 

this article is based on Api12 

before, I customized the keyboard for the short name of a license plate province. In fact, it is not enough to have the short name of a province. After all, a normal license plate is composed of the short name of a province + letters + numbers. Just customize a license plate letter selection keyboard, which can be used in combination with the short name keyboard of the previous province. 

Let's look at the final effect. 

Image description

Analysis of implementation 

for such a letter and number keyboard, it can be said that there are many ways to implement it. We can roughly divide it into three parts. The top part is the finish button, the bottom part is a row of number buttons, and the bottom part is the letter area. The reason why numbers and letters are separated is that the margins of the main two parts are different and it is easier to separate them. When drawing letters, one thing needs attention, that is, the final delete button is going to occupy two squares. 

Number Button 

there is nothing to say about a row of numbers. Grid is used here to implement it. 10 columns are set. Of course, you can also use other methods to implement it. 

Defining Data Sources

 

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

code implementation

 

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)
Enter fullscreen mode Exit fullscreen mode

letter button 

the letter button is similar to the number implementation and is also a Grid component. One difference is that the final delete button needs to occupy two squares. How to occupy two squares? The second parameter layoutOptions of the Grid component is mainly used. We use it to implement the final delete button placement.

 

 (scroller?: Scroller, layoutOptions?: GridLayoutOptions): GridAttribute;
Enter fullscreen mode Exit fullscreen mode

Set the last delete button to occupy two spaces.

 

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

Data Source

 

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", ""]
Enter fullscreen mode Exit fullscreen mode

code implementation

 

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)
Enter fullscreen mode Exit fullscreen mode

encapsulation Use

Like the abbreviation of the license plate province, the license plate letters are also packaged for everyone to use. 

Method 1: in the Terminal window, run the following command to install the third-party package. DevEco Studio automatically adds the third-party package dependency to the project oh-package.json5. 

Suggestion: Execute the command under the module path used.

ohpm install @abner/keyboard
Enter fullscreen mode Exit fullscreen mode

Method 2: Set the three-party package dependency in the project oh-package.json5. The configuration example is as follows:

 

"dependencies": { "@abner/keyboard": "^1.0.0"}
Enter fullscreen mode Exit fullscreen mode

code call


 

LicensePlateLetterView({
onItemClick: (item: string, index: number) => {
//Click on the event
Console.log ("===Click on content:"+item+"==Click on index:"+index)
},
onDelete: () => {
//Click to delete
Console.log ("====Click to delete")
}
})
Enter fullscreen mode Exit fullscreen mode

related Properties 

property type overview
onItemClick  (item: string, index: number) => void  click entry callback 
onDelete  () => void  click Delete Callback 
onComplete  (item: string) => void  click Finish Callback 
rowsGap  Length  line Spacing 
columnsGap  Length  column Spacing
columnSize  number  show several columns, the default is 10 columns 
bgColor  ResourceColor  background Color 
marginLeft  Length  distance to the left 
marginRight  Length  distance to the right 
rectHeight  Length  height of each grid 
titleHeight  Length  title Bar Height 
rootHeight  Length  overall height of the keyboard 
gridMarginTop  Length  grid Distance Top 
gridMarginBottom  Length  grid Distance Bottom 
completeTextColor  ResourceColor The color of the finish button 
completeFontSize  number/string/ Resource  finish text size 
isShowComplete  boolean  show Finish button 
rectBgColor  ResourceColor  lattice Background 
rectSelectBgColor  ResourceColor  check background 
rectBorderWidth  Length  grid Border Width 
rectBorderRadius  Length  check Fillet 
rectBorderColor  ResourceColor  check Border Color 
rectBorderSelectColor  ResourceColor  check Border Color 
rectTextSize Length  text size of grid 
rectTextColor  Length  default color for check text 
rectSelectTextColor  ResourceColor  checked color for check text 
numProhibit  boolean  whether to ban numbers 
numProhibitColor  ResourceColor  prohibit Text Color 
deleteIconWidth  Length  delete image width 
deleteIconSrc  PixelMap/ResourceStr/ DrawableDescriptor  delete icon resources 

related Summary 

there is a big difference between the license plate letter keyboard and the general keyboard. You can find that there is one letter missing on the keyboard. Because the I letter is confusing, this letter is not in the license plate keyboard.

Top comments (0)