Register
Member Login
Forgot Password ??
PHP
,
ASP
,
ASP.NET, VB.NET, C#, Java
,
jQuery , Android , iOS , Windows Phone
Registered :
109,027
HOME
>
Mobile
>
[iOS/iPhone] Tutorials - สอนเขียน iPhone App ฟรี เขียน iPad App เรียน iPhone เขียนโปรแกรม iPhone
>
iOS/iPhone Navigation Controller (UINavigationController) - (iPhone, iPad)
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
เท่านั้น แต่ในการใช้งานจริงมันสามารถทำอะไรได้หลายอย่างมาก ดูภาพประกอบเพื่อความเข้าใจ
Navigation Controller (UINavigationController)
ตัวอย่าง App ที่ใช้ Navigation Controller เข้ามาจัดการ
ในบทความนี้จะยกตัวอย่างการใช้
Navigation Controller
แบบง่าย ๆ ผ่าน
Storyboard
โดยยังไม่ถึงขั้นตอนการเขียน Code แต่อย่างใด เพียงแต่ใช้ความสามารถของ Xcode และ Storyboard อาศัยการลาก
Drag and Drop
ก็สามารถสร้าง
Navigation Controller
ได้อย่างง่ายดาย
เริ่มต้นด้วยการสร้าง Project เลือกเป็นแบบ
Single View Application
แบบง่าย ๆ
กำหนดชื่อ Project และเลือกดังภาพ โดยเลือก
Use Storyboards
หลังจากโปรเจค Create เรียบร้อยแล้วจะพบกับหน้าจอดังรูป โดยให้คลิกที่ Storyboard และตอนนี้จะพบกับ View ว่าง ๆ 1 View
ขั้นตอนการสร้าง
Navigation Controller
สามารถเลือกสร้างใหม่จากรายการ
Object
ที่อยู่ขวามือ หรือจะเลิกสร้างให้กับ View โดยการคลิกที่ View แล้วลือก
Editor -> Embed In -> Navigation Controller
ซึ่งจะพบพบว่าตอนนี้มีรายการ
Navigation Controller
ขึ้นมา 1 ตัวเพื่อควบคุม View นี้ (ตอนที่แสดงผล จะแสดงแค่ 1 View เท่านั้น) และ View จะแปลงร่างเป็น
Navigation Controller
ที่มี
Navigation Bar
ในทันที
สามารถทำการเปลี่ยน
Title Bar
ได้
ในตัวอย่างนี้เราจะสร้าง View ย่อยอีก 2 ตัว เฉพาะฉะนั้นจะทำปุ่ม Button สำหรับ Link ไปยัง View 2 และ View 3 โดยสร้าง Button ดังภาพ
ตอนนี้ใน
View 1
ยังไม่ได้ทำอะไรเพิ่ม นอกจากการสร้าง Butoon ขึ้นมา 2 ตัว
ทดสอบการสร้าง
View
เปล่า ๆ ขึ้นมาอีก 2 View ด้วยการใช้ Object ที่มีชื่อว่า
View Controller
ทั้ง 2 View นี้ใส่ Label คนล่ะตัว ว่า
View 2
และ
View 3
จะได้ดังภาพ
ทำการเชื่อมโยงจาก View 1 ไปยัง View 2 ด้วย Button แรก ด้วยการกดปุ่ม
Control
บน
Keyboard
แล้วจากไปยัง View 2
เลือก
Action Segue
แบบ
push
(
push
คล้าย ๆ กับการผลัก เมื่อผลักแล้ว เราสามารถเด้งกลับมายัง
View
เดิมได้)
View 2 ก็จะแปลงร่างเป็น View ที่มี
Navigation Controller
อย่าลืมใส่ Title Bar ให้ด้วย ส่วน View 3 ก็ทำเช่นเดียวกัน คือใช้การลากและกำหน
ด Action Segue เป็น push
เราจะได้หน้าจอ View ทั้ง 3 ตัวบน
Storyboard
ที่เชื่อมโยงกันเรียบร้อย จะเห็นว่าขั้นตอนที่กระทำมา เรายังไม่ได้เขียน Code เลย อาศัยการ
Drag and Drop
เท่านั้น
Screenshot
ทดสอบการทำงาน
หน้าจอ
View
แรกแสดงผลบน iPhone ลองคลิกไปยัง View 2
จะเห็นว่า View 2 จะมี View 2 ที่มี Navigation Bar ที่สามารถ Back กลับมายัง View 1 ได้
View 3 เช่นเดียวกัน
จากตัวอย่างจะเห็นว่าการสร้าง
Navigation Controller
เพื่อควบคุมการทำงานของแต่ล่ะ
View
นั้นสามารถทำได้บน
Storyboard
แบบง่าย ๆ ซึ่งในตัวอย่างจะเชื่อมโยงแค่ 1 Level แต่ทั้งนี้ถ้าต้องการประสบการณ์ที่มากขึ้นก็ลองสร้างขึ้นมาซะ 3-4 Level และทำการเชื่อมโยงด้วย
Action Segue
ในรูปแบบต่าง ๆ ซึ่งทั้งหมดเหล่านี้สามารถลองผิดลองถูกได้
เพิ่มเติม
นอกจากนี้ในเว็บไซต์
http://developer.apple.com
ยังมีตัวอย่างการใช้งาน
Navigation Bar
ในรูปแบบต่าง ๆ ซึ่งน่าสนใจมาก
Navigation Bar Object Directly
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
ของทีมงานไทยครีเอท
ลองใช้ค้นหาข้อมูล
By :
ThaiCreate.Com Team (บทความเป็นลิขสิทธิ์ของเว็บไทยครีเอทห้ามนำเผยแพร่ ณ เว็บไซต์อื่น ๆ)
Score Rating :
Create/Update Date :
2012-10-23 21:59:03 / 2012-10-30 14:49:24
Download :
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 :
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
นำเข้าสินค้าจากจีน
Taobao
เฟอร์นิเจอร์
ของพรีเมี่ยม
ร่ม
ปากกา
power bank
แฟลชไดร์ฟ
กระบอกน้ำ
แลกเปลี่ยน Exchange Link
ลองค้นหาสิ่งที่ต้องการ
Load balance :
Server 05
© www.ThaiCreate.Com. 2003-2024 All Rights Reserved.
ไทยครีเอทบริการ จัดทำดูแลแก้ไข Web Application ทุกรูปแบบ (PHP, .Net Application, VB.Net, C#)
[
Conditions Privacy Statement
]
ติดต่อโฆษณา
081-987-6107
อัตราราคา
คลิกที่นี่
Inline
ช่วยกันสนับสนุนรักษาเว็บไซต์ความรู้แห่งนี้ไว้ด้วยการสนับสนุน 
Load balance : Server 05
