2014年11月17日 星期一

[Android] TextWatcher EditText listener/ EditText的監聽器 & AlertDialog

看到別人都可以輸入完EditText1 就跳到EditText2,到底是如何做到的呢?

如果在主要的xml上面有的EditText 要做到這一部分,相信應該不難,網路上也有。

但如果你是要使用AlertDialog跳出一個視窗,該視窗可以輸入東西(EditText),同時又能輸入完跳

下一個的話,如何做呢?


********************************************
本篇是根據這篇教學: 小黑的android教室 來修改的
********************************************



一開始也是就直接複製過去,沒想到居然出現了nullpointer exception!

想了很久才想到原來是因為我的元件不是在activity_main.xml裡面,而一開始的設定

setContentView又是設定activity_main.xml,這就難怪他抓不到了(R.id.元件名稱)!

再解釋更清楚一點,就是當他跳出這個EditText的時候,卻找不到該元件id號,

NullPointerException的例外狀況馬上跳出來。

所以我們需要使用LayoutInflater.inflate這工具來使他(android)明白我們要用的

R.id.元件名是誰/在哪邊(在哪個xml)。在宣告的時候也要這樣用:

mEdit1 = (EditText) login_view.findViewById(R.id.Edit1);     才行


以下是程式碼


Step1;

在onCreate()這邊要初始化一個TextWatcher模組,讓他可以不停監聽

private void InitTextWatcher() {
// 建立文字監聽
TextWatcher mTextWatcher = new TextWatcher() {
@Override
public void afterTextChanged(Editable s) {
}

@Override
public void beforeTextChanged(CharSequence s, int start, int count,
int after) {
}

@Override
public void onTextChanged(CharSequence s, int start, int before,
int count) {
// 如果字數達到3,取消自己焦點,下一個EditText取得焦點
if (mEdit1.getText().toString().length() == 3) {
mEdit1.clearFocus();
mEdit2.requestFocus();
}

if (mEdit2.getText().toString().length() == 3) {
mEdit2.clearFocus();
mEdit3.requestFocus();
}

if (mEdit3.getText().toString().length() == 3) {
mEdit3.clearFocus();
mEdit4.requestFocus();
}

// 如果字數達到3,取消自己焦點,隱藏虛擬鍵盤
if (mEdit4.getText().toString().length() == 3) {
mEdit4.clearFocus();
IBinder mIBinder = MainActivity.this.getCurrentFocus()
.getWindowToken();
InputMethodManager mInputMethodManager = (InputMethodManager) getSystemService(Context.INPUT_METHOD_SERVICE);
mInputMethodManager.hideSoftInputFromWindow(mIBinder,
InputMethodManager.HIDE_NOT_ALWAYS);
}
}
};

// 加入文字監聽
mEdit1.addTextChangedListener(mTextWatcher);
mEdit2.addTextChangedListener(mTextWatcher);
mEdit3.addTextChangedListener(mTextWatcher);
mEdit4.addTextChangedListener(mTextWatcher);
}

因為這邊是輸入IP,所以Length設定3。

Step2:

寫一個AlertDialog

public void InitPopup_IP_setting(){
//-----------取得Login Layout reference----------
     LayoutInflater inflater = LayoutInflater.from(MainActivity.this);
     login_view = inflater.inflate(R.layout.ip_setting,null);
   
     //-----------產生登入視窗--------
     AlertDialog.Builder builder = new AlertDialog.Builder(this);
     builder.setTitle("Connect");
     builder.setMessage("Input Target IP:");
     builder.setView(login_view);
     dialog = builder.create();
     dialog.show();
   
 mEdit1 = (EditText) login_view.findViewById(R.id.Edit1);
 mEdit2 = (EditText) login_view.findViewById(R.id.Edit2);
 mEdit3 = (EditText) login_view.findViewById(R.id.Edit3);
 mEdit4 = (EditText) login_view.findViewById(R.id.Edit4);    
     InitTextWatcher();    
}

**這邊有多一個xml檔就是ip_setting**

ip_setting.xml內容:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/LinearLayout5"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <EditText
            android:id="@+id/Edit1"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_gravity="fill"
            android:layout_weight="1"
            android:digits="0123456789"
            android:ems="10"
            android:inputType="number"
            android:maxLength="3" >

            <requestFocus />
        </EditText>

        <TextView
            android:id="@+id/TextView05"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="." />

        <EditText
            android:id="@+id/Edit2"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:digits="0123456789"
            android:ems="10"
            android:inputType="number"
            android:maxLength="3" />

        <TextView
            android:id="@+id/TextView06"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="." />

        <EditText
            android:id="@+id/Edit3"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:digits="0123456789"
            android:ems="10"
            android:inputType="number"
            android:maxLength="3" />

        <TextView
            android:id="@+id/TextView04"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="." />

        <EditText
            android:id="@+id/Edit4"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:digits="0123456789"
            android:ems="10"
            android:inputType="number"
            android:maxLength="3" />
    </LinearLayout>

    <Button
        android:id="@+id/button1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:onClick="IP_xml_click"
        android:text="Enter" />

</LinearLayout>


好了,就這樣讓AlertDialog+TextWatche完美結合了!