Android Studio アプリ開発入門：テキスト入力 EditText の解説と使い方（エディットボックス、フォーカス変更リスナー、テキスト変更リスナーを含むソースコードを添付）

実行中に問題がある場合、またはソースコードが必要な場合は、ソースコードを収集した後、いいね、フォロー、コメントエリアにメッセージを残してください~~~

1. 編集ボックス EditText

編集ボックス EditText は、ユーザー名、パスワード、評価内容などのソフト キーボードからのテキスト入力を受け取るために使用されます。これはテキスト ビューから派生します。プロパティとメソッドは以下の通りです

 次に、XML レイアウトによる編集ボックス インターフェイスの効果を確認します。

指定した桁数が入力されている場合は入力できなくなり、選択すると下線やハイライトが表示され、より美しく見えます。

 EditSimpleActivity クラスのコードは次のとおりです。

package com.example.chapter05;

import android.os.Bundle;

import androidx.appcompat.app.AppCompatActivity;

public class EditSimpleActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_edit_simple);
    }

}

activity_edit_shapeXML ファイルのコードは次のとおりです

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="5dp"
    android:orientation="vertical" >

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="5dp"
        android:text="下面是登录信息"
        android:textColor="@color/black"
        android:textSize="17sp" />

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="text"
        android:maxLength="10"
        android:hint="请输入用户名"
        android:textColor="@color/black"
        android:textSize="17sp" />

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="textPassword"
        android:maxLength="8"
        android:hint="请输入密码"
        android:textColor="@color/black"
        android:textSize="17sp" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:text="下面是手机信息"
        android:textColor="@color/black"
        android:textSize="17sp" />

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="number"
        android:maxLength="11"
        android:hint="请输入11位手机号码"
        android:textColor="@color/black"
        android:textSize="17sp" />

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="numberPassword"
        android:maxLength="6"
        android:hint="请输入6位服务密码"
        android:textColor="@color/black"
        android:textSize="17sp" />

</LinearLayout>

また、見た目を美しくするために、入力ボックスを角丸長方形に調整すると、次のような効果が得られます。

 コードの一部は次のとおりです

package com.example.chapter05;

import android.os.Bundle;

import androidx.appcompat.app.AppCompatActivity;

public class EditBorderActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_edit_border);
    }

}

XMLファイルは次のとおりです

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="5dp"
    android:orientation="vertical" >

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="text"
        android:hint="这是默认边框"
        android:textColor="@color/black"
        android:textSize="17sp" />

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="5dp"
        android:inputType="text"
        android:hint="我的边框不见了"
        android:background="@null"
        android:textColor="@color/black"
        android:textSize="17sp" />

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="5dp"
        android:inputType="text"
        android:hint="我的边框是圆角"
        android:background="@drawable/editext_selector"
        android:textColor="@color/black"
        android:textSize="17sp" />

</LinearLayout>

2. フォーカス変更リスナー

編集ボックスは入力テキストの最大長を提供しますが、最小長は提供しないため、この時点でそれを検出するにはフォーカス変更リスナーが必要です。クリックするとフォーカス変更イベントがトリガーされ、フォーカス変更イベントがトリガーされます。カーソルが切り替わったときにトリガーできます。効果は以下の通りです

入力したユーザー名が指定された桁数を満たしていない場合にパスワード ボックスをクリックすると、以下に携帯電話番号の入力を求めるプロンプトが表示され、入力が正当であるかどうかの自動検出が有効になります。

 EditFocusActivityクラスのコードは次のとおりです。

package com.example.chapter05;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.text.TextUtils;
import android.view.View;
import android.widget.EditText;
import android.widget.Toast;

public class EditFocusActivity extends AppCompatActivity implements View.OnClickListener, View.OnFocusChangeListener {
    private EditText et_phone; // 声明一个编辑框对象

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_edit_focus);
        // 从布局文件中获取名叫et_phone的手机号码编辑框
        et_phone = findViewById(R.id.et_phone);
        // 从布局文件中获取名叫et_password的密码编辑框
        EditText et_password = findViewById(R.id.et_password);
        // 给密码编辑框注册点击事件监听器
        et_password.setOnClickListener(this);
        // 给密码编辑框注册一个焦点变化监听器，一旦焦点发生变化，就触发监听器的onFocusChange方法
        et_password.setOnFocusChangeListener(this);
    }

    // 焦点变更事件的处理方法，hasFocus表示当前控件是否获得焦点。
    // 为什么光标进入事件不选onClick？因为要点两下才会触发onClick动作（第一下是切换焦点动作）
    @Override
    public void onFocusChange(View v, boolean hasFocus) {
        // 判断密码编辑框是否获得焦点。hasFocus为true表示获得焦点，为false表示失去焦点
        if (v.getId()==R.id.et_password && hasFocus) {
            String phone = et_phone.getText().toString();
            if (TextUtils.isEmpty(phone) || phone.length()<11) { // 手机号码不足11位
                // 手机号码编辑框请求焦点，也就是把光标移回手机号码编辑框
                et_phone.requestFocus();
                Toast.makeText(this, "请输入11位手机号码", Toast.LENGTH_SHORT).show();
            }
        }
    }

    @Override
    public void onClick(View v) {
        // 编辑框比较特殊，要点击两次后才会触发点击事件，因为第一次点击只触发焦点变更事件，第二次点击才触发点击事件
        if (v.getId() == R.id.et_password) {
            String phone = et_phone.getText().toString();
            if (TextUtils.isEmpty(phone) || phone.length()<11) { // 手机号码不足11位
                // 手机号码编辑框请求焦点，也就是把光标移回手机号码编辑框
                et_phone.requestFocus();
                Toast.makeText(this, "请输入11位手机号码", Toast.LENGTH_SHORT).show();
            }
        }
    }
}

activity_edit_focusXML ファイルのコードは次のとおりです

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="5dp" >

    <EditText
        android:id="@+id/et_phone"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:hint="请输入11位手机号码"
        android:inputType="number"
        android:maxLength="11"
        android:background="@drawable/editext_selector"
        android:textColor="@color/black"
        android:textSize="17sp" />

    <EditText
        android:id="@+id/et_password"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:layout_marginTop="5dp"
        android:hint="请输入6位密码"
        android:inputType="numberPassword"
        android:maxLength="6"
        android:background="@drawable/editext_selector"
        android:textColor="@color/black"
        android:textSize="17sp" />

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="登录"
        android:textColor="@color/black"
        android:textSize="17sp" />

</LinearLayout>

3. テキスト変更リスナー

入力メソッドのソフト キーボードはページの下部を覆うことが多く、ログイン、確認、次へなどのボタンが表示されなくなります。ユーザーがこれらのボタンをクリックしたい場合は、リターン キーをもう一度クリックしてソフト キーボードを閉じる必要があります。ユーザーの操作を容易にするために、11 桁の携帯電話番号を入力した後にソフト キーボードを自動的に閉じるなど、特定の条件が満たされた場合にソフト キーボードを自動的に閉じることが最善です。

入力方式のソフト キーボードはシステム サービス INPUT_METHOD_SERVICE によって管理されるため、ソフト キーボードの終了もこのサービスによって処理される必要があります。

この関数ポイントでは、現在入力されているテキストの長さをリアルタイムで監視する必要があります。この監視操作では、テキスト リスナー インターフェイス TextWatcher が使用されます。このインターフェイスには 3 つの監視方法が用意されています。詳細は次のとおりです:

1: beforeTextChanged はテキストが変更される前にトリガーされます。

2: onTextChanged は、テキストが変更されるとトリガーされます。

3: テキスト変更後に afterTextChanged がトリガーされる

11 桁の携帯電話番号と 6 桁のパスワードを入力した後、キーボードを自動的に閉じて非表示にする例を使用してみましょう。

 

 

 

 EditHideActivity クラスのコードは次のとおりです。

package com.example.chapter05;

import android.os.Bundle;
import android.text.Editable;
import android.text.TextWatcher;
import android.widget.EditText;

import androidx.appcompat.app.AppCompatActivity;

import com.example.chapter05.util.ViewUtil;

public class EditHideActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_edit_hide);
        // 从布局文件中获取名叫et_phone的手机号码编辑框
        EditText et_phone = findViewById(R.id.et_phone);
        // 从布局文件中获取名叫et_password的密码编辑框
        EditText et_password = findViewById(R.id.et_password);
        // 给手机号码编辑框添加文本变化监听器
        et_phone.addTextChangedListener(new HideTextWatcher(et_phone, 11));
        // 给密码编辑框添加文本变化监听器
        et_password.addTextChangedListener(new HideTextWatcher(et_password, 6));
    }

    // 定义一个编辑框监听器，在输入文本达到指定长度时自动隐藏输入法
    private class HideTextWatcher implements TextWatcher {
        private EditText mView; // 声明一个编辑框对象
        private int mMaxLength; // 声明一个最大长度变量

        public HideTextWatcher(EditText v, int maxLength) {
            super();
            mView = v;
            mMaxLength = maxLength;
        }

        // 在编辑框的输入文本变化前触发
        public void beforeTextChanged(CharSequence s, int start, int count, int after) {}

        // 在编辑框的输入文本变化时触发
        public void onTextChanged(CharSequence s, int start, int before, int count) {}

        // 在编辑框的输入文本变化后触发
        public void afterTextChanged(Editable s) {
            String str = s.toString(); // 获得已输入的文本字符串
            // 输入文本达到11位（如手机号码），或者达到6位（如登录密码）时关闭输入法
            if ((str.length() == 11 && mMaxLength == 11)
                    || (str.length() == 6 && mMaxLength == 6)) {
                ViewUtil.hideOneInputMethod(EditHideActivity.this, mView); // 隐藏输入法软键盘
            }
        }
    }
}

activity_edit_hideXML ファイルのコードは次のとおりです

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="5dp" >

    <EditText
        android:id="@+id/et_phone"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:hint="输入11位时自动隐藏输入法"
        android:inputType="number"
        android:maxLength="11"
        android:background="@drawable/editext_selector"
        android:textColor="@color/black"
        android:textSize="17sp" />

    <EditText
        android:id="@+id/et_password"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:layout_marginTop="10dp"
        android:hint="输入6位时自动隐藏输入法"
        android:inputType="numberPassword"
        android:maxLength="6"
        android:background="@drawable/editext_selector"
        android:textColor="@color/black"
        android:textSize="17sp" />

</LinearLayout>

作成は簡単ではありませんが、参考になったらいいね、フォロー、収集をお願いします。