Home / Developer  / Newbie  / Beginning  / เขียนแอพ iPhone ด้วย Swift การ Push เปลี่ยนหน้า NavigationView

เขียนแอพ iPhone ด้วย Swift การ Push เปลี่ยนหน้า NavigationView

วิธีการพัฒนาแอพพลิเคชันด้วยภาษา Swift บน iOS8 กับการใช้คำสั่ง Push Action ให้เปลี่ยนหน้า View หลังจากแตะที่ Cell บน UITableView อย่างง่ายผ่าน NavigationViewตัวอย่างเดียวหากินอีกแล้ว กับภาษา Swift ซึ่งในรอบนี้ก็ยังคงขอแนะนำให้ศึกษาบทความก่อนหน้านี่ก่อนเหมือนเดิมเพื่อความเข้าใจ

รอบนี้จะใช้ ตัวอย่าง จากบทความ

มาใช้ประกอบการพัฒนาแอพพลิเคชัน เริ่มต้นให้ลอง เปิดไฟล์ ViewController.swift ขึ้นมา เรามาเพิ่มรูปภาพ และ คำอธิบายของ Cell ในแต่ละแถวให้น่าสนใจกว่าเดิมก่อนดีกว่าโดยการเพิ่มตัวแปร Array ขึ้นมาครับ

แก้ไข Code กันเล็กน้อยหน่อยตามนี้

เปลี่ยนการวนลูปตารางให้วนตามจำนวน Array

และแสดงผลตามนี้

ให้ไปที่ MainStoryBoard ครับ แล้วทำการ Embedded Navigation Controller ตามรูปเลย

Screen Shot 2557-06-25 at 12.10.23 PM

เพิ่ม File ใหม่เป็น Swift File ลงไปตามรูป

Screen Shot 2557-06-25 at 2.19.00 PM

ตั้งชื่อว่า DetailViewController.swift

Screen Shot 2557-06-25 at 12.21.45 PM

เมื่อสร้างเสร็จแล้วให้ ลาก ViewController ใหม่มาวางไว้ข้างๆ ตั้งชื่อ StoryBoard ID ว่า DetailViewController ครับ ทำการ add Class และตั้งชื่อมันตามรูปข้างล่าง

Screen Shot 2557-06-25 at 4.43.39 PM

ตกแต่งหน้า DetailViewController ใหม่เล็กน้อย

Screen Shot 2557-06-25 at 12.39.51 PM

เอาภาพมาใส่ให้ดูน่าสนใจ

Screen Shot 2557-06-25 at 2.19.13 PM

แก้ไข Code หน้า DetailViewController.swift ใหม่ ในส่วนของ init() ให้ลบตัวเก่า คือ

แก้ไขให้แทนที่ด้วย

เหตุผล คือลดการ Crash ของแอพพลิเคชันเวลาเกิดการเปลี่ยนหน้า View ครับ

กลับไปที่ ViewController.swift ส่วนของตัวอย่างเก่าของเรา ใน function ที่ชื่อ didSelectRowAtIndexPath คือ

ให้แก้ไขเป็น

อธิบาย: secondViewController คือตัวแปรใหม่ที่เราสร้างขึ้นมาผ่าน StoryBoard ครับ โดยใช้ iD ของ StoryBoard ที่เราตั้งไว้คือชือ “DetailViewController” เป็นตัวอ้างถึง เมื่อมีการเปลี่ยนหน้าให้ Title Bar ของหน้า Detail แสดงข้อมูล Title Array ของแถวที่ส่งไป ส่วนการเปลี่ยน หน้า View เราจะใช้ Push คือ Slide เลื่อนไปทางซ้ายด้วยคำสั่ง

หากต้องการเปลี่ยนหน้าแบบ Modal PresentView ก็สามารถใช้คำสั่งนี้ได้ครับ

ตรวจสอบคำสั่งทั้งหมด ตามนี้

ทดสอบ Run ตัวแอพพลิเคชันของเราสักหน่อยครับ แล้วลองแตะเพื่อเปลี่ยนหน้าดู

แตะที่แถว

แตะที่แถว

เปลี่ยนหน้า ดู title

เปลี่ยนหน้า ดู title

ภาพรวมการเคลื่อนไหว

cover

ดาวน์โหลด Source Code เปิดด้วย XCode6 BETA นะครับ: http://www.daydev.com/download/UITableViewSwift.zip

Comments

daydevthailand@gmail.com

<p>อาจารย์ประจำสาขาวิชาการออกแบบเชิงโต้ตอบ และการพัฒนาเกม วิทยาลัยครีเอทีฟดีไซน์ & เอ็นเตอร์เทนเมนต์เทคโนโลยี มหาวิทยาลัยธุรกิจบัณฑิตย์<br /> ,ผู้ก่อตั้ง บริษัท Daydev Co., Ltd, (เดย์เดฟ จำกัด)</p>

Review overview
%d bloggers like this: