1 การทางานกบสวนแสดงผลตงแต 2 รายการขนไป (Multiple Activity)

สาราญ วานนท | คอมพวเตอรธรกจ

แผนการสอนหนวยท 6

การทางานกบสวนแสดงผลตงแต 2 รายการขนไป (Multiple Activity)

แนวคด

1. พฒนาแอพพลเคชนทมสวนตดตอกบผใชงานหลายสวนแสดงผล

2. รจกการผกเหตการณเขากบสวนแสดงผลตงแต 2 รายการขนไปเขาใจสวนทจะตองกาหนดโคดในรปแบบของภาษา JAVA

3. เขาใจหลกการเขยนเหตการณ รปแบบ คลาส อลเมนต (Object) การสงผานคาไปใหยงเหตการณ (Method)

วตถประสงค

เมอศกษาหนวยท 6 จบแลวนกศกษาสามารถ

1. อธบายไดวาในการผกเหตการณเขากบสวนแสดงผลเขาใจสวนทจะตองกาหนดโคดในรปแบบของภาษา JAVA เขาใจการทางานรวมกนระหวาง activity หลาย ๆ ตว

2. อธบายหลกการเขยนเหตการณ รปแบบ คลาส อลเมนต (Object) การสงผานคาไปใหยงเหตการณ (Method)

3. สามารถรนแอพพลเคชนทไดพฒนาแลวผานทางอมเลเตอรไดอยางไมมปญหา รจกวธการดขอผดพลาดจาก Log ทแสดง

กจกรรมการเรยน

1. อานแผนการสอนประจาหนวยท 6

2. ศกษาเนอหาและฝกปฏบตตาม

3. ศกษาเพมเตมจากเอกสารอนหรอสอเสรมออนไลน (ถาม)

4. ทากจกรรมใบงานทกาหนดไวในเอกสารคาสอน

2 1089018 การเขยนโปรแกรมบนอปกรณเคลอนท

สาราญ วานนท | คอมพวเตอรธรกจ

หนวยท 6

การทางานกบสวนแสดงผลตงแต 2 รายการขนไป (Multiple Activity)

1. สรางสวนแสดงผล 2 Activity

สาหรบแอนดรอยดแอพพลเคชนในทางปฏบตแลว ยอมมสวนแสดงผลมากกวา 1 หนาจอเพอทจะแสดงผลตามความตองการ โดยการเชอมโยงระหวางหนาจอจะอยในความรบผดชอบของคลาส Intent เพอเปนการเรยนรในหนวยนใหนกพฒนาสรางโปรเจคขนมาใหชอวา Multiple Activity จากนนเราจะสราง Activity เพมจากทเครองมอสรางขนมาให

1.1 สรางโปรเจค Multiple Activity

รปท 6.1 New Project Multiple Activity

1.2 Main Activity เครองมอจะสราง main activity มาใหเปนคาเรมตนโดยจะประกอบไปดวยสวนทเปนสวนแสดงผลหรอตดตอกบผใชงาน 1 หนาจอและสวนทใชสาหรบเขยนโคดเพอควบคมการทางาน 1 ไฟล

3 การทางานกบสวนแสดงผลตงแต 2 รายการขนไป (Multiple Activity)

สาราญ วานนท | คอมพวเตอรธรกจ

รปท 6.2 Main Activity

1.3 Project Structure

รปท 6.3 Project Structure

4 1089018 การเขยนโปรแกรมบนอปกรณเคลอนท

สาราญ วานนท | คอมพวเตอรธรกจ

1.4 Design Layout ออกแบบในสวนทเปนสวนแสดงผลหลก (Main Activity) โดยจะประกอบไปดวยอลเมนต ขอความ (Text View) สาหรบแสดงขอความบอกวาเปนสวนแสดงผลทเทาไร และปม (Button) สาหรบเรยกสวนแสดงผลไปยงสวนแสดงผลตวอน ๆ ในหนวยนกคอสวนแสดงผลท 2 (ทนกพฒนาจะสรางขนมาอกแอคทวต)

รปท 6.4 Design main activity

รปท 6.5 กาหนดคาให Main activity

ใหกาหนด ID กบอลเมนตตามรปท 6.5 เพอใหเปนแนวทางเดยวกนในการเรยนร

5 การทางานกบสวนแสดงผลตงแต 2 รายการขนไป (Multiple Activity)

สาราญ วานนท | คอมพวเตอรธรกจ

1.5 สรางสวนแสดงผลท 2 (Activity 2) ใหสรางสวนแสดงผลเพมเตมจากเดมทมแค Main activity โดยมขนตอนดงน

• ทาการเลอก folder app > res > layout ตามโครงสรางของโปรเจคจากนนใหคลกขวาเพอเลอกเมน New > Activity > Blank Activity

รปท 6.6 New Activity 2

• กาหนดคาตาง ๆ ใหกบ Activity 2

รปท 6.7 กาหนดคา Activity 2

6 1089018 การเขยนโปรแกรมบนอปกรณเคลอนท

สาราญ วานนท | คอมพวเตอรธรกจ

แลวคลกปม Finish

• Design Layout ใหกบ Activity 2

รปท 6.8 Design activity 2

รปท 6.9 กาหนดคาให activity 2

7 การทางานกบสวนแสดงผลตงแต 2 รายการขนไป (Multiple Activity)

สาราญ วานนท | คอมพวเตอรธรกจ

1.6 บอกใหโปรเจครบรวาม Activity 2

โดยการกาหนดคาใหโปรเจครบรวามการเพม activity เขาใหม จะเพมทไฟล AndroidManifest.xml

รปท 6.10 AndroidManifest.xml

ใหนกพฒนาเปดขนมาดและสงเกตวาเครองมอจะมการเพมสวนนใหแลวหากไมเพมสวนนกสามารถเพมเตมเขาไปได

1.7 เขยนโคด Java เชอมโยงการทางานระหวาง 2 Activity

เขยนโคดเปลยนหนาแสดงผลสลบไปมาระหวาง 2 สวนแสดงผลในตวอยางจะเปนการเขยนโคดทเหตการณ onClick ของปม

• เขยนโคดท MainActivity.java

รปท 6.11 MainActivity.java

8 1089018 การเขยนโปรแกรมบนอปกรณเคลอนท

สาราญ วานนท | คอมพวเตอรธรกจ

• เขยนโคดท Main2Activity.java

รปท 6.12 Main2Activity.java

โ ค ด ท เ ข ย น ใ น MainActivity.java น น จ ะ เ ป น ก า ร บ อ ก ใ ห เ ห ต ก า ร ณ onClick ข อ ง ป ม btShowActivity2 ใหทาการสรางตวแปร it ทเปนตวแทนคลาส Intent ใหทาหนาทเปดหนาจอแสดงผลท 2 จากนนสงใหออบเจกต it ทางานโดยสง startActivity( )

โคดทเขยนใน Main2Activity.java เปนการบอกใหเหตการณ onClick ของปม btShowActivity1 ทาการเปดหนาจอแสดงผลท 1 กลบมาดวยคาสง finish( )

รปท 6.13 ผลการรนแอพพลเคชน

9 การทางานกบสวนแสดงผลตงแต 2 รายการขนไป (Multiple Activity)

สาราญ วานนท | คอมพวเตอรธรกจ

2. การรบ – สง ขอมลระหวางสวนแสดงผล

การเขยนแอพพลเคชนทมสวนแสดงผลตงแต 2 Activity นนยอมมการรบสงขอมลระหวางกนเพอทจะนาขอมลนนไปใชงานตอไป ดงนนเราจะทาการปรบแตงแอพพลเคชนจากขอท 1 ใหสามารถรบสงขอมลกนไดโดยให MainActivity เปนหนาสาหรบสงขอมลและให Main2Activity เปนหนาสาหรบรบขอมลทสงมา

2.1 เพมอลเมนต ใน MainActivity โดยเพม EditText เขามา 2 ตวสาหรบปอนชอกบทอย

รปท 6.14 Main Activity Sender

กาหนด id ใหกบชองสาหรบปอนชอเปน edName ชองสาหรบปอนทอยเปน edAddress มชนดของ object เปน EditText ออกแบบสวนตดตอผใชงานตามรปท 6.14

2.2 เพมอลเมนต ใน Main2Activity โดยเพม EditText เขามา 2 ตวสาหรบรบชอกบทอยทจะสงมาจาก MainActivity กาหนด id ใหกบชองสาหรบรบชอเปน edName ชองสาหรบรบทอยเปน edAddress มชนดของ object เปน EditText ออกแบบสวนตดตอผใชงานตามรปท 6.15

10 1089018 การเขยนโปรแกรมบนอปกรณเคลอนท

สาราญ วานนท | คอมพวเตอรธรกจ

รปท 6.15 Main 2 Activity Receiver

2.3 เขยนโคด Java ควบคมการทางานท MainActivity.java

รปท 6.16 Main Activity Java Code

11 การทางานกบสวนแสดงผลตงแต 2 รายการขนไป (Multiple Activity)

สาราญ วานนท | คอมพวเตอรธรกจ

ประกาศตวแปรขนมาสองตวคอ ed_Name กบ ed_Address มชนดขอมลเปน EditText เพอเปนตวแทนชองทปอนชอและทอยตามลาดบเปนตวแปรคลาส อางองไปยงหนาออกแบบ UI ทชอ edName, edAddress ตามลาดบ หลงจากนนใหเขยนเหตการณทปม onClick จะสงคาไปยง Main2Activity โดยเกบคาจากตวแปล ed_Name ไวท name และเกบคาจากตวแปล ed_Address ไวท address (คาสง it.putExtra)

2.4 เขยนโคด Java ควบคมการทางานท Main2Activity.java

รปท 6.17 Main 2 Activity Java Code

ประกาศตวแปลสองตวชอ edName, edAddress เพออางองไปยงหนา UI ทออกแบบมชนดขอมลเปน EditText จากนนกจะ getIntent ทสงมาและอานขอมล name, address เพอนามาแสดงยง EditText ทไดออกแบบไวผานตวแปล edName, edAddress ตามลาดบ

12 1089018 การเขยนโปรแกรมบนอปกรณเคลอนท

สาราญ วานนท | คอมพวเตอรธรกจ

2.5 ทดสอบรบแอพพลเคชน

รปท 6.18 รนทดสอบ

13 การทางานกบสวนแสดงผลตงแต 2 รายการขนไป (Multiple Activity)

สาราญ วานนท | คอมพวเตอรธรกจ

ใบงานทายหนวย

1.ใหออกแบบแอพพลเคชนสาหรบแสดงสวนตดตอหลายหนาจอ ใบงานนใหนกพฒนาออกแบบหนาจอหลกเอาไวสาหรบการลอกอนเขาระบบ หลงจากคลกปมลอกอนเรยบรอยแลวใหสงขอมลจากหนาลอกอนไปแสดงยงอกหนาจอ login success

หนาจอ Login

หนาจอ LoginSuccess

14 1089018 การเขยนโปรแกรมบนอปกรณเคลอนท

สาราญ วานนท | คอมพวเตอรธรกจ

เอกสารอางอง

พรอมเลศ หลอวจตร. (2558). คมอการเขยนแอพ Android ดวย Android Studio. โปรวชน : กรงเทพฯ. จกรชย โสอนทร, พงษศธร จนทรยอย, และณฐณชา วระมงคลเลศ. (2555). Android App

Development ฉบบสมบรณ. ไอดซ พรเมยร : นนทบร. จกรชย โสอนทร, พงษศธร จนทรยอย, และณฐณชา วระมงคลเลศ. (2555). Android App

Development อยางมออาชพ. ไอดซ พรเมยร : นนทบร. “Event Listeners”. (2558). [ระบบออนไลน]. แหลงทมา

http://developer.android.com/guide/topics/ui/ui-events.html#EventListeners. (2 ตลาคม 2558)