鸿蒙App开发，最牛输入框TextField火力全开！

​一、新增API

实际项目开发中，输入框展示的效果通常会设计为底部一根带有颜色的线条，安卓中实现要么自定义背景，要么自定义控件，相对较麻烦。

鸿蒙对此做了优化，提供了一个属性，只需要设置需要的颜色即可实现该效果。

别看这一点功能很小，但可以看得出华为是用心在做鸿蒙系统，对开发者是真的福音！

 

Xml用法

ohos:basement="#FF0000"

Java用法

// 创建颜色shapeElement对象
ShapeElement shapeElement = new ShapeElement();
shapeElement.setRgbColor(new RgbColor(0xFF0000FF));
// 设置
textField.setBasement(shapeElement);

效果如下图：

下面演示另一种背景实现方法：

 

先看效果图：

 

 

代码如下：

// 定义背景shape文件：text_field_bg.xml
<?xml version="1.0" encoding="utf-8"?>
<shapexmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:shape="rectangle">
​<cornersohos:radius="30vp"/><solidohos:color="#FFEBEBEB"/>
</shape>
// 布局文件中引用
<TextFieldohos:id="$+id:tf"ohos:height="60vp"ohos:width="match_parent"ohos:text_alignment="vertical_center"ohos:left_padding="20vp"ohos:right_padding="20vp"ohos:text_size="30vp"ohos:background_element="$graphic:text_field_bg"/>

 

---

 

二、优化API

 

1、优化内容监听功能

 

与安卓相比，TextField文本内容更新监听做了精简优化，从3个回调监听变成了1个。

 

Text.TextObserver：文本内容更新观察者

 

该观察者为一个interface接口，需要重写onTextUpdated方法，该方法有4个参数：

参数1，String content：这次更新后，输入框文本内容字符串。

参数2，int start：这次更新前，文本内容的起始位置。

参数3，int before：这次更新前，文本内容长度。

参数4，int count：这次更新的文本内容与更新前文本内容对比，变化的长度。

 

监听变化代码如下：

TextField textField = (TextField) findComponentById(ResourceTable.Id_tf);
Text.TextObserver textUpdateObserver = new Text.TextObserver() {@Overridepublic void onTextUpdated(String content, int start, int before, int count) {// content：这次更新后，输入框文本内容字符串// start：这次更新前，文本内容的起始位置// before：这次更新前，文本内容长度// count：这次更新的文本内容与更新前文本内容对比，变化的长度}
};
// 添加观察者
textField.addTextObserver(textUpdateObserver);
// 移除观察者
textField.removeTextObserver(textUpdateObserver);

 

2、优化文本选择器相关API

 

在安卓系统中，长按文本选择后会弹出剪切复制等的文本选择器，如下图效果：

 

 

安卓产品经理：明天你适配下所有机型，将文本选择器改成可配置的颜色！

安卓程序员：……

安卓程序员：mmp！

安卓并未提供相关API，只能通过主题和反射去修改，但效果极差，许多手机还不生效。

 

现在鸿蒙优化了，喜大普奔啊！

 

1、 设置选中区域颜色

 

Xml用法

// 设置十六进制颜色值
ohos:selection_color="#0000FF"
// 或，使用颜色引用
ohos:selection_color="$color:blue"

Java用法

textField.setSelectionColor(Color color)

 

使用蓝色，效果如下图：

 

 

---

 

2、 设置气泡尺寸

 

Xml用法

 

设置光标下气泡尺寸：

// 气泡宽度
ohos:bubble_width="100vp"
// 气泡高度
ohos:bubble_height="50vp"

 

设置选中文本左右两边气泡尺寸：

// 设置左边气泡尺寸
ohos:bubble_left_width="50vp"
ohos:bubble_left_height="100vp"
// 设置右边气泡尺寸
ohos:bubble_right_width="20vp"
ohos:bubble_right_height="50vp"

 

Java用法

 

设置光标下气泡尺寸：

// 单独设置宽高
textField.setBubbleWidth(int width);
textField.setBubbleHeight(int height);
// 一起设置
textField.setBubbleSize(int width, int height);

 

设置选中文本左右两边气泡尺寸：

// 设置左边气泡尺寸
textField.setLeftBubbleWidth(int width);
textField.setLeftBubbleHeight(int height);
textField.setLeftBubbleSize(int width, int height);
// 设置右边气泡尺寸
textField.setRightBubbleWidth(int width);
textField.setRightBubbleHeight(int height);
textField.setRightBubbleSize(int width, int height);

 

效果如下图：

 

2、 设置气泡背景图

 

Xml用法

 

设置光标下的气泡背景（可以是媒体资源图片，如png、jpg，也可以是shape设置颜色背景），这里只使用媒体图片举例：

ohos:element_cursor_bubble="$media:icon"

 

设置选中文本左右两边气泡背景（可以是媒体资源图片，如png、jpg，也可以是shape设置颜色背景），这里只使用媒体图片举例：

// 左边气泡图片
ohos:element_selection_left_bubble="$media:icon"
// 右边气泡图片
ohos:element_selection_right_bubble="$media:icon"

 

Java用法

 

设置光标下的气泡背景，与xml一样只举例媒体图片：

TextField textField = (TextField) findComponentById(ResourceTable.Id_text_helloworld);
Resource resource = getResourceManager().getResource(ResourceTable.Media_icon);
PixelMapElement pixelMapElement = new PixelMapElement(resource);
// 设置图片气泡
textField.setBubbleElement(pixelMapElement);

 

设置选中文本左右两边气泡背景，与xml一样只举例媒体图片：

TextField textField = (TextField) findComponentById(ResourceTable.Id_text_helloworld);
Resource resource = getResourceManager().getResource(ResourceTable.Media_icon);
PixelMapElement pixelMapElement = new PixelMapElement(resource);
// 设置左边气泡
textField.setSelectionLeftBubbleElement(pixelMapElement);
// 设置右边气泡
textField.setSelectionRightBubbleElement(pixelMapElement);

 

效果如下图：

 

 

三、常规API

 

其他常用API与安卓类似， 下面列举一些介绍。

 

1、 设置输入框弹出键盘类型

 

鸿蒙对输入类型做了精简，只提供了4中枚举类型，这里特别要提的是，鸿蒙提供了一种新的枚举类型：pattern_null，设置后，输入框获取焦点不会弹出键盘，，具体可以下面用法。

 

Xml用法

// 设置后，输入框获取到焦点，不弹出键盘
ohos:text_input_type="pattern_null"
// 文本类型键盘
ohos:text_input_type="pattern_text"
// 密码类型键盘，输入框变成了*号密码类型
ohos:text_input_type="pattern_password"
// 数字类型键盘
ohos:text_input_type="pattern_number"

 

Java用法

// 设置后，输入框获取到焦点，不弹出键盘
textField.setTextInputType(InputAttribute.PATTERN_NULL);
// 文本类型键盘
textField.setTextInputType(InputAttribute.PATTERN_TEXT);
// 密码类型键盘，输入框变成了*号密码类型
textField.setTextInputType(InputAttribute.PATTERN_PASSWORD);
// 数字类型键盘
textField.setTextInputType(InputAttribute.PATTERN_NUMBER);

 

2、 设置输入框弹出键盘类型

 

很遗憾，作者本以为会有该功能，但……

 

可是我找到了TextFilter类啊！TextField却没有与之关联的方法，由于鸿蒙目前没有开放Java源代码，无法查看，所以……

 

 

应该是提交代码的时候忘记了……或者是……git的锅！

 

安卓提供了属性android:digits和java方法setFilters，用来限制输入框只能输入自己限定的字符，这个功能很常用，目前看来只能通过上面提到的TextObserver监听去控制。

 

3、 其他常用API

 

(1)获取输入框内容：

 

textField.getText()或textField.getEditableString()

 

(2)设置占位文本：

 

Xml用法

// hint内容ohos:hint="HarmonyOS"// hint颜色ohos:hint_color="#0000FF"

Java用法

// hint内容textField.setHint("HarmonyOS");// hint颜色textField.setHintColor(Color.RED);

 

(3)设置占位文本：

 

Xml用法

// 使用垂直居中，也可以使用其他对其属性ohos:text_alignment="vertical_center"

 

Java用法

// 使用垂直居中，也可以使用其他对其属性textField.setTextAlignment(TextAlignment.VERTICAL_CENTER);

 

其他的如：设置行高、行距，字间距等这些功能就不再演示，与安卓一样。