Register Register Member Login Member Login Member Login Forgot Password ??
PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone



Clound SSD Virtual Server

iOS/iPhone Navigation Controller (UINavigationController) - (iPhone, iPad)

iOS/iPhone Navigation Controller (UINavigationController) and Storyboard (iPhone, iPad) ในการเขียน Application บน iOS ซึ่งจะประกอบด้วยหลาย ๆ View หรือหลาย ๆ หน้า ซึ่งปกติแล้วเวลาเราจะสร้าง Button สำหรับควบคุมการทำงาน หรือ เปิดหน้า View ก็สามารถใช้ Object เช่น Button ควบคุมการแสดงผลของ View ต่าง ๆ ได้ แต่เมื่อ View มีจำนวนมาก หรือมี Event ที่ต่าง ๆ ที่ซับซ้อนยิ่งขึ้น ก็จะเป็นปัญหาในการจัดการ View เหล่านั้น แต่ปัญหานี้ก็ถูกแก้ไขด้วย Navigation Controller ซึ่งจะมีหน้าที่ควบคุมการแสดงผลของ View การเปลี่ยนหน้า หรือการแสดงผลต่าง ๆ โดยสามารถกำหนด Navigation Controller ได้ในส่วนของ Navigation Bar ที่อยู่ด้านบนและล่างของหน้าจอ App ถ้ายังนึกภาพไม่ออกลองเปิดหน้าจอบน iPhone และเข้าไปที่ Setting และเลือกรายการต่าง ๆ เช่น Wi-Fi และเมื่อเราเข้าไปแล้ว จะเห็นว่ามี Title Bar ที่สามารถทำการคลิก Back กลับมายัง View ก่อนหน้านี้ได้ อันนี้เป็นเพียงความสามารถหนึ่งของ Navigation Controller เท่านั้น แต่ในการใช้งานจริงมันสามารถทำอะไรได้หลายอย่างมาก ดูภาพประกอบเพื่อความเข้าใจ

iOS/iPhone Navigation Controller and Storyboard

Navigation Controller (UINavigationController)


iOS/iPhone Navigation Controller and Storyboard

ตัวอย่าง App ที่ใช้ Navigation Controller เข้ามาจัดการ


ในบทความนี้จะยกตัวอย่างการใช้ Navigation Controller แบบง่าย ๆ ผ่าน Storyboard โดยยังไม่ถึงขั้นตอนการเขียน Code แต่อย่างใด เพียงแต่ใช้ความสามารถของ Xcode และ Storyboard อาศัยการลาก Drag and Drop ก็สามารถสร้าง Navigation Controller ได้อย่างง่ายดาย

iOS/iPhone Navigation Controller and Storyboard

เริ่มต้นด้วยการสร้าง Project เลือกเป็นแบบ Single View Application แบบง่าย ๆ

iOS/iPhone Navigation Controller and Storyboard

กำหนดชื่อ Project และเลือกดังภาพ โดยเลือก Use Storyboards

iOS/iPhone Navigation Controller and Storyboard

หลังจากโปรเจค Create เรียบร้อยแล้วจะพบกับหน้าจอดังรูป โดยให้คลิกที่ Storyboard และตอนนี้จะพบกับ View ว่าง ๆ 1 View

ขั้นตอนการสร้าง Navigation Controller สามารถเลือกสร้างใหม่จากรายการ Object ที่อยู่ขวามือ หรือจะเลิกสร้างให้กับ View โดยการคลิกที่ View แล้วลือก

iOS/iPhone Navigation Controller and Storyboard

Editor -> Embed In -> Navigation Controller

iOS/iPhone Navigation Controller and Storyboard

ซึ่งจะพบพบว่าตอนนี้มีรายการ Navigation Controller ขึ้นมา 1 ตัวเพื่อควบคุม View นี้ (ตอนที่แสดงผล จะแสดงแค่ 1 View เท่านั้น) และ View จะแปลงร่างเป็น Navigation Controller ที่มี Navigation Bar ในทันที

iOS/iPhone Navigation Controller and Storyboard

สามารถทำการเปลี่ยน Title Bar ได้

iOS/iPhone Navigation Controller and Storyboard

ในตัวอย่างนี้เราจะสร้าง View ย่อยอีก 2 ตัว เฉพาะฉะนั้นจะทำปุ่ม Button สำหรับ Link ไปยัง View 2 และ View 3 โดยสร้าง Button ดังภาพ

iOS/iPhone Navigation Controller and Storyboard

ตอนนี้ใน View 1 ยังไม่ได้ทำอะไรเพิ่ม นอกจากการสร้าง Butoon ขึ้นมา 2 ตัว

iOS/iPhone Navigation Controller and Storyboard

ทดสอบการสร้าง View เปล่า ๆ ขึ้นมาอีก 2 View ด้วยการใช้ Object ที่มีชื่อว่า View Controller

iOS/iPhone Navigation Controller and Storyboard

ทั้ง 2 View นี้ใส่ Label คนล่ะตัว ว่า View 2 และ View 3 จะได้ดังภาพ

iOS/iPhone Navigation Controller and Storyboard

ทำการเชื่อมโยงจาก View 1 ไปยัง View 2 ด้วย Button แรก ด้วยการกดปุ่ม Control บน Keyboard แล้วจากไปยัง View 2

iOS/iPhone Navigation Controller and Storyboard

เลือก Action Segue แบบ push (push คล้าย ๆ กับการผลัก เมื่อผลักแล้ว เราสามารถเด้งกลับมายัง View เดิมได้)

iOS/iPhone Navigation Controller and Storyboard

View 2 ก็จะแปลงร่างเป็น View ที่มี Navigation Controller อย่าลืมใส่ Title Bar ให้ด้วย ส่วน View 3 ก็ทำเช่นเดียวกัน คือใช้การลากและกำหนด Action Segue เป็น push

iOS/iPhone Navigation Controller and Storyboard

เราจะได้หน้าจอ View ทั้ง 3 ตัวบน Storyboard ที่เชื่อมโยงกันเรียบร้อย จะเห็นว่าขั้นตอนที่กระทำมา เรายังไม่ได้เขียน Code เลย อาศัยการ Drag and Drop เท่านั้น

Screenshot ทดสอบการทำงาน

iOS/iPhone Navigation Controller and Storyboard

หน้าจอ View แรกแสดงผลบน iPhone ลองคลิกไปยัง View 2

iOS/iPhone Navigation Controller and Storyboard

จะเห็นว่า View 2 จะมี View 2 ที่มี Navigation Bar ที่สามารถ Back กลับมายัง View 1 ได้

iOS/iPhone Navigation Controller and Storyboard

View 3 เช่นเดียวกัน

จากตัวอย่างจะเห็นว่าการสร้าง Navigation Controller เพื่อควบคุมการทำงานของแต่ล่ะ View นั้นสามารถทำได้บน Storyboard แบบง่าย ๆ ซึ่งในตัวอย่างจะเชื่อมโยงแค่ 1 Level แต่ทั้งนี้ถ้าต้องการประสบการณ์ที่มากขึ้นก็ลองสร้างขึ้นมาซะ 3-4 Level และทำการเชื่อมโยงด้วย Action Segue ในรูปแบบต่าง ๆ ซึ่งทั้งหมดเหล่านี้สามารถลองผิดลองถูกได้


เพิ่มเติม นอกจากนี้ในเว็บไซต์ http://developer.apple.com ยังมีตัวอย่างการใช้งาน Navigation Bar ในรูปแบบต่าง ๆ ซึ่งน่าสนใจมาก

iOS/iPhone Navigation Controller and Storyboard

Navigation Bar Object Directly

iOS/iPhone Navigation Controller and Storyboard

Navigation Bar Object Directly

http://developer.apple.com/library/ios/#documentation/UIKit/Reference/UINavigationController_Class







   
Share

Property & Method (Others Related)

iOS/iPhone Storyboard and Navigation Controller in View (iPhone, iPad) - Part 2

ช่วยกันสนับสนุนรักษาเว็บไซต์ความรู้แห่งนี้ไว้ด้วยการสนับสนุน Source Code 2.0 ของทีมงานไทยครีเอท


ลองใช้ค้นหาข้อมูล


   


Bookmark.   
       
  By : ThaiCreate.Com Team (บทความเป็นลิขสิทธิ์ของเว็บไทยครีเอทห้ามนำเผยแพร่ ณ เว็บไซต์อื่น ๆ)
  Score Rating :  
  Create/Update Date : 2012-10-23 21:59:03 / 2012-10-30 14:49:24
  Download : Download  iOS/iPhone Navigation Controller (UINavigationController) - (iPhone, iPad)
 Sponsored Links / Related

 
iOS/iPhone Tab Bar/Item and Navigation Controller (UINavigationController) (iPhone, iPad)
Rating :

 
iOS/iPhone Navigation Bar and Bar Button Item Example (iPhone,iPad)
Rating :


ThaiCreate.Com Forum


Comunity Forum Free Web Script
Jobs Freelance Free Uploads
Free Web Hosting Free Tools

สอน PHP ผ่าน Youtube ฟรี
สอน Android การเขียนโปรแกรม Android
สอน Windows Phone การเขียนโปรแกรม Windows Phone 7 และ 8
สอน iOS การเขียนโปรแกรม iPhone, iPad
สอน Java การเขียนโปรแกรม ภาษา Java
สอน Java GUI การเขียนโปรแกรม ภาษา Java GUI
สอน JSP การเขียนโปรแกรม ภาษา Java
สอน jQuery การเขียนโปรแกรม ภาษา jQuery
สอน .Net การเขียนโปรแกรม ภาษา .Net
Free Tutorial
สอน Google Maps Api
สอน Windows Service
สอน Entity Framework
สอน Android
สอน Java เขียน Java
Java GUI Swing
สอน JSP (Web App)
iOS (iPhone,iPad)
Windows Phone
Windows Azure
Windows Store
Laravel Framework
Yii PHP Framework
สอน jQuery
สอน jQuery กับ Ajax
สอน PHP OOP (Vdo)
Ajax Tutorials
SQL Tutorials
สอน SQL (Part 2)
JavaScript Tutorial
Javascript Tips
VBScript Tutorial
VBScript Validation
Microsoft Access
MySQL Tutorials
-- Stored Procedure
MariaDB Database
SQL Server Tutorial
SQL Server 2005
SQL Server 2008
SQL Server 2012
-- Stored Procedure
Oracle Database
-- Stored Procedure
SVN (Subversion)
แนวทางการทำ SEO
ปรับแต่งเว็บให้โหลดเร็ว


Hit Link
   







Load balance : Server 05
ThaiCreate.Com Logo
© www.ThaiCreate.Com. 2003-2024 All Rights Reserved.
ไทยครีเอทบริการ จัดทำดูแลแก้ไข Web Application ทุกรูปแบบ (PHP, .Net Application, VB.Net, C#)
[Conditions Privacy Statement] ติดต่อโฆษณา 081-987-6107 อัตราราคา คลิกที่นี่