ห่างหายกันไปนานเหมือนกับสำหรับ บทเรียน เขียน Android โดยในบทเรียนที่ 3 นี้ เราจะมาเรียนรู้การสร้าง Layout และการเขียนโค้ดเรียกใช้ Layout โดยใน [Lesson 3] นี้มีจุดประสงค์ให้เราเข้าใจหลัก และความสัมพันธ์ระหว่าง Layout กับโค้ด Java ที่เราจะ เขียน Android นั่นเองครับ
ใครพลาดบทเรียนก่อนหน้านี้ กลับไปย้อนอ่าน เพื่อทบทวน และทำความเข้าใจกันสักนิด
เรามาเรียนรู้ต่อจากบทเรียนที่แล้วกัน โดยสิ่งที่เราต้องแก้ไขหลักๆ ได้แก่
สำหรับบทเรียนที่ 3 นี้ ผมจะยกตัวอย่างการเขียนแอปสมัครสมาชิกแบบง่ายๆ ซึ่งจะไม่มีเรื่องดาต้าเบสมาเกี่ยวข้อง เพียงแค่พิมพ์ข้อมูลลง EditText และกด Button เพื่อ Get ค่าจาก EditText มาใช้เท่านั้น และอาจจะมีลูกเล่นอื่นๆ อย่างเช่น AlertDialog หรือเทคนิคการเขียน Android อื่นๆ ปะปนไปกันบ้าง
ทิปส์ --> ก่อนอื่น ขอแนะนำว่าก่อนที่เราจะเริ่ม เขียน Android เราก็ควรจะร่างหน้าตาของแอปเราเอาไว้ก่อน ไม่ว่าจะร่างด้วยโปรแกรม หรือร่างในกระดาษ
1. แก้ไขไฟล์ "activity_main.xml"
สำหรับขั้นตอนแรกในการ เขียน Android เราควรที่จะสร้างหน้าตาแอป หรือที่เรียกว่า Layout ก่อนเลย เพราะเราจะได้รู้โครงสร้าง และการทำงานของแอปว่าต้องทำอะไร ตรงไหนก่อนนั่นเอง ว่าแล้วก็เปิด "activity_main.xml" ขึ้นมา แล้วสร้าง Layout ตามแบบที่เราดีไซน์ไว้เลย โดย Layout ที่เราจะใช้หลักๆ ได้แก่
จากภาพด้านบนจะเห็นได้ว่า LinearLayout อันนอกสุด (สีฟ้า) นั้นได้ครอบ LinearLayout อันอื่นที่เรียงกันในแนวตั้ง (สีแดง) และ Widgets ที่ชื่อ TextView กับ EditText ได้เรียงกันเป็นแนวนอนภายใน LinearLayout อีกทีนึงครับ (แรกๆ อาจจะงงกับเรื่อง Layout บ้าง แต่ถ้าทำไปเรื่อยๆ เราจะเริ่มเข้าใจเองครับ)
อยากให้เพื่อนๆ ได้ลองเขียนโค้ดด้วยตัวเองก่อนครับ ถ้าไม่ได้จริงๆ ให้ลองดาวน์โหลดโค้ดมาเปิดอ่านทำความเข้าใจดูนะ
หมายเหตุ
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 ที่เราตั้งแต่ละตัว อาทิ เช่น
การประกาศตัวแปรเพื่อเรียกใช้ Layout เสร็จ ก็จะได้คล้ายๆ กับรูปด้านบนเลย
สำหรับการประกาศตัวแปร หรือ Widget นั้นทำได้หลายวิธีครับ จะประกาศไว้ด้านนอกเมธอดเหมือนที่ผมทำ หรือว่าประกาศในเมธอดเหมือนตัวอย่างด้านบนก็ได้เหมือนกันนะ แต่การประกาศไว้ข้างในจะมีผลต่อเมื่อแอป Android ที่เราเขียนนั้นมีขนาดใหญ่ หลายร้อยบรรทัด หรือว่ามีการเชื่อมโยงกับคลาสอื่นๆ มากกว่า 1 คลาสนั่นเอง
ตัวโค้ดด้านบนเป็นการสั่งให้ Get ข้อมูลจาก EditText ที่เราพิมพ์ลงไปมาแสดงผล และถ้าไม่มีข้อความพิมพ์แล้วไปกด Done ตัวแอปก็จะเช็คให้เราพิมพ์ข้อความลงไป นอกจากนี้ยังมีปุ่ม Clear เพื่อลบข้อมูลที่พิมพ์ลงไปอีกด้วย
ในส่วนนี้จะเป็นการ 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 ที่เราเขียน บนสมาร์ทโฟน แท็บเล็ต มาแล้วครับพี่น้อง
ความคิดเห็นที่ 9
1 กรกฎาคม 2558 16:14:29
|
|||||||||||
GUEST |
pk
เยี่ยมเลยครับ..เป็นประโยชน์มากๆ
|
||||||||||
ความคิดเห็นที่ 8
20 เมษายน 2558 12:59:28
|
|||||||||||
GUEST |
chai
ขอบคุณครับ
|
||||||||||
ความคิดเห็นที่ 7
21 ธันวาคม 2557 14:36:01
|
|||||||||||
GUEST |
chaimedal
ขอบคุณครับ กำลังทำโปรเจคเลย
|
||||||||||
ความคิดเห็นที่ 6
29 พฤษภาคม 2557 13:19:10
|
|||||||||||
GUEST |
Jen
ขอบคุณมากครับ กำลังศึกษามีประโชน์มากเลยครับ กำลังเริ่มหัดเขียนครับ
|
||||||||||
ความคิดเห็นที่ 5
16 มกราคม 2557 12:08:28
|
|||||||||||
สวัสดีทุกท่านครับ ก่อนอื่นต้องขอขอบคุณสำหรับทุกคอมเม้นท์นะ
สำหรับตอนแรก ผมว่าจะสอนวิธีเขียน App อ่านข่าว ด้วยการ Feed RSS เข้ามา แต่ยังไม่เสร็จ ขั้นตอน และจำนวนโค้ดมีมากเกินไป ดังนั้นใน Lesson 4 ผมจึงสอน วิธีรัน App Android ที่เราขียนไว้ บนสมาร์ทโฟน หรือแท็บเล็ตจริงๆ เข้าไปตามอ่านกันได้ที่ http://review.thaiware.com/505-Lesson-4-How-to-run-Android-App-on-Real-Device.html |
|||||||||||
ความคิดเห็นที่ 4
27 ธันวาคม 2556 19:25:01
|
|||||||||||
GUEST |
abc
ถ้าอยากสร้างappแบบsocial networkต้องทำยังไงหรอ
|
||||||||||
ความคิดเห็นที่ 3
8 พฤศจิกายน 2556 00:36:06
|
|||||||||||
GUEST |
ARE WIN
ได้ความรู้มากเลยครับผม แล้วถ้าเอาโปรแกรมที่เราสร้างเสร็จแล้วไปรันบนสมาร์โฟน ต้องทำยังไงบ้างอ่ะคับ
|
||||||||||
ความคิดเห็นที่ 2
5 ตุลาคม 2556 14:37:49
|
|||||||||||
GUEST |
MMM
ช่วยสอนเกี่ยวกับการดึงข้อมูลจากอินเตอเน็ตด้วยนะคะ ขอบคุนค่ะ :D
|
||||||||||
ความคิดเห็นที่ 1
2 ตุลาคม 2556 14:11:17
|
|||||||||||
GUEST |
Mr_T_bag
ขอบคุณมากมายครับรอๆ Lesson4 ได้ความรู้มาก ผมมือใหม่เพิ่งหัดเขียนครับ อ่านแล้วเข้าใจง่าย อยากได้แบบเชื่อกับฐานข้อมูลบ้างอ่ะครับ ว่างๆรบกวน ช่วยรีวิว จะเป็นพระคุณอย่างยิ่ง :D
|
||||||||||