Devahoy Logo
PublishedAt

Android

ตัวอย่างการใช้งาน TextWatcher บน Android

ตัวอย่างการใช้งาน TextWatcher บน Android

สวัสดีครับ วันนี้จะมาสอนเขียนแอพแอนดรอยส์ โดยจะพูดในเรื่องของ TextWatcher กันครับ

TextWatcher คืออะไร แล้วมีประโยชน์อะไร ?

TextWatcher มันเป็น interface ที่ Android นั้นอำนวยความสะดวกมาให้เรา มันทำงานอย่างไงละ มันก็ทำงานเมื่อมีเหตุการณ์เกิดขึ้นกับตัว EditText (ตัวอักษรมีการเปลี่ยนแปลง) พูดง่ายๆก็คือ เมื่อผู้ใช้ทำงานป้อนข้อมูลลงไปทุกครั้ง ไอ้เจ้า TextWatcher มันก็จะทำงาน

เมื่อรู้แล้วว่ามันคืออะไร ทำอะไรได้ ต่อไปมาดูประโยชน์ของเจ้า TextWatcher กันซะ TextWatcher มันมีประโยชน์ เมื่อผู้อ่าน อยากจะดักจับข้อมูลที่ยูเซอร์ป้อนมา เช่น

  • จำกัดจำนวนที่สามารถใส่ค่าได้ใน EditText (แต่ว่าจริงๆมันก็มี method setMaxLength แล้วนะเออ)
  • นับจำนวนตัวอักษร แล้วนำไป คำนวณหรืออะไรก็แล้วแต่

ขั้นตอนการใช้งาน TextWatcher

มาดูขั้นตอนการใช้งาน TextWatcher กันเลยดีกว่า การใช้งานไม่ยุ่งยาก เพียงแค่เรียก method addTextChangedListener() ของ EditText

โดยจะ implement แบบนี้ (Anonymous)

1
editText.addTextChangedListener(new TextWatcher() {...});

หรือจะแบบนี้ก็แล้วแต่สะดวก

1
editText.addTextChangedListener(myTextWatcher);
2
3
public TextWatcher myTextWatcher = new TextWatcher() {
4
5
@Override
6
public void onTextChanged(CharSequence s, int start, int before, int count) {
7
8
}
9
10
@Override
11
public void beforeTextChanged(CharSequence s, int start, int count,
12
int after) {
13
14
}
15
16
@Override
17
public void afterTextChanged(Editable s) {
18
19
}
20
};

ตัวอย่างการใช้งาน

รูปแสดงการใช้ TextWatcher

รูปแสดงการใช้ TextWatcher

ตัวอย่างแอพนี้จะใช้ TextWatcher มาช่วย ให้นับจำนวนตัวอักษรที่สามารถพิมพ์ได้ (ลองนึกถึง tweet ของ Tweeter ดูครับ ว่าจำกัดจำนวนตัวอักษร แอพนี้ก็ลักษณะคล้ายๆกัน) เมื่อถึงกำหนด หรือว่าใกล้ครบลิมิตแล้ว ก็ให้ตัวอักษรทำการเปลี่ยนสีกลายเป็นสีแดง

ในส่วน Layout มีแค่ EditText สำหรับป้อนตัวอักษร และ TextView ไว้สำหรับนับตัวอักษรที่พิมพ์ลงไป เท่านั้นเอง

ไฟล์ activity_main.xml

1
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
2
xmlns:tools="http://schemas.android.com/tools"
3
android:layout_width="match_parent"
4
android:layout_height="match_parent"
5
android:paddingBottom="@dimen/activity_vertical_margin"
6
android:paddingLeft="@dimen/activity_horizontal_margin"
7
android:paddingRight="@dimen/activity_horizontal_margin"
8
android:paddingTop="@dimen/activity_vertical_margin">
9
10
<EditText
11
android:id="@+id/editMessage"
12
android:layout_width="match_parent"
13
android:layout_height="wrap_content"
14
android:layout_alignParentLeft="true"
15
android:layout_alignParentTop="true"
16
android:layout_marginTop="21dp"
17
android:ems="10"
18
android:gravity="top"
19
android:maxLength="120"
20
android:hint="put some word.."
21
android:inputType="textMultiLine" />
22
23
<TextView
24
android:id="@+id/textCount"
25
android:layout_width="wrap_content"
26
android:layout_height="wrap_content"
27
android:layout_alignRight="@+id/editMessage"
28
android:textColor="#00ff00"
29
android:layout_below="@+id/editMessage"
30
android:layout_marginTop="26dp"
31
android:text="120" />
32
33
</RelativeLayout>

ส่วนฝั่งโค๊ด MainActivity.java ก็ทำการนับตัวอักษรของ EditText ทุกครั้ง ที่มีการพิมพ์ข้อความลงไป แล้วเช็ค ว่าตัวอักษรที่จะพิมพ์ได้ ถึงลิมิตหรือยัง ถ้าเหลืออีกแค่ 20ตัว จะเปลี่ยนสี TextView เป็นสีแดง

ดูตัวอย่างตามนี้เลย

1
package com.devahoy.tutorial;
2
3
import android.app.Activity;
4
import android.graphics.Color;
5
import android.os.Bundle;
6
import android.text.Editable;
7
import android.text.TextWatcher;
8
import android.widget.EditText;
9
import android.widget.TextView;
10
11
public class MainActivity extends Activity {
12
13
private EditText mEditMessage;
14
private TextView mTextCount;
15
16
@Override
17
public void onCreate(Bundle savedInstanceState) {
18
super.onCreate(savedInstanceState);
19
setContentView(R.layout.activity_main);
20
21
mEditMessage = (EditText) findViewById(R.id.editMessage);
22
mTextCount = (TextView) findViewById(R.id.textCount);
23
24
mEditMessage.addTextChangedListener(myTextWatcher);
25
26
}
27
28
public TextWatcher myTextWatcher = new TextWatcher() {
29
30
@Override
31
public void onTextChanged(CharSequence s, int start, int before, int count) {
32
33
}
34
35
@Override
36
public void beforeTextChanged(CharSequence s, int start, int count,
37
int after) {
38
39
}
40
41
@Override
42
public void afterTextChanged(Editable s) {
43
int count = 120 - mEditMessage.length();
44
45
mTextCount.setText(String.valueOf(count));
46
47
mTextCount.setTextColor(Color.GREEN);
48
49
if (count < 20) {
50
mTextCount.setTextColor(Color.RED);
51
}
52
}
53
};
54
55
}

จะเห็นว่า เราสนใจแค่ เมธอด afterTextChanged() เท่านั้น ภายในเมธอดนี้ จะถูกเรียก เมื่อมีการพิมพ์ข้อความลงไป แล้วก็เช็คเงื่อนไข ว่า หากข้อความที่พิมพ์ได้ เหลือน้อยกว่า 20 ตัวอักษร มันก็จะเปลี่ยนสีเป็นสีแดง

ตัวอย่างคร่าวๆของ TextWatcher ก็มีเพียงเท่านี้ครับ หรือใครมีไอเดีย นำเจ้า TextWatcher ไปประยุกต์ใช้ในงานอื่นๆ ก็สามารถร่วมแชร์กันได้ครับ

หากใครชื่นชอบผลงาน ก็ฝากติดตามบล็อกแห่งนี้ด้วยครับ ขอบคุณครับ

Authors
avatar

Chai Phonbopit

เป็น Web Dev ในบริษัทแห่งหนึ่ง ทำงานมา 10 ปีกว่าๆ ด้วยภาษาและเทคโนโลยี เช่น JavaScript, Node.js, React, Vue และปัจจุบันกำลังสนใจในเรื่องของ Blockchain และ Crypto กำลังหัดเรียนภาษา Rust

Related Posts