ตกลงเป็นหัวข้อ หรือ คำถามเนีย ยาวจัง ต้นเหตุมาจาก ไปสอนเพื่อนให้เขียนโปรแกรมแอนดรอยด์ ทำอย่างไรก็ไม่เข้าในว่า "อยาก input ข้อมูล ผ่าน EditText เก็บเป็นตัวแปร แล้ว แสดงผลเป็น TextView ทำอย่างไร ?" ก็เลยลองมาทำ WorkShop ในเรื่องนี้กัน

Concept โปรแกรม LearnInputText

Concept โปรแกรม LearnInput Text เป็นอย่างนี้นะ เดี๋ยวเราจะสร้างโปรแกรมแอนดรอยด์ ที่มีแค่ 1 activity มี user Interfact อย่างนี้

1. ส่วนหัวจะเป็น TextView แสดงข้อความ Please Fill Name in the Blank โดยมี id เป็น @+id/txtDisplay
2. ส่วนต่อมาจะเป็น EditText ไว้รับค่าที่ เป็น ข้อความ โดยอ้างอิง id = @+id/edtInput ตรงนี้แหละ เมื่อได้ค่าของข้อมูล ให้ไปเก็บไว้ไนรูปตัวแปร EditInput ด้วย
3. ส่วนต่อมาจะเป็น ปุ่ม เอาไว้คลิกส่งข้อมูล อ้างอิง id = @+id/btnInput โดยจะผูกกับตัวแปร ButtonInput เพื่อให้ onClicklistener ค่อยตรวจจับการคลิก
4. ส่วนสุดท้าย ถูกเรียนว่า TextAnswer เป็น widget แบบ TextView อ้างอิง id = @+id/txtAnswer จะมีไว้สำหรับแสดงค่าที่ส่งมาจาก EditText เอาไปปรับปรุงนิดหน่อย โดยการเติม ข้อความว่า Welcome ด้านหน้า ครับ

ทำเสร็จแล้ว

อันนี้ผมพิมพ์ Master Ung เข้าไปที่ EditText แล้วคลิก Input Name จะได้ผลลัพธ์ แบบนี้

เดี๋ยวเรามาลอง Codding โปรแกรม LearnInputText กัน

เปิดโปรเจคใหม่ออกมาเลยครับ

ไปที่ File > New > Other

เลือก Android Project แบบนี้ครับ

ที่ New Android Project ผมตั้งค่าแบบนี้

1. Project name ผมใช้ LearnInputText
2. รันบน android 2.2 หรือ สูงกว่านั้น
3. Application name ผมให้ชื่อว่า LearnInputText
4. โดยมี Package name เป็น com.androidthai.LearnInputText
5. และสุดท้าย ค่า Min SDK Version ที่ 8 ครับ

ตัว eclipse จะทำการ get ไฟร์ และ โฟวเดอร์ ที่เกี่ยวของให้ดังนี้

สร้าง User Interface ก่อน

ผมเปิด ไฟร์ main.xml ออกมาแก้ไข โดยดับเปิลคลิกที่ไฟร์ main.xml

1.TextView ที่มี id = @+id/txtDisplay

สิ่งแรกมุ่งเปลี่ยน TextView ให้ใช้ String Name เป็น txtDisplay เมื่อเปลี่ยนเสร็จจะเห็นมี error ให้เข้าไปแก้ไขใน ไฟร์ strings.xml โดย แก้ และ เพื่อม String ตามนี้

หรือใครไม่ถนัด ใช้เครื่องมือ จะ Codding แบบ นี้ก็ไม่ห้ามนะครับ

กลับมาที่ main.xml ไม่มี error ละ

ปรับให้ TextView อยู่ตรงกลางด้วย  Gravity = center

ทำอักษรให้หนาขึ้นด้วย TextStyle = bold

ทำตัวอักษรให้ใหญ่ขึ้นอีก Textsize = 20dp

สุดท้ายผมเว้นระยะ ระหว่าง บน และ ล่าง 20dp โดยไปกำหนดที่

• Layout margin botton = 20dp
• Layout margin top = 20dp

2. EditText ที่มี id = @+id/edtInput

จะได้หน้าตาแบบนี้ ผมทำการตั้งค่า id = @+id/edtInput ครับ

ที่ตรง Text = @string/edtInput

ผมกำหนดให้ Layout margin botton = 20dp ครับ

3. Button ที่มี id = @+id/btnInput

ลาก Button ลงมาเลยครับ

ผมกำหนดค่า id =@+id/btnInput

ที่ตรง Text แสดงผล ผมกำหนดเป็นText = @string/btnInput

กำหนดปุ่มให้อยู่ตรงกลางด้วย Layout gravity = center

ปรับขนาดของปุ่มให้หนาหน่อย โดยการกำหนดค่า width = 200dip

4.TextView ที่มีค่า id = @+id/txtAnswer

ลาก TextView  ลงมาเลยครับ

กำหนด id = @+id/txtAnawer ครับ

ผมกำหนดสี ขนาดตัวอักษร และ style จาก

1. Text = @string/txtAnswer
2. Text color = #ffff00 (สีเหลือง)
3. Text size = 20dp
4. Text style = bold

ปรับตำแหน่ง

สำเร็จเราได้ user Interfact แล้ว เดียวครั้งหน้าเรามาดูเรื่อง codding กัน