[Lesson 3] ความสัมพันธ์ของ Layout และโค้ด Java ในการเขียน Android

ห่างหายกันไปนานเหมือนกับสำหรับ บทเรียน เขียน Android โดยในบทเรียนที่ 3 นี้ เราจะมาเรียนรู้การสร้าง Layout และการเขียนโค้ดเรียกใช้ Layout โดยใน [Lesson 3] นี้มีจุดประสงค์ให้เราเข้าใจหลัก และความสัมพันธ์ระหว่าง Layout กับโค้ด Java ที่เราจะ เขียน Android นั่นเองครับ

ใครพลาดบทเรียนก่อนหน้านี้ กลับไปย้อนอ่าน เพื่อทบทวน และทำความเข้าใจกันสักนิด

• [Lesson 1] เริ่มต้นเขียน แอปพลิเคชัน Android ต้องทำอย่างไรบ้าง ?
• [Lesson 2] สร้าง Project เขียน App Android และรันแอปผ่าน Emulator

เรามาเรียนรู้ต่อจากบทเรียนที่แล้วกัน โดยสิ่งที่เราต้องแก้ไขหลักๆ ได้แก่

1. ไฟล์ XML เพื่อสร้างหน้าตาของแอปพลิเคชัน ในตัวอย่างนี้เป็นชื่อ --> "activity_main.xml"
2. ไฟล์ String เพื่อเข้าไปแก้ค่าที่จะแสดงในหน้า Layout นั่นเอง --> "strings.xml"
3. ไฟล์ Java เพื่อเข้าไปตั้งค่าการทำงานของแอปพลิเคชัน --> "MainActivity.java"

สำหรับบทเรียนที่ 3 นี้ ผมจะยกตัวอย่างการเขียนแอปสมัครสมาชิกแบบง่ายๆ ซึ่งจะไม่มีเรื่องดาต้าเบสมาเกี่ยวข้อง เพียงแค่พิมพ์ข้อมูลลง EditText และกด Button เพื่อ Get ค่าจาก EditText มาใช้เท่านั้น และอาจจะมีลูกเล่นอื่นๆ อย่างเช่น AlertDialog หรือเทคนิคการเขียน Android อื่นๆ ปะปนไปกันบ้าง

ทิปส์ --> ก่อนอื่น ขอแนะนำว่าก่อนที่เราจะเริ่ม เขียน Android เราก็ควรจะร่างหน้าตาของแอปเราเอาไว้ก่อน ไม่ว่าจะร่างด้วยโปรแกรม หรือร่างในกระดาษ

1. แก้ไขไฟล์ "activity_main.xml"

สำหรับขั้นตอนแรกในการ เขียน Android เราควรที่จะสร้างหน้าตาแอป หรือที่เรียกว่า Layout ก่อนเลย เพราะเราจะได้รู้โครงสร้าง และการทำงานของแอปว่าต้องทำอะไร ตรงไหนก่อนนั่นเอง ว่าแล้วก็เปิด "activity_main.xml" ขึ้นมา แล้วสร้าง Layout ตามแบบที่เราดีไซน์ไว้เลย โดย Layout ที่เราจะใช้หลักๆ ได้แก่

• LinearLayout --> เป็น Layout ที่ผมใช่บ่อยที่สุดเลยก็ว่าได้ เอาไว้ครอบ Widgets ต่างๆ ในแนวตั้ง หรือแนวนอนแล้วแต่จะกำหนด
• TextView --> แสดงข้อความที่เราต้องการ
• EditText --> ช่องพิมพ์ข้อความ หรือ Input 
• Button --> ปุ่มทั่วไปนั่นเอง

จากภาพด้านบนจะเห็นได้ว่า LinearLayout อันนอกสุด (สีฟ้า) นั้นได้ครอบ LinearLayout อันอื่นที่เรียงกันในแนวตั้ง (สีแดง) และ Widgets ที่ชื่อ TextView กับ EditText ได้เรียงกันเป็นแนวนอนภายใน LinearLayout อีกทีนึงครับ (แรกๆ อาจจะงงกับเรื่อง Layout บ้าง แต่ถ้าทำไปเรื่อยๆ เราจะเริ่มเข้าใจเองครับ)

อยากให้เพื่อนๆ ได้ลองเขียนโค้ดด้วยตัวเองก่อนครับ ถ้าไม่ได้จริงๆ ให้ลองดาวน์โหลดโค้ดมาเปิดอ่านทำความเข้าใจดูนะ

หมายเหตุ 

• ผมจะไม่เอาโค้ดมาแปะในหน้ารีวิวนี้นะ เพราะว่ามันจะยาวเกินไป และจะเอามาเฉพาะตัวที่สำคัญเท่านั้น
• ถ้าอยากรู้รายละเอียด ความหมายของ Layout แต่ละอัน สามารถเข้าไปค้นหา และอ่านได้ที่ https://developer.android.com/reference เลยนะ มีอธิบายทุกตัว และอ่านเข้าใจง่ายด้วย

2. แก้ไขไฟล์ "strings.xml"

เราจะเข้าไปแก้ไฟล์ strings.xml ซึ่งเป็นที่เก็บค่าที่แสดงในหน้า Layout นั่นเอง ยกตัวอย่างเช่น

ภาพบนเป็นไฟล์ Layout ที่เราใช้เป็นตัวแสดงผลนะ (activity_main.xml)

android:text="@string/main_text" (บรรทัดสุดท้าย) --> เป็นการอ้างถึงไฟล์ strings.xml ส่วน main_text เป็นค่าที่เราต้องการจะแสดงในหน้า Layout

ไฟล์ strings.xml

ในส่วนของไฟล์ strings.xml เราสามารถเพิ่มค่า หรือกำหนดค่าได้เลย เช่น string ที่ชื่อ main_text ผมใส่ค่า Member System Testing ลงไป ซึ่งค่านี้ก็จะไปโชว์ใน Layout นั่นเองจ้า

3. แก้ไขไฟล์ "MainActivity.java"

มาถึงในส่วนโครงสร้างการทำงานเบื้องหลังของการเขียน Android แล้วเน้อ ก่อนอื่นเราต้องประกาศตัวแปรที่จะใช้ เพื่อเชื่อมความสัมพันธ์ และการทำงานกับ Layout นั่นเอง เช่น EditText, Button และ TextView .. ส่วนการ Import ก็คลิกเลือกตามที่โปรแกรม Eclipse แนะนำให้นั่นแหละครับ

ส่วนการตั้งชื่อนั้นก็ควรตั้งชื่อให้สอดคล้อง ให้เรารู้ว่า Widget นี้เอาไว้ทำอะไร และพยายามอย่าให้ไปซ้ำกับ id ที่เราตั้งไว้ในไฟล์ Layout ด้วยนะ

หลังจากประกาศตัวแปร Widget เสร็จ ให้เรากำหนด Layout ที่จะใช้ โดยอ้างอิงจากชื่อ id ที่เราตั้งแต่ละตัว อาทิ เช่น

• fieldName เราจะไปอ้างอิงกับ R.id.ชื่อ id ที่เราตั้ง --> fieldName กับ R.id.editName, fieldSurname กับ R.id.editSurname, fieldEmail กับ R.id.editEmail และ fieldTel กับ R.id.editTel เป็นต้น

การประกาศตัวแปรเพื่อเรียกใช้ Layout เสร็จ ก็จะได้คล้ายๆ กับรูปด้านบนเลย

สำหรับการประกาศตัวแปร หรือ Widget นั้นทำได้หลายวิธีครับ จะประกาศไว้ด้านนอกเมธอดเหมือนที่ผมทำ หรือว่าประกาศในเมธอดเหมือนตัวอย่างด้านบนก็ได้เหมือนกันนะ แต่การประกาศไว้ข้างในจะมีผลต่อเมื่อแอป Android ที่เราเขียนนั้นมีขนาดใหญ่ หลายร้อยบรรทัด หรือว่ามีการเชื่อมโยงกับคลาสอื่นๆ มากกว่า 1 คลาสนั่นเอง

ตัวโค้ดด้านบนเป็นการสั่งให้ Get ข้อมูลจาก EditText ที่เราพิมพ์ลงไปมาแสดงผล และถ้าไม่มีข้อความพิมพ์แล้วไปกด Done ตัวแอปก็จะเช็คให้เราพิมพ์ข้อความลงไป นอกจากนี้ยังมีปุ่ม Clear เพื่อลบข้อมูลที่พิมพ์ลงไปอีกด้วย

• setOnclickListener --> เป็นการเพิ่ม Action ว่าจะทำอะไรต่อ เมื่อปุ่มมีการกด
• AlertDialog --> กล่องข้อความเด้งขึ้นมา ให้เราเลือก Yes หรือ No ประมาณนั้น
• Toast.makeText(getBaseContext(), "ข้อความ", Toast.LENGTH_SHORT).show(); --> แสดงข้อความเป็นป็อปอัพขึ้นมา ในระยะเวลาสั้นๆ

ในส่วนนี้จะเป็นการ Clear ข้อมูลที่เราพิมพ์ไป โดยผมจะอ้างอิงกับ EditText แต่ละตัว ถ้ามีการกดปุ่ม Clear จะให้ EditText นั้นใส่ข้อมูลเป็นช่องว่างเปล่าๆ แทนข้อมูลเดิมนั่นเองครับ

การทำงานของแอป Android ที่เราเขียน

วิธีการรันแอป Android ที่เราเขียน ก็แค่คลิกขวาโปรเจค > Run As > Android Application และรอสักพัก Emulator จะขึ้นมา ซึ่งความเร็วใชการเปิด Emulator ก็ขึ้นอยู่กับความแรงของคอมพิวเตอร์ที่คุณใช้

หน้าแรกของแอป First App Ja ที่เราได้เขียนไว้

ทีนี้ลองพิมพ์ข้อความลงไปดูครับ

และเมื่อพิมพ์เสร็จให้กด "Done" จะมีข้อความขึ้นมาว่า Insert 'Fedex' Succeed และข้อความแสดงบน Result ด้านล้าง ซึ่งเป็นการนำเอาต่า EditText ที่เราพิมพ์ไว้ มาแสดงด้านล่าง รวมถึงแสดงในข้อความ เมื่อมีการกดปุ่ม Done นั่นเองครับ

ในส่วนของปุ่ม Clear ก็เป็นการล้างข้อมูลที่เราพิมพ์ไว้ทั้งหมด และข้อมูลที่แสดงในส่วนของ Result ด้วยนะ

และเมื่อเราลองกดปุ่ม Done ในขณะที่ EditText ยังไม่มีข้อมูลอะไรเลย ตัวแอปก็จะขึ้นเตือนให้เราใส่ข้อมูลลงไปก่อนครับ

จบแล้วสำหรับ [Lesson 3] ความสัมพันธ์ของ Layout และโค้ด Java ในการเขียน Android ถ้าทำไม่ได้จริงๆ ลองดาวน์โหลดโค้ดไปศึกษาดูได้ และใบบทเรียนนี้ อาจจะมีเนื้อหาบางส่วนที่อาจจะต้องใช้เวลาในการทำความเข้าใจสักพักนึง ใครไม่เข้าใจ อ่านไม่รู้เรื่อง หรือมีข้อสงสัยสามารถคอมเม้นท์ด้านล่างได้เลยครับผม ส่วนบทต่อไปจะเป็นอะไรนั้นยังไม่ได้คิดไว้ และเพื่อนๆ สามารถรีเควสกันมาได้ครับ 

อัพเดท !  [Lesson 4] วิธีรันแอปพลิเคชัน Android ที่เราเขียน บนสมาร์ทโฟน แท็บเล็ต มาแล้วครับพี่น้อง