[Android Dev] ทำ Apps หลายๆ หน้าด้วย Intent

ก็อย่างที่หัวข้อบอกไปนะครับ
เราจะทำ Apps ที่มีหลาย "หน้าแสดงผล" กัน
ขั้นแรกก็คือ สร้าง Interface ใหม่ขึ้นมาก่อน โดยทำแบบนี้ครับ

****Activity , View ให้เข้าใจตรงกันว่า มันคือ "หน้าจอการแสดงผล"

คลิกขวาที่ Folder res/layout จากนั้นเลือก new -> other
จะเจอหน้าต่างแบบนี้ให้เลือกที่ Android XML File นะครับ




จากนั้นก็สร้างไฟล์ ตั้งชื่อ [ต้องเป็นอักษรตัวเล็กทั้งหมด เท่านั้น] เลือกเป็น Layout
แล้วด้านล่างยังสามารถเลือก Layout ตั้งต้นได้ด้วย โดย Default คือ LinearLayout ครับ


และแน่นอนเมื่อมี XML File สำหรับ Interface แล้วก็ต้องมี Class ที่จะหน้าที่ควบคุม View นั้นๆ ด้วย
ใน /src ให้เราคลิกขวาที่ Package เลือก New -> Class แล้วสร้างมันขึ้นมา ชื่ออะไรก็ได้ ...


เมื่อสร้างเสร็จเราก็จะได้ Project ที่มีลักษณะแบบนี้ ~



ต่อไปอีกที่นึงที่ต้องเพิ่ม เราต้องไปเพิ่ม Activity
ใน File AndroidManifest.xml เลือกไปที่แถบ Application แล้วเลื่อนลงมาด้านล่างสุด


ในส่วนของ Application Nodes ให้กดที่ Add... แล้วเลือก Activity กด ok
เราจะได้ Activity ว่างๆ มาอันนึง เลือกไปที่นั่นจะขึ้น เมนู ทางด้านขวา ให้ใส่ตามนี้
          - Name :: ให้ใส่ . (dot) แล้วตามด้วยชื่อ Class ที่เราสร้างขึ้น
          - Label :: ให้กดที่ Browse... แล้วเลือก string/app_name

อ่ะครับ จากนั้นเราจะมาเริ่มเขียนโปรแกรมกันแล้ว ~ (ยุ่งยากดีมั้ย ?)
ในส่วนของ User Interface นะครับ ไม่มีอะไรนอกจาก TextView และ Button เหมือนกันทั้ง 2 View เลยนะ


ส่วนของ Coding จะแบ่งเป็น 2 ส่วนนะครับ
คือ   Code ของ View แรก [ตัวอย่างของผมชื่อ SampleIntent.java]
และ  Code ของ View ที่สอง [ตัวอย่างของผมชื่อ SecondView.java]

มาเริ่มกันที่ SampleIntent.java ก่อนนะครับ
เริ่มจากการ Import สิ่งที่ต้องใช้เข้ามาก่อน

จากนั้นก็ประกาศตัวแปร ในที่นี้คือ ปุ่ม และ Intent
เขียน Constructor ให้ Intent ด้วย ซึ่งรับ Argument เป็น (context,หน้าที่จะไป.class)
    **"หน้าที่จะไป" เนี่ยให้เอาชื่อของ Class ที่เราสร้างมานะครับ

จากนั้นก็ Override Method ของ OnClickListener เพื่อรับการกระทำจากปุ่ม
เมื่อกดปุ่มแล้ว ก็เรียกใช้คำสั่ง startActivity(ตัวแปร Intent ของเรา)
เพื่อทำการเรียก Activity ที่เรากำหนดไว้ใน Constructor

ต่อไปก็ในส่วนของ SecondView.java นะครับ
ในตอนแรกที่สร้าง Class นั้นเราจะได้ Class ว่างๆ ขึ้นมา (ซึ่งมันไม่มีอะไรเลย)
ขั้นแรกให้ใส่ extends Activity ก่อน


จากนั้นให้เราพิมพ์ onCreate แล้วมันจะ auto-complete เพื่อให้เรา override method onCreate ได้
(จขบ. ใช้ Eclipse นะครับ) เราก็จะได้ method นี้มา


จากนั้นให้เรา setContentView เพื่อจะระบุว่า "Class นี้ควบคุม XML ไฟล์ไหน" (เขียนต่อจากด้านบนเลย)

จากนั้นก็ Step เดิมเลยครับ
เริ่มจากประกาศตัวแปรปุ่ม (กดแล้วย้อนกลับไปหน้าแรก)

เขียน Link กับปุ่มใน XML File แล้วก็กำหนด Constructor ของ Intent เพื่อระบุ View ที่จะกลับไป


จากนั้นก็ Override method OnClickListener เพื่อรับการกระทำจากปุ่ม
โดยเมื่อกดปุ่ม ก็ไม่ต้องทำอะไรนอกจาก finish() เพื่อกลับไปหน้าเริ่มต้นที่เรา startActivity() เข้ามา


จบแล้วครับผม ~ ลองนำไปประยุกต์ใช้กันดูนะครับ
ครั้งนี้แค่เปลี่ยนหน้า ธรรมด๊าา.... ธรรมดานะ Blog หน้าผมจะเขียนให้มันมีการส่งค่าระหว่าง View ด้วย
โดยใช้คำสั่ง put....Extras() ซึ่งต้องเกริ่นเท่านี้ก่อน...
Blog หน้าคงจะลง Coding อย่างเดียว Interface เหมือนเดิม

** ผมแอบสงสัยว่า Activity นี่ทำงานเป็น stack หรือปล่าว (คล้าย NavigationController บน iOS)
     นั่นคือ เมื่อเรา startActivity() มันก็จะทำการ Push View ทับไป และเมื่อ finish() มันก็ Pop ออก

** เพิ่มเติมนิดนึง Activity เนี่ย ถ้าเปรียบกับ iOS แล้วมันคือ View หรือหน้าจอการแสดงผลนั่นเอง
     ส่วน Intent ก็จะเปรียบได้กับ UINavigationController ซึ่งเป็นตัวควบคุม Activity ต่างๆ ด้วยกัน
     ไม่ว่าจะเป็น Link หน้านี้ไปอีกหน้านึง หรือ ส่งข้อมูลจากหน้านี้ไปอีกหน้านึง ...

ขอบคุณ @beebabong ที่ให้โค้ดเริ่มต้นมาศึกษา
ขอบคุณ @bluefrog_su ที่ช่วยตอบคำถามเรื่องที่สงสัย
ขอบคุณ @พี่เป้ ที่ช่วยให้คำตอบเรื่อง Activity และ Intent
ขอบคุณ @zilchrhythm ที่มา Comment ตอบข้อสงสัย :P

Popular posts from this blog

12 วิธี การบริการและดูแลลูกค้าในร้าน Starbucks

[Android Dev] การติดตั้ง Eclipse+AndroidSDK เพื่อพัฒนาโปรแกรมบน Android

5 TED Talk ที่จะช่วยให้คุณทำงานดีขึ้น