Home / Technology  / Mobile Technology  / Article for Mobile  / iOS Developer บทที่ 12 ลูกเล่น Segue บน Storyboard แบบไม่ต้อง Code

iOS Developer บทที่ 12 ลูกเล่น Segue บน Storyboard แบบไม่ต้อง Code

หน้าจอมีการ Flip แนวนอน เวลาเปลี่ยนหน้าครับ

ศึกษาลูกเล่นเพิ่มเติมของตัว Segue (Seg-Way) สำหรับการพัฒนา iOS Developer เพื่อการเขียนแอพพลิเคชันบน iPhone ผ่าน Storyboard ให้มีไอเดียที่น่าสนใจ และน่าใช้จากบทเรียนก่อนหน้าจะเข้าขั้น Advance ผมเคยนำเสนอการพัฒนาแอพพลิเคชันอย่างง่ายบน MainStoryboard ที่เป็นรูปแบบ Master Detail Application หรือ Single View Application ไปบ้างแล้ว ในรอบนี้จะพาไปศึกษาลูกเล่นเล็กน้อยก่อนจะเข้าสู่เรื่องปวดหัวอย่างหนักอย่าง Core Data ของตัว iOS Developer

ศึกษาลูกเล่นบน Storyboard ให้เข้าใจ

จากตัวอย่างก่อนหน้านี้ผม แค่แนะนำวิธีการส่ง Parameter และ Event ผ่าน Segue จากหน้าจอของแอพพลิเคชันหน้าหนึ่งไปยังอีกหน้าหนึ่ง ซึ่งมีทั้งการลาก Segue มาวาง หรือ ใช้ Navigation Bar บน MainStoryboard ให้ดึง และส่งค่า Attribute ไปยังอีกหน้าจอ ด้วย Button ธรรมดา หรือ UITableViewCell อันที่จริงแล้ว Movement และ Event นั้นมีลูกเล่นมากกว่านั้นเยอะครับ มาลองดูกันหน่อยดีกว่า

สร้าง New Project ขึ้นมาเป็น Single View Application แล้วเลือก Use Storyboard ด้วยนะครับ

สร้าง Single View Application ขึ้นมาเลือก Use Storyboard

สร้าง Single View Application ขึ้นมาเลือก Use Storyboard

ไปที่เมนู แล้วทำการ เลือกเมนู Editor -> Embed In และใช้ Navigation Controllers เข้าไปในหน้า MainStoryboard เลยครับ

ทำการเพิ่ม Navigation Controller ลงไปใน MainStoryboard

ทำการเพิ่ม Navigation Controller ลงไปใน MainStoryboard

สร้าง Navigation Controller

สร้าง Navigation Controller

ทำการเลือก UI Control อย่างเจ้า Bar Button Item ไปวางใน Tab bar ของแอพพลิเคชันของเราครับ

ลากตัว Bar Button Item ไปวางในหน้า View

ลากตัว Bar Button Item ไปวางในหน้า View

วางให้เป็นรูปแบบดังนี้

วางให้เป็นรูปแบบดังนี้

สร้าง View Controller ตัวใหม่ขึ้นมา ลากไปวางไว้ แล้วทำการเชื่อมหน้าของแอพพลิเคชันโดยการกดปุ่ม Control ค้างไว้คลิกที่ปุ่ม Bar Button Item แล้วลากไปวางที่หน้าView Controller ตัวใหม่

ลาก ViewController ตัวใหม่ลงไป

ลาก ViewController ตัวใหม่ลงไป

กด Control ค้างไว้ที่ Bar Button Item แล้วลากไปวางหน้า View Controller ใหม่

กด Control ค้างไว้ที่ Bar Button Item แล้วลากไปวางหน้า View Controller ใหม่

จากเมื่อก่อน เราจะเลือกเป็น Push ในรอบนี้ผมอยากจะแนะนำให้ลองเลือกเป็นแบบอื่นครับ คือ Modal ครับ

เลือกเป็น Modal ครับ

เลือกเป็น Modal ครับ

จะเห็นว่า Segue (Seg-Way) นั้นจะเป็นเสมือน ตัวเชื่อมข้อมูล ระหว่างหน้าจอหนึ่งไปอีกจอหนึ่ง จะเน้น Event ของ Action บน Segue แตกต่างกันไป

อย่างที่ผมเลือกคือ Segue เป็น modal นั้นจะได้ Action ออกมาเป็นการเลื่อนหน้าจอไปข้างบน ครับ หากว่าอยากลองเห็นผลลัพธ์ลองกด Run ตัวแอพพลิเคชันดูครับ

Action ของ Segue การเปลี่ยนหน้าจอ จะเลื่อนขึ้นไปข้างบน บังหน้าจอเดิม

Action ของ Segue การเปลี่ยนหน้าจอ จะเลื่อนขึ้นไปข้างบน บังหน้าจอเดิม

คราวนี้ถ้าเราลองไปคลิกที่ Segue ดูครับ เราจะสามารถตั้งค่าเพิ่มเติมเกี่ยวกับตัวของมันเองได้ ซึ่งต้องไปปรับที่ Storyboard Segue ที่เมนู Navigation ด้านขวาครับ ในตัวอย่างผมได้เลือกแบบ “Flip Horizontal” ไปครับ

คลิกที่ Segue ครับ

คลิกที่ Segue ครับ

เลือกแบบ Flip Horizontal ไป

เลือกแบบ Flip Horizontal ไป

ลองทำการ “Run” ตัวแอพพลิเคชันดูครับ ว่าผลลัพธ์มันเปลี่ยนแปลงไปแค่ไหน ถ้าหากว่าอยากเห็นว่า Action ของ Segue นั้นมีกี่รูปแบบก็ลองเลือกเล่นกันดูให้หลากหลายเลยนะครับ

หน้าจอมีการ Flip แนวนอน เวลาเปลี่ยนหน้าครับ

หน้าจอมีการ Flip แนวนอน เวลาเปลี่ยนหน้าครับ

เช่นกันครับ ถ้าหากว่าเราเปลี่ยนรูปแบบของ Segue ได้ คราวนี้เราก็จะได้ แอนิเมชันของแอพพลิเคชันของเราให้น่าสนใจ และบางครั้งเรื่องเล็กน้อยๆ พวกนี้มันเป็นสิ่งที่ทำให้ผู้ใช้งานแอพพลิเคชันของเรา รู้สึกอยากใช้ เข้าทฤษฏีการออกแบบ User Interface for User Experience เลยล่ะครับ

กำลัง เขียนเรื่อง Core Data และ JSON (Web Service) อยู่ 4 บทความพร้อมทำ แอพพลิเคชัน Case Studyให้ดาวน์โหลด และเกมอีก 2 เกมตอนนี้ ไว้ เคลียร์งานหนักๆ หลังปีใหม่เสร็จจะกลับมาอัพเด็ตกันนะครับ

บทความที่เกี่ยวข้อง

Comments

daydevthailand@gmail.com

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

Review overview
NO COMMENTS

POST A COMMENT