บทเรียนจาก Course Basic Android Development: การรับค่า EditText ด้วย Button โดยการวางค่า EditText แล้วรับค่าที่พิมพ์เข้าไปโดยการกดปุ่ม Button ให้ค่าปรากฏบน TextView

1. BASIC ANDROID APPS
Basic Widgets and Basic Coding

2. BASIC ANDROID APPS
Tutorial 1: รับค่า EditText มาแสดงที่ TextView หลังจากกด ปุ่ม Button

3. BASIC ANDROID APPS
นา Widgets ต่อไปนี้
วางลงที่หน้า Layout Design
หรือไฟล์ activity_main.xml
Large Text
Button
TextEdit
Widgets

4. BASIC ANDROID APPS
ในไฟล์ activity_main.xml
ให้เปิดเป็นโหมด Text ไว้
เพื่อนา ID มาใช้
@+id/textView
@+id/editText
@+id/button
id

5. BASIC ANDROID APPS
เปิด ไฟล์ Code ที่ MainActivity.java
ทาการ Import ส่วนของ Widgets ที่เราจะต้องใช้ลงไปในส่วน Header ของ Code MainActivity

6. BASIC ANDROID APPS
public class MainActivity extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
final EditText textName = (EditText)findViewById(R.id.editText);
final Button submitButton = (Button)findViewById(R.id.button);
final TextView textResult = (TextView)findViewById(R.id.textView);
}
รูปแบบการ Final จะเป็นรูปแบบการเขียนดังนี้
สีแดง คือ ชื่อตัวแปรที่เรากาหนดมาแทนค่า Widgets (ตัวอย่าง: textName, submitButton เป็นต้น)
สีเขียว คือ ชื่อตัวแปรที่เราอ้างจากไฟล์ activity_main.xml หรือหน้า Design Layout
(ตัวอย่าง: editText,button,textView เป็นต้น)

7. BASIC ANDROID APPS
submitButton.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
}
});
เขียนคาสั่ง Event เมื่อกดปุ่ม Button ที่เราตั้งชื่อว่า “submitButton” เพิ่มเข้าไปดังนี้
เพิ่มในเมธิดฟังก์ชันที่ชื่อ onCreate()
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
final EditText textName = (EditText)findViewById(R.id.editText);
final Button submitButton = (Button)findViewById(R.id.button);
final TextView textResult = (TextView)findViewById(R.id.textView);
submitButton.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
}
});
}

8. BASIC ANDROID APPS
สร้างตัวแปร String ขึ้นมาชื่อว่า “textValue” รับค่าจาก txtName ตัวแทน Widgets
การรับค่าจาก EditText นั้นจะใช้รูปแบบ txtName.getText().toString();

9. BASIC ANDROID APPS
ตรวจสอบคาสั่งในการรับค่าว่าเป็นแบบนี้หรือไม่;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
final EditText textName = (EditText)findViewById(R.id.editText);
final Button submitButton = (Button)findViewById(R.id.button);
final TextView textResult = (TextView)findViewById(R.id.textView);
submitButton.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
String textValue = textName.getText().toString();
textResult.setText("Your Name:"+textValue);
}
});
}

10. BASIC ANDROID APPS
กรอกชื่อลงไปในช่อง EditText กด Button แล้วสังเกตที่ผลลัพธ์ที่ปรากฏบน TextView

11. BASIC ANDROID APPS
สรุปคาสั่งในบทเรียนนี้
การรับค่า Final หรือ Synthesize จาก Widget เก็บลงตัวแปรคือ
final {Widgets} {ชื่อตัวแปร} = ({Widget})findViewById(R.id.{ตัวแปรใน Layout});
final EditText textName = (EditText)findViewById(R.id.editText);
เมธอดคาสั่งที่ใช้รับ Event เมื่อเกิดการกระทากับ Widget เหล่านั้น เช่น การกดปุ่ม
submitButton.setOnClickListener(new View.OnClickListener() {
});
การรับค่า ตัวแปรจาก Widget เช่นรับค่าที่เราพิมพ์ใน EditText
String textValue = textName.getText().toString();
การแสดงผลลัพธ์ ของ Widget จาพวก TextView
textResult.setText("Your Name:"); หรือ textResult.setText("Your Name:"+textValue);