ดาวน์โหลดโปรแกรมฟรี
       
   สมัครสมาชิก   เข้าสู่ระบบ
ไทยแวร์รีวิว
 

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

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

เมื่อ :
|  ผู้เข้าชม : 38,763
เขียนโดย :
0 %E0%B8%A3%E0%B8%B5%E0%B8%A7%E0%B8%B4%E0%B8%A7+%5BLesson+3%5D+%E0%B8%84%E0%B8%A7%E0%B8%B2%E0%B8%A1%E0%B8%AA%E0%B8%B1%E0%B8%A1%E0%B8%9E%E0%B8%B1%E0%B8%99%E0%B8%98%E0%B9%8C%E0%B8%82%E0%B8%AD%E0%B8%87+Layout+%E0%B9%81%E0%B8%A5%E0%B8%B0%E0%B9%82%E0%B8%84%E0%B9%89%E0%B8%94+Java+%E0%B9%83%E0%B8%99%E0%B8%81%E0%B8%B2%E0%B8%A3%E0%B9%80%E0%B8%82%E0%B8%B5%E0%B8%A2%E0%B8%99+Android
A- A+
แชร์หน้าเว็บนี้ :

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

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

บทความเกี่ยวกับ เขียน Android อื่นๆ

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


Android_Lesson 3_01

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

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

Android_Lesson 3_02

สำหรับบทเรียนที่ 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 --> ปุ่มทั่วไปนั่นเอง

Android_Lesson 3_03

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

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

ดาวน์โหลด โค้ด activity_main.xml

หมายเหตุ 

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

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

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

Android_Lesson 3_04

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

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

Android_Lesson 3_05

ไฟล์ strings.xml

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

ดาวน์โหลด โค้ด strings.xml


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

Android_Lesson 3_06

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

Android_Lesson 3_07

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

Android_Lesson 3_08

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

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

Android_Lesson 3_09

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

Android_Lesson 3_10

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

Android_Lesson 3_11

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

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

Android_Lesson 3_12

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

ดาวน์โหลด โค้ด MainActivity.java


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

Android_Lesson 3_13

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

Android_Lesson 3_14

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

Android_Lesson 3_15

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

Android_Lesson 3_16

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

Android_Lesson 3_17

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

Android_Lesson 3_18

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


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

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


 
0 %E0%B8%A3%E0%B8%B5%E0%B8%A7%E0%B8%B4%E0%B8%A7+%5BLesson+3%5D+%E0%B8%84%E0%B8%A7%E0%B8%B2%E0%B8%A1%E0%B8%AA%E0%B8%B1%E0%B8%A1%E0%B8%9E%E0%B8%B1%E0%B8%99%E0%B8%98%E0%B9%8C%E0%B8%82%E0%B8%AD%E0%B8%87+Layout+%E0%B9%81%E0%B8%A5%E0%B8%B0%E0%B9%82%E0%B8%84%E0%B9%89%E0%B8%94+Java+%E0%B9%83%E0%B8%99%E0%B8%81%E0%B8%B2%E0%B8%A3%E0%B9%80%E0%B8%82%E0%B8%B5%E0%B8%A2%E0%B8%99+Android
แชร์หน้าเว็บนี้ :
Keyword คำสำคัญ »
 
 
 

รีวิวที่เกี่ยวข้อง

 


 

แสดงความคิดเห็น

ความคิดเห็นที่ 9
1 กรกฎาคม 2558 16:14:29 (IP 58.8.148.xxx)
GUEST
Comment Bubble Triangle
pk
เยี่ยมเลยครับ..เป็นประโยชน์มากๆ
 
ความคิดเห็นที่ 8
20 เมษายน 2558 12:59:28 (IP 122.154.246.xxx)
GUEST
Comment Bubble Triangle
chai
ขอบคุณครับ
 
ความคิดเห็นที่ 7
21 ธันวาคม 2557 14:36:01 (IP 49.0.97.xxx)
GUEST
Comment Bubble Triangle
chaimedal
ขอบคุณครับ กำลังทำโปรเจคเลย
 
ความคิดเห็นที่ 6
29 พฤษภาคม 2557 13:19:10 (IP 182.53.248.xxx)
GUEST
Comment Bubble Triangle
Jen
ขอบคุณมากครับ กำลังศึกษามีประโชน์มากเลยครับ กำลังเริ่มหัดเขียนครับ
 
ความคิดเห็นที่ 5
16 มกราคม 2557 12:08:28 (IP 110.77.182.xxx)
Profile Pictureสมาชิก : Member
Comment Bubble Triangle
สวัสดีทุกท่านครับ ก่อนอื่นต้องขอขอบคุณสำหรับทุกคอมเม้นท์นะ

สำหรับตอนแรก ผมว่าจะสอนวิธีเขียน 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 (IP 171.99.170.xxx)
GUEST
Comment Bubble Triangle
abc
ถ้าอยากสร้างappแบบsocial networkต้องทำยังไงหรอ
 
ความคิดเห็นที่ 3
8 พฤศจิกายน 2556 00:36:06 (IP 202.12.74.xxx)
GUEST
Comment Bubble Triangle
ARE WIN
ได้ความรู้มากเลยครับผม แล้วถ้าเอาโปรแกรมที่เราสร้างเสร็จแล้วไปรันบนสมาร์โฟน ต้องทำยังไงบ้างอ่ะคับ
 
ความคิดเห็นที่ 2
5 ตุลาคม 2556 14:37:49 (IP 58.8.85.xxx)
GUEST
Comment Bubble Triangle
MMM
ช่วยสอนเกี่ยวกับการดึงข้อมูลจากอินเตอเน็ตด้วยนะคะ ขอบคุนค่ะ :D
 
ความคิดเห็นที่ 1
2 ตุลาคม 2556 14:11:17 (IP 180.183.131.xxx)
GUEST
Comment Bubble Triangle
Mr_T_bag
ขอบคุณมากมายครับ
รอๆ Lesson4 ได้ความรู้มาก ผมมือใหม่เพิ่งหัดเขียนครับ อ่านแล้วเข้าใจง่าย
อยากได้แบบเชื่อกับฐานข้อมูลบ้างอ่ะครับ
ว่างๆรบกวน ช่วยรีวิว จะเป็นพระคุณอย่างยิ่ง :D
26 กุมภาพันธ์ 2559 17:11:26 (IP 183.182.110.xxx)
GUEST
Comment Bubble Triangle
็รูบจั้ง
อยากได้วิทีการทำ intent between 1 form to another form นะช่วย post ตัวอย่างให้แน่
ขอบคุฌมากนะ