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

iOS/iPhone Table View Static Cell and Section Group (iPhone, iPad)

 
 


Bookmark.   
Share
       
iOS/iPhone Table View Static Cell and Section Group (iPhone, iPad) ถ้าเคยใช้ iPhone หรือ iPad เราจะเห็นว่า Table ต่าง ๆ มันสามารถแบ่ง Group ได้ เราเรียกว่า Section เช่น ลองเข้าไปในส่วนของ Setting ก็จะเห็นกลุ่มต่าง ๆ ของ Table ซึ่งแบ่งแยกตาม Section ต่าง ๆ ที่เกี่ยวข้องกัน โดย Table บางตัวเป็นแค่ Static Cell ถูก Fix ไว้ตายตัว (ไม่มีการเปลี่ยนแปลง) และมันยังสามารถทำการลิ่งค์ไปยัง View ต่าง ๆ หรือหน้าอื่น ๆ ได้ด้วย เราลองมาดูวิธีการทำ มันสามารถทำได้ง่าย ๆ โดยไม่ต้องเขียน Code เลย

iOS/iPhone Table View Static Cell and Section Group

iOS/iPhone Table View Static Cell and Section Group


ในปัจจุบันการเขียน App iOS ที่รองรับเวอร์ชั่นใหม่ ๆ จะใช้งานบน Storyboard ซะส่วนมาก ส่วนหนึ่งก็เป็นเพราะ เราสามารถสร้าง Action บางตัวได้ง่าย โดยไม่ต้องเขียน Code ให้เสียเวลา ซึ่งมีความสะดวกกว่าการเขียน App ใน Version ก่อน ๆ มาก และก็อยากแนะนำให้ใช้ Storyboard กันบ่อย ๆ จะได้ช่วยให้การเขียน App นั้นเร็วตามไปด้วย

iOS/iPhone Table View Static Cell and Section Group

สร้าง Application แบบง่าย ๆ ด้วย Single View Application

iOS/iPhone Table View Static Cell and Section Group

เลือกใช้ Use Storyboard

iOS/iPhone Table View Static Cell and Section Group

เมื่อเปิดที่ไฟล์ Storyboard จะเห็นว่าตอนนี้มี View เปล่า ๆ อยู่ 1 View

iOS/iPhone Table View Static Cell and Section Group

ให้เราทำการลบ View ทิ้งไปได้เลย (ลบเฉพาะ View ไม่ใช่ไฟล์ Storyboard)

iOS/iPhone Table View Static Cell and Section Group

ทำการลาก Table View Controller มายังตำแหน่งบน Storyboard

iOS/iPhone Table View Static Cell and Section Group

ปรับ Table View ตรง Content

iOS/iPhone Table View Static Cell and Section Group

เป็น Static Cells

iOS/iPhone Table View Static Cell and Section Group

จะเห็นว่า Table ถูกเปลี่ยนมุมมองเป็น Static เรียบร้อยแล้ว

iOS/iPhone Table View Static Cell and Section Group

เลือก Style เป็นแบบ Grouped

iOS/iPhone Table View Static Cell and Section Group

เลือก Style เป็นแบบ Grouped

iOS/iPhone Table View Static Cell and Section Group

ทดสอบเพิ่ม Sections เป็น 2 Group

iOS/iPhone Table View Static Cell and Section Group

สามารถใส่ Header ในแต่ล่ะ Sections ได้

iOS/iPhone Table View Static Cell and Section Group

ทดสอบใส่ Sections ทั้ง 2 Sections

iOS/iPhone Table View Static Cell and Section Group

ข้อความใน Cell ของ Table View ที่เป็นแบบ Static Cells เราสามารถทำการลาก Table ไปวางไว้ได้เลย

iOS/iPhone Table View Static Cell and Section Group

ทดสอบใส่ Label เข้าไปใน Cell และ เปลี่ยนข้อความใน Label ต่าง ๆ ดังรูป

ทดสอบบน Simulator

iOS/iPhone Table View Static Cell and Section Group

ได้หน้าจอดังรูป โดยที่เรายังไม่ได้เขียน Code ซะนิดเลย

iOS/iPhone Table View Static Cell and Section Group

เราจะมาทดสอบใส่ Navigation Controller ให้กับ View เพื่อจะทำการเชื่อมโยงไปยัง View อื่น ๆ

iOS/iPhone Table View Static Cell and Section Group

ได้ Navigation Controller ขึ้นมาเรียบร้อยแล้ว

iOS/iPhone Table View Static Cell and Section Group

จากนั้นสร้าง View Controller ขึ้นมาอีก 2 ตัว โดยเราจะเรียกว่า View 2 และ View 3 โดยทดสอบใส่ Background และ Label ต่าง ๆ ดังรูป

iOS/iPhone Table View Static Cell and Section Group

ขั้นถัดไปจะเป็นการเชื่อม Action ของ Cell จาก Table View ไปยัง View 2 และ View 2 โดยการคลิกที่ Cell แล้วกด Control ที่ Keyboard แล้วลากไปยัง View ปลายทาง

iOS/iPhone Table View Static Cell and Section Group

เลือก Selection Segue แบบ push จากนั้น Cell ที่ 2 ก็ทำคล้าย ๆ กัน

iOS/iPhone Table View Static Cell and Section Group

เราจะได้การเชื่อมโยง Cell ของ Table View ไปยัง View 2 และ View 3 ดังรูป

Screenshot

iOS/iPhone Table View Static Cell and Section Group

หน้าหลักของ App สามารถคลิกที่ Cell ที่เราทำการเชื่อมโยงไปยัง View 2 และ View 3

iOS/iPhone Table View Static Cell and Section Group

หน้าจอของ View 2 สามารถ Back กลับได้

iOS/iPhone Table View Static Cell and Section Group

หน้าจอของ View 3 สามารถ Back กลับได้

จากตัวอย่างนี้จะเห็นว่า Storyboard จะช่วยให้เราสร้าง Interface ต่าง ๆ ได้ง่ายขึ้น ซึ่งเราสามารถสางโครงสร้างต่าง ๆ ของ App เป็นรูปเป็นร่างขึ้นมาได้เลย โดยที่เรายังไม่ได้ทำการเขียน Code เลยซะนิดเดียว

   
Share


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

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


   
  By : ThaiCreate.Com Team (บทความเป็นลิขสิทธิ์ของเว็บไทยครีเอทห้ามนำเผยแพร่ ณ เว็บไซต์อื่น ๆ)
  Score Rating :  
  Create/Update Date : 2012-11-07 10:36:09 / 2012-11-07 15:28:06
  View : 2,606
  Download : Download  iOS/iPhone Table View Static Cell and Section Group (iPhone, iPad)
Sponsored Links
 
 
081-987-6107!
 
081-987-6107!
 Sponsored Links / Related


 
iOS/iPhone TableView and UITableView (Objective-C, iPhone, iPad)
Rating : View : 5,768
iOS/iPhone TableView Passing Data to Another View (Objective-C,iPhone,iPad)
Rating : View : 3,389
iOS/iPhone Table View Master-Detail and Passing Data (Objective-C,iPhone)
Rating : View : 2,903
iOS/iPhone Master Detail Wizard Application (Add/Insert/Delete/Table View)
Rating : View : 2,791
iOS/iPhone Table View(UITableView) Sections from an NSArray/NSMutableArray/NSDictionary (Objective-C,iPhone, iPad)
Rating : View : 3,243
iOS/iPhone Table View Image Column Multiple Column (Objective-C,iPhone)
Rating : View : 2,749
iOS/iPhone Table View and Table View Cell - Custom Cell Column (iPhone, iPad)
Rating : View : 4,062
iOS/iPhone Table View from NSDictionary - UITableview and NSMutableDictionary
Rating : View : 3,268




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
สอน Struts การเขียนโปรแกรม Java Struts Framework
สอน jQuery การเขียนโปรแกรม ภาษา jQuery
สอน Yii  Framework การเขียนโปรแกรม ภาษา PHP กับ Yii
สอน .Net การเขียนโปรแกรม ภาษา .Net

Free Tutorial
สอน 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
Microsoft Access
MySQL Tutorials
MariaDB Database
SQL Server Tutorial
SQL Server 2005
SQL Server 2008
SQL Server 2012
Oracle Tutorial
แนวทางการทำ SEO
ปรับแต่งเว็บให้โหลดเร็ว

สุดยอด Source Code V2.0
 

แจ้งชำระเงิน/โอนเงิน
 

Hit Link
   




Acc : thaicreate@hotmail.com


Load balance : Server TC-00
ThaiCreate.Com Logo
© www.ThaiCreate.Com. 2003-2013 All Rights Reserved.
for Contact Us : [Conditions Privacy Statement] ติดต่อโฆษณา 081-987-6107 , 084-715-5121 อัตราราคา คลิกที่นี่

Back to Top