鴻蒙App開發之TextField

在前面的Text與Button講解之后，我們實作了一個撥號的界面，但其實撥號的號碼顯示并不是使用Text組件，因為它監測洗掉太麻煩，

登錄界面
而真正用于撥號界面的組件是TextField文本框，同時，它也是繼承自Text組件：

public class TextField extends Text

和前面的章節一樣，今天我們專門講解TextField文本框的使用方式，

創建TextField

首先，我們還是使用XML布局檔案進行TextField組件的創建，示例代碼如下：

<TextField
    ohos:height="40vp"
    ohos:width="match_parent"
    ohos:text_size="25vp"
    ohos:margin="20vp"
    ohos:padding="5vp"
    ohos:background_element="$graphic:background_ability_main"
    ohos:hint="請輸入用戶名"
    ohos:basement="#00FF00"
    ohos:text_alignment="vertical_center"
/>

運行之后，效果如下：
基礎效果
這里，有幾個重要的資料我們需要注意，具體如下表所示：

屬性	含義
hint	文本框提示內容
basement	輸入框基線，也就是圖片中綠色直線
text_alignment	輸入內容垂直居中
element_cursor_bubble	文本的游標氣泡，也就是圖片中綠色圓形
multiple_lines	多行顯示
text_input_type	文本框型別，比如密碼設定為pattern_password，就會只顯示***號

我們在上面的代碼中，并沒有設定這個屬性，下面，我們來將它改為矩形紅色，示例代碼如下：

ohos:element_cursor_bubble="$graphic:textfield_bubble"

這里，我們只需要添加一行屬性即可，graphic檔案夾下textfield_bubble內容如下所示：

<?xml version="1.0" encoding="UTF-8" ?>
<shape
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:shape="rectangle">
    <solid
        ohos:color="#FF0000"/>
</shape>

運行之后，效果如下：
長方形氣泡

實戰登錄界面

到今天，我們已經學習了3個組件：Text、Button以及TextField，

通過這3個組件，我們完全可以實作手機上的登錄界面，下面，我們就來實作登錄界面的效果，

首先，是我們XML的布局檔案，代碼如下：

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:alignment="center"
    ohos:background_element="$media:background"
    ohos:orientation="vertical">

    <Text
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:text_size="50vp"
        ohos:bottom_margin="20vp"
        ohos:text="登錄界面"/>

    <StackLayout
        ohos:height="match_content"
        ohos:width="match_parent"
        ohos:margin="10vp">

        <TextField
            ohos:id="$+id:textfield_username"
            ohos:height="40vp"
            ohos:width="match_parent"
            ohos:text_size="25vp"
            ohos:background_element="$graphic:background_ability_main"
            ohos:text_alignment="vertical_center"
            ohos:padding="5vp"
            ohos:hint="請輸入用戶名"
            ohos:margin="10vp"/>

        <Text
            ohos:id="$+id:text_username"
            ohos:height="match_content"
            ohos:width="match_content"
            ohos:layout_alignment="right"
            ohos:text="輸入的用戶名錯誤"
            ohos:visibility="hide"
            ohos:text_size="15vp"
            ohos:text_color="#FF0000"
            ohos:margin="20vp"
            ohos:text_alignment="vertical_center"/>
    </StackLayout>

    <StackLayout
        ohos:height="match_content"
        ohos:width="match_parent"
        ohos:margin="10vp">

        <TextField
            ohos:id="$+id:textfield_password"
            ohos:height="40vp"
            ohos:width="match_parent"
            ohos:text_size="25vp"
            ohos:background_element="$graphic:background_ability_main"
            ohos:text_alignment="vertical_center"
            ohos:text_input_type="pattern_password"
            ohos:padding="5vp"
            ohos:hint="請輸入密碼"
            ohos:margin="10vp"/>

        <Text
            ohos:id="$+id:text_password"
            ohos:height="match_content"
            ohos:width="match_content"
            ohos:layout_alignment="right"
            ohos:text_size="15vp"
            ohos:text_color="#FF0000"
            ohos:text="密碼輸入錯誤"
            ohos:margin="20vp"
            ohos:visibility="hide"
            ohos:text_alignment="vertical_center"/>
    </StackLayout>

    <Button
        ohos:id="$+id:button_login"
        ohos:height="match_content"
        ohos:width="100vp"
        ohos:top_padding="5vp"
        ohos:bottom_padding="5vp"
        ohos:text_size="25vp"
        ohos:background_element="$graphic:background_ability_main"
        ohos:text="登錄"/>
</DirectionalLayout>

Java頁面代碼：

package com.liyuanjing.idacommunity.slice;

import com.liyuanjing.idacommunity.ResourceTable;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.components.Button;
import ohos.agp.components.Component;
import ohos.agp.components.Text;
import ohos.agp.components.TextField;
import ohos.agp.components.element.ShapeElement;

public class MainAbilitySlice extends AbilitySlice{
    private TextField username_textField;
    private TextField password_textField;
    private Button login_button;
    private Text username_text;
    private Text password_text;
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_ability_main);
        //設定輸入框不被軟鍵盤遮擋
   		getWindow().setInputPanelDisplayType(WindowManager.LayoutConfig.INPUT_ADJUST_PAN);
        this.username_textField=(TextField)findComponentById(ResourceTable.Id_textfield_username);
        this.password_textField=(TextField)findComponentById(ResourceTable.Id_textfield_password);
        this.login_button=(Button) findComponentById(ResourceTable.Id_button_login);
        this.username_text=(Text)findComponentById(ResourceTable.Id_text_username);
        this.password_text=(Text)findComponentById(ResourceTable.Id_text_password);
        this.login_button.setClickedListener(new Component.ClickedListener() {
            @Override
            public void onClick(Component component) {
                username_text.setVisibility(Component.VISIBLE);
                password_text.setVisibility(Component.VISIBLE);
                //改變TextField錯誤樣式
                ShapeElement errorElement = new ShapeElement(MainAbilitySlice.this, ResourceTable.Graphic_textfield_error);
                username_textField.setBackground(errorElement);
                password_textField.setBackground(errorElement);
            }
        });
        this.username_textField.setFocusChangedListener(new Component.FocusChangedListener() {
            @Override
            public void onFocusChange(Component component, boolean b) {
                if (b) {
                    // 獲取到焦點
                    if(username_text.getVisibility()==Component.VISIBLE){
                        username_text.setVisibility(Component.INVISIBLE);
                    }
                } else {
                    //失去焦點
                    ShapeElement backgroundElement = new ShapeElement(MainAbilitySlice.this, ResourceTable.Graphic_background_ability_main);
                    username_textField.setBackground(backgroundElement);
                }
            }
        });
        this.password_textField.setFocusChangedListener(new Component.FocusChangedListener() {
            @Override
            public void onFocusChange(Component component, boolean b) {
                if (b) {
                    // 獲取到焦點
                    if(password_text.getVisibility()==Component.VISIBLE){
                        password_text.setVisibility(Component.INVISIBLE);
                    }
                } else {
                    // 失去焦點
                    ShapeElement backgroundElement = new ShapeElement(MainAbilitySlice.this, ResourceTable.Graphic_background_ability_main);
                    password_textField.setBackground(backgroundElement);
                }
            }
        });
    }

    @Override
    public void onActive() {
        super.onActive();
    }

    @Override
    public void onForeground(Intent intent) {
        super.onForeground(intent);
    }
}

默認TextField樣式（background_ability_main.xml）：

<?xml version="1.0" encoding="UTF-8" ?>
<shape
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:shape="rectangle">
    <corners
    ohos:radius="50"/>
    <stroke
        ohos:width="5"
        ohos:color="#00FF00"/>
    <solid
        ohos:color="#FFFFFFFF"/>
</shape>

點擊登錄后TextField樣式（textfield_error.xml）：

<?xml version="1.0" encoding="UTF-8" ?>
<shape
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:shape="rectangle">
    <corners
        ohos:radius="50"/>
    <stroke
        ohos:width="5"
        ohos:color="#FF0000"/>
    <solid
        ohos:color="#FFFFFFFF"/>
</shape>

這里需要注意的是，通過Java改變TextField的代碼為：

ShapeElement backgroundElement = new ShapeElement(MainAbilitySlice.this, ResourceTable.Graphic_background_ability_main);
username_textField.setBackground(backgroundElement);

同樣的，TextField獲取焦點事件以及失去焦點事件由FocusChangedListener進行實作，代碼如下：

this.password_textField.setFocusChangedListener(new Component.FocusChangedListener() {
            @Override
    public void onFocusChange(Component component, boolean b) {
        if (b) {
            // 獲取到焦點
        } else {
            // 失去焦點
        }
    }
});

最終實作的效果如首圖所示，

轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/286440.html

標籤：其他

上一篇：“軟體測驗”就需要這么學！

下一篇：不會這些字串操作，你怎么精通C語言？如何玩轉C++?

鴻蒙App開發（3）---TextField組件

目錄

鴻蒙App開發之TextField

創建TextField

實戰登錄界面