2020征文-TV「3.3 文本輸入框」鴻蒙HarmonyOSTextField組件介紹和應(yīng)用
51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)
https://harmonyos.51cto.com/#zz
TextField組件是交互類組件之一，是程序用于和用戶進(jìn)行交互的重要組件之一。TextField組件允許用戶在組件中編寫和修改內(nèi)容，與Text組件不同之處在于Text組件的內(nèi)容是不可編輯的。而TextField類是繼承自Text類的，因此Text類中的屬性和方法在TextField實(shí)例中也是可以使用的。TextField組件是重要的交互類組件，我們常見的場景有聊天界面的文字錄入框;登錄界面的賬號、密碼輸入框;內(nèi)容類錄入頁面的標(biāo)題框等等。那么我們來看看如何在UI界面上加上TextField組件。在MingComponent項(xiàng)目中新建TextFieldComponentExampleAbility元程序，然后修改text_field_component_example_layout.xml中的代碼。如下所示：
- xmlns:ohos="http://schemas.huawei.com/res/ohos"
- ohos:height="match_parent"
- ohos:width="match_parent"
- ohos:orientation="vertical">
- ohos:height="match_content"
- ohos:width="match_parent"
- ohos:hint="請輸入..."
- ohos:text_size="50"
- ohos:padding="20"/>
在TextField組件中有hint屬性，這個(gè)屬性是用于提示該組件的用途。比如我們在登錄界面會在用戶賬號輸入框中提示“請輸入賬號...”，這樣能夠使用戶直觀的了解該出填寫那些數(shù)據(jù)。如果我們不設(shè)置hint屬性，這對于用戶不是很友好，同時(shí)也會給開發(fā)人員帶來不便。我們也可以使用hint_color屬性來重新更改提示信息的顯示顏色。
很多時(shí)候我們使用TextField組件與用戶交互，用戶輸入信息，而這個(gè)信息有可能會超出TextField組件的寬度，如果我們設(shè)置其height為match_content時(shí)，內(nèi)容會自動換行。如果我們將其height設(shè)置為固定的值時(shí)，當(dāng)內(nèi)容換行時(shí)，只會顯示當(dāng)前的內(nèi)容行，我們需要使用鼠標(biāo)或者手指上下滑動才能看到被遮住的內(nèi)容。
固定高度后，需要上下滑動才能查看
對于這種情況，我們可以使用max_text_lines屬性來指定內(nèi)容需要顯示多少行，我們來修改text_field_component_example_layout.xml中的代碼，如下所示：
- xmlns:ohos="http://schemas.huawei.com/res/ohos"
- ohos:height="match_parent"
- ohos:width="match_parent"
- ohos:orientation="vertical">
- ohos:height="50vp"
- ohos:width="match_parent"
- ohos:hint="請輸入..."
- ohos:text_size="50"
- ohos:padding="20"
- ohos:max_text_lines="2"/>
這里通過ohos:max_text_lines指定TextField組件最大行數(shù)為兩行，兩行內(nèi)容填充完后，若還有內(nèi)容的話將會直接拽在第二行的內(nèi)容后，被隱藏。因此如果我們需要設(shè)置它的最大行數(shù)，同時(shí)也要考慮字?jǐn)?shù)的限制。如下圖我們輸入兩行內(nèi)容后，再輸入內(nèi)容的話，將不會再顯示，而是直接在光標(biāo)處隱藏，如果你刪除前面的內(nèi)容，后面的內(nèi)容將會出現(xiàn)。
一般我們使用文本輸入框時(shí)，會有多種類型選擇，比如輸入的字符只能是英文字符，或者輸入的字符只能是數(shù)字，又或者輸入字符時(shí)以*號代替顯示，在TextField組件中以text_input_type屬性來設(shè)置文本的文本輸入類型。值有：PATTERN_NUMBER 文本內(nèi)容只包含數(shù)字，PATTERN_PASSWORD 輸入文本內(nèi)容以密碼形式顯示，PATTERN_TEXT 公用的文本模式。我們以password為例，代碼如下。
- xmlns:ohos="http://schemas.huawei.com/res/ohos"
- ohos:height="match_parent"
- ohos:width="match_parent"
- ohos:orientation="vertical">
- ohos:height="match_content"
- ohos:width="match_parent"
- ohos:hint="請輸入..."
- ohos:text_size="50"
- ohos:padding="20"
- ohos:text_input_type="pattern_password"/>
我們在登錄界面上輸入用戶賬號、密碼后我們會點(diǎn)擊登錄按鈕進(jìn)行登錄，如果我們僅僅是以簡單的文本輸入做交互，我們可以使用輸入法選項(xiàng)來代替按鈕的交互。TextField組件提供了input_enter_key_type屬性來設(shè)置文本的輸入選項(xiàng)，值有：ENTER_KEY_TYPE_GO 指示執(zhí)行"go"動作的輸入鍵類型，ENTER_KEY_TYPE_SEARCH 指示執(zhí)行"search"動作的輸入鍵類型，NTER_KEY_TYPE_SEND 指示執(zhí)行"send"動作的輸入鍵類型。我們以search為例，代碼如下：
- xmlns:ohos="http://schemas.huawei.com/res/ohos"
- ohos:height="match_parent"
- ohos:width="match_parent"
- ohos:orientation="vertical">
- ohos:height="match_content"
- ohos:width="match_parent"
- ohos:hint="請輸入..."
- ohos:text_size="50"
- ohos:padding="20"
- ohos:text_input_type="pattern_password"
- ohos:input_enter_key_type="enter_key_type_search"/>
通過上面的代碼我們基本熟悉了TextField組件的使用，對于默認(rèn)樣式的TextField組件我們看起來很別扭，我們不知道它的界限在哪兒，這種UI界面對于用戶來說不友好，對于這種問題我們怎么去解決呢?
- 我們可以給整個(gè)布局一個(gè)與TextField組件不相同的背景色;
我們指定布局的背景色為“#CCCCCC”，TextField組件的背景色為“#F5F5F5”，這樣我們就能很好的區(qū)分TextField組件的界限。
- 我們可以自定義TextField組件的顯示樣式。
我們可以通過設(shè)置TextField組件的背景色，邊框，圓角來自定義TextField組件的顯示樣式，已達(dá)到UI界面的美觀。我們在graphic文件夾下新建background_text_field_component_example_layout.xml文件，在代碼中配置屬性，代碼如下所示：
- ohos:shape="rectangle">
- ohos:color="#F5F5F5"/>
- ohos:radius="20"/>
- ohos:width="2"
- ohos:color="#00BCD4"/>
- 在text_field_component_example_layout.xml中引入自定義樣式，如下所示：
- ohos:height="match_content"
- ohos:width="match_parent"
- ohos:hint="請輸入..."
- ohos:text_size="50"
- ohos:margin="20"
- ohos:padding="20"
- ohos:background_element="$graphic:background_text_field_component_example_layout"/>
在TextField組件中為其提供了一個(gè)獨(dú)有的方法setEditorActionListener(Text.EditorActionListener listener)用于為視圖中的編輯器操作注冊一個(gè)監(jiān)聽器。我們可以通過這個(gè)方法實(shí)現(xiàn)和按鈕同等交互的操作。
- ohos:height="match_parent"
- ohos:width="match_parent"
- ohos:orientation="vertical">
- ohos:id="$+id:text_field_component"
- ohos:height="match_content"
- ohos:width="match_parent"
- ohos:hint="請輸入..."
- ohos:text_size="50"
- ohos:margin="20"
- ohos:padding="20"
- ohos:input_enter_key_type="enter_key_type_search"
- ohos:background_element="$graphic:background_text_field_component_example_layout"/>
- ohos:id="$+id:text_field_editor_action"
- ohos:height="match_content"
- ohos:width="match_content"
- ohos:text="視圖將響應(yīng)并處理編輯器操作"/>
- @Override
- public void onStart(Intent intent) {
- super.onStart(intent);
- super.setUIContent(ResourceTable.Layout_text_field_component_example_layout);
- Text text = (Text) findComponentById(ResourceTable.Id_text_field_editor_action);
- TextField textField = (TextField) findComponentById(ResourceTable.Id_text_field_component);
- textField.setEditorActionListener(new Text.EditorActionListener() {
- @Override
- public boolean onTextEditorAction(int i) {
- if (i == 2) {
- text.setText("視圖將響應(yīng)并處理編輯器操作為：切換");
- return true;
- } else if (i == 3) {
- text.setText("視圖將響應(yīng)并處理編輯器操作為：搜索");
- return true;
- } else if (i == 4) {
- text.setText("視圖將響應(yīng)并處理編輯器操作為：發(fā)送");
- return true;
- }
- return false;
- }
- });
- }
TextField組件的常用屬性和方法這里就介紹這么多，我們小結(jié)一下 本節(jié)的內(nèi)容。
- 提示信息hint屬性和提示信息顏色hint_color屬性
- 最大顯示行數(shù)max_text_lines屬性
- 文本輸入類型text_input_type屬性
- 輸入鍵類型input_enter_key_type屬性
- 自定義TextField樣式
- 編輯器操作監(jiān)聽器
©著作權(quán)歸作者和HarmonyOS技術(shù)社區(qū)共同所有，如需轉(zhuǎn)載，請注明出處，否則將追究法律責(zé)任
51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)
https://harmonyos.51cto.com/#zz
