DEV Community

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

Posted on

HarmonyOS Development: Customize a License Plate Province Short for Keyboard

#harmonyos

Foreword 

this article is based on Api12 

previously, I used a keyboard in Android system for license plate provinces. At that time, I used the form of combined View. Considering that the last delete button occupies two squares separately, special treatment was done, and the weight weight and width were set separately. Since the application of Hongmeng system has been developed, the Android version of license plate keyboard was encapsulated with Hongmeng. 

Image description

Hongmeng is relatively simple to make. A Grid component can be used directly. The final delete button is used layout Options GridLayoutOptions can be easily implemented. 

This article is roughly as follows: 

1. Set GridLayoutOptions and plan keyboard placement

2, set properties and methods to develop extensible effects

3. Simple use after open source

4. Use summary

first, set up GridLayoutOptions and plan keyboard placement. 

The most important thing for us is the delete button in the last row, so that the delete button has exclusive two columns, so we can set GridLayoutOptions in this way.

 

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

regularSize: the number of rows and columns in the Grid of a gridiitem with a regular size. Only one row and one column are supported, that is, [1,1].

The most important parameters are irregularIndexes and onGetIrregularSizeByIndex. irregularIndexes indicate that the size of the specified gridiitem index in Grid is irregular. For example, if we set the last Grid, then we can set the index of the last Grid. Of course, it is an array. In actual development, we can dynamically set the number of rows occupied by the specified index, since we have 10 columns in one row, the last row has 4 columns. Of course, my treatment here is that the last one occupies 4 columns directly, and then the index is judged and the delete button is set. Of course, there are other treatment methods. 

First, when defining the data, you need to add an empty data to the data for the separate setting of the last element.

 

Private mLicensePlateList=["Jing", "Jin", "Yu", "Hu", "Ji", "Jin", "Liao", "Ji", "Hei", "Su",
Zhejiang, Anhui, Fujian, Gan, Lu, Yu, E, Xiang, Yue, Qiong,
Chuan, Gui, Yun, Shan, Gan, Qing, Meng, Gui, Ning, Xin,
"Zang", "envoy", "leader", "learner", "Hong Kong", "Macao", ""]
Enter fullscreen mode Exit fullscreen mode

Then in when ForEach traverses, set a separate delete button for the last index, and display the non-last element normally.

 

if (index == this.mLicensePlateList.length - 1) {
              Row() {
                Column() {
                  Image(this.deleteIconSrc)
                    .width(this.deleteIconWidth)
                }
                .width(this.deleteWidth)
                .height("100%")
                .backgroundColor(Color.White)
                .borderRadius(2)
                .justifyContent(FlexAlign.Center)
              }
              .width("100%")
              .height("100%")
              .justifyContent(FlexAlign.End)
              .onAreaChange((_: Area, newValue: Area) => {
                this.deleteWidth = Number(newValue.width) / 2 - Number(this.columnsGap) / 2
              })
            }
Enter fullscreen mode Exit fullscreen mode

II, set properties and methods to develop extensible effects 

if you only use it yourself, you don't need to expand it, you can only adapt to your own application, but if you want other people or other applications to use it, then the expansion of attributes is very necessary. After all, each row shows several, and the background, color, size, etc. of each grid are different. We can expose these necessary factors in the form of attributes to meet as many needs as possible. 

For specific attributes, just look directly at the description in item 3. 

Third, the simple use of open source 

1. Remote Dependency

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

Image description

check whether the reference is successful

no matter which method is used for dependency, an oh_modules file will be generated and source code files will be created in the used module. If there is one, it will succeed, or if there is none, it will fail, as follows: 

Image description

(2) Fast use


 

LicensePlateView({
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

property Introduction

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 
prohibit  boolean  whether to ban the short name of the license plate behind 
deleteIconWidth  Length  delete image width 
deleteIconSrc  PixelMap/ResourceStr/ DrawableDescriptor  delete icon resources 

IV. Use Summary 

the current LicensePlateView is only a component, that is, a View. You can put it into any UI layout, such as custom pages, custom pop-up windows, etc. Of course, I will also expand the pop-up method similar to the soft keyboard form in the future, and you can pay attention to the next version.

Top comments (0)