![Page 1: 6 ˘ ˇ ˘ 2 ˙˝ˇ˛˚ (Multiple Act ivity)€¦ · 06/08/2015 · 2 ˘ ˇˆ (Multiple Activity) 3 | 3ˆ01 6.2 Main Activity 1.3 Project Structure 3ˆ01 6.3 Project Structure](https://reader034.vdocument.in/reader034/viewer/2022042204/5ea591c11f5ee549202d2651/html5/thumbnails/1.jpg)
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. ทากจกรรมใบงานทกาหนดไวในเอกสารคาสอน
![Page 2: 6 ˘ ˇ ˘ 2 ˙˝ˇ˛˚ (Multiple Act ivity)€¦ · 06/08/2015 · 2 ˘ ˇˆ (Multiple Activity) 3 | 3ˆ01 6.2 Main Activity 1.3 Project Structure 3ˆ01 6.3 Project Structure](https://reader034.vdocument.in/reader034/viewer/2022042204/5ea591c11f5ee549202d2651/html5/thumbnails/2.jpg)
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 ไฟล
![Page 3: 6 ˘ ˇ ˘ 2 ˙˝ˇ˛˚ (Multiple Act ivity)€¦ · 06/08/2015 · 2 ˘ ˇˆ (Multiple Activity) 3 | 3ˆ01 6.2 Main Activity 1.3 Project Structure 3ˆ01 6.3 Project Structure](https://reader034.vdocument.in/reader034/viewer/2022042204/5ea591c11f5ee549202d2651/html5/thumbnails/3.jpg)
3 การทางานกบสวนแสดงผลตงแต 2 รายการขนไป (Multiple Activity)
สาราญ วานนท | คอมพวเตอรธรกจ
รปท 6.2 Main Activity
1.3 Project Structure
รปท 6.3 Project Structure
![Page 4: 6 ˘ ˇ ˘ 2 ˙˝ˇ˛˚ (Multiple Act ivity)€¦ · 06/08/2015 · 2 ˘ ˇˆ (Multiple Activity) 3 | 3ˆ01 6.2 Main Activity 1.3 Project Structure 3ˆ01 6.3 Project Structure](https://reader034.vdocument.in/reader034/viewer/2022042204/5ea591c11f5ee549202d2651/html5/thumbnails/4.jpg)
4 1089018 การเขยนโปรแกรมบนอปกรณเคลอนท
สาราญ วานนท | คอมพวเตอรธรกจ
1.4 Design Layout ออกแบบในสวนทเปนสวนแสดงผลหลก (Main Activity) โดยจะประกอบไปดวยอลเมนต ขอความ (Text View) สาหรบแสดงขอความบอกวาเปนสวนแสดงผลทเทาไร และปม (Button) สาหรบเรยกสวนแสดงผลไปยงสวนแสดงผลตวอน ๆ ในหนวยนกคอสวนแสดงผลท 2 (ทนกพฒนาจะสรางขนมาอกแอคทวต)
รปท 6.4 Design main activity
รปท 6.5 กาหนดคาให Main activity
ใหกาหนด ID กบอลเมนตตามรปท 6.5 เพอใหเปนแนวทางเดยวกนในการเรยนร
![Page 5: 6 ˘ ˇ ˘ 2 ˙˝ˇ˛˚ (Multiple Act ivity)€¦ · 06/08/2015 · 2 ˘ ˇˆ (Multiple Activity) 3 | 3ˆ01 6.2 Main Activity 1.3 Project Structure 3ˆ01 6.3 Project Structure](https://reader034.vdocument.in/reader034/viewer/2022042204/5ea591c11f5ee549202d2651/html5/thumbnails/5.jpg)
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
![Page 6: 6 ˘ ˇ ˘ 2 ˙˝ˇ˛˚ (Multiple Act ivity)€¦ · 06/08/2015 · 2 ˘ ˇˆ (Multiple Activity) 3 | 3ˆ01 6.2 Main Activity 1.3 Project Structure 3ˆ01 6.3 Project Structure](https://reader034.vdocument.in/reader034/viewer/2022042204/5ea591c11f5ee549202d2651/html5/thumbnails/6.jpg)
6 1089018 การเขยนโปรแกรมบนอปกรณเคลอนท
สาราญ วานนท | คอมพวเตอรธรกจ
แลวคลกปม Finish
• Design Layout ใหกบ Activity 2
รปท 6.8 Design activity 2
รปท 6.9 กาหนดคาให activity 2
![Page 7: 6 ˘ ˇ ˘ 2 ˙˝ˇ˛˚ (Multiple Act ivity)€¦ · 06/08/2015 · 2 ˘ ˇˆ (Multiple Activity) 3 | 3ˆ01 6.2 Main Activity 1.3 Project Structure 3ˆ01 6.3 Project Structure](https://reader034.vdocument.in/reader034/viewer/2022042204/5ea591c11f5ee549202d2651/html5/thumbnails/7.jpg)
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
![Page 8: 6 ˘ ˇ ˘ 2 ˙˝ˇ˛˚ (Multiple Act ivity)€¦ · 06/08/2015 · 2 ˘ ˇˆ (Multiple Activity) 3 | 3ˆ01 6.2 Main Activity 1.3 Project Structure 3ˆ01 6.3 Project Structure](https://reader034.vdocument.in/reader034/viewer/2022042204/5ea591c11f5ee549202d2651/html5/thumbnails/8.jpg)
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 ผลการรนแอพพลเคชน
![Page 9: 6 ˘ ˇ ˘ 2 ˙˝ˇ˛˚ (Multiple Act ivity)€¦ · 06/08/2015 · 2 ˘ ˇˆ (Multiple Activity) 3 | 3ˆ01 6.2 Main Activity 1.3 Project Structure 3ˆ01 6.3 Project Structure](https://reader034.vdocument.in/reader034/viewer/2022042204/5ea591c11f5ee549202d2651/html5/thumbnails/9.jpg)
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
![Page 10: 6 ˘ ˇ ˘ 2 ˙˝ˇ˛˚ (Multiple Act ivity)€¦ · 06/08/2015 · 2 ˘ ˇˆ (Multiple Activity) 3 | 3ˆ01 6.2 Main Activity 1.3 Project Structure 3ˆ01 6.3 Project Structure](https://reader034.vdocument.in/reader034/viewer/2022042204/5ea591c11f5ee549202d2651/html5/thumbnails/10.jpg)
10 1089018 การเขยนโปรแกรมบนอปกรณเคลอนท
สาราญ วานนท | คอมพวเตอรธรกจ
รปท 6.15 Main 2 Activity Receiver
2.3 เขยนโคด Java ควบคมการทางานท MainActivity.java
รปท 6.16 Main Activity Java Code
![Page 11: 6 ˘ ˇ ˘ 2 ˙˝ˇ˛˚ (Multiple Act ivity)€¦ · 06/08/2015 · 2 ˘ ˇˆ (Multiple Activity) 3 | 3ˆ01 6.2 Main Activity 1.3 Project Structure 3ˆ01 6.3 Project Structure](https://reader034.vdocument.in/reader034/viewer/2022042204/5ea591c11f5ee549202d2651/html5/thumbnails/11.jpg)
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 ตามลาดบ
![Page 12: 6 ˘ ˇ ˘ 2 ˙˝ˇ˛˚ (Multiple Act ivity)€¦ · 06/08/2015 · 2 ˘ ˇˆ (Multiple Activity) 3 | 3ˆ01 6.2 Main Activity 1.3 Project Structure 3ˆ01 6.3 Project Structure](https://reader034.vdocument.in/reader034/viewer/2022042204/5ea591c11f5ee549202d2651/html5/thumbnails/12.jpg)
12 1089018 การเขยนโปรแกรมบนอปกรณเคลอนท
สาราญ วานนท | คอมพวเตอรธรกจ
2.5 ทดสอบรบแอพพลเคชน
รปท 6.18 รนทดสอบ
![Page 13: 6 ˘ ˇ ˘ 2 ˙˝ˇ˛˚ (Multiple Act ivity)€¦ · 06/08/2015 · 2 ˘ ˇˆ (Multiple Activity) 3 | 3ˆ01 6.2 Main Activity 1.3 Project Structure 3ˆ01 6.3 Project Structure](https://reader034.vdocument.in/reader034/viewer/2022042204/5ea591c11f5ee549202d2651/html5/thumbnails/13.jpg)
13 การทางานกบสวนแสดงผลตงแต 2 รายการขนไป (Multiple Activity)
สาราญ วานนท | คอมพวเตอรธรกจ
ใบงานทายหนวย
1.ใหออกแบบแอพพลเคชนสาหรบแสดงสวนตดตอหลายหนาจอ ใบงานนใหนกพฒนาออกแบบหนาจอหลกเอาไวสาหรบการลอกอนเขาระบบ หลงจากคลกปมลอกอนเรยบรอยแลวใหสงขอมลจากหนาลอกอนไปแสดงยงอกหนาจอ login success
หนาจอ Login
หนาจอ LoginSuccess
![Page 14: 6 ˘ ˇ ˘ 2 ˙˝ˇ˛˚ (Multiple Act ivity)€¦ · 06/08/2015 · 2 ˘ ˇˆ (Multiple Activity) 3 | 3ˆ01 6.2 Main Activity 1.3 Project Structure 3ˆ01 6.3 Project Structure](https://reader034.vdocument.in/reader034/viewer/2022042204/5ea591c11f5ee549202d2651/html5/thumbnails/14.jpg)
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)