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 Table View Static Cell and Section Group (iPhone, iPad)

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 ของทีมงานไทยครีเอท


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


   


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

 
iOS/iPhone TableView and UITableView (Objective-C, iPhone, iPad)
Rating :

 
iOS/iPhone TableView Passing Data to Another View (Objective-C,iPhone,iPad)
Rating :

 
iOS/iPhone Table View Master-Detail and Passing Data (Objective-C,iPhone)
Rating :

 
iOS/iPhone Master Detail Wizard Application (Add/Insert/Delete/Table View)
Rating :

 
iOS/iPhone Table View(UITableView) Sections from an NSArray/NSMutableArray/NSDictionary (Objective-C,iPhone, iPad)
Rating :

 
iOS/iPhone Table View Image Column Multiple Column (Objective-C,iPhone)
Rating :

 
iOS/iPhone Table View and Table View Cell - Custom Cell Column (iPhone, iPad)
Rating :

 
iOS/iPhone Table View from NSDictionary - UITableview and NSMutableDictionary
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 02
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 อัตราราคา คลิกที่นี่