iPhone: Configuration Xib file of UITableView with using XCode4


iPhone: Configuration Xib file of UITableView with using XCode4

ต่อจากบทความที่แล้ว (iPhone: UITableView Tutorial) ที่กล่าวถึงพื้นฐานการใช้งาน UITableView ในบทความนี้นำเสนอเรื่องการปรับแต่ง UITableView จากไฟล์ .xib ด้วย Interface Builder ซึ่ง Interface Builder ของ XCode4 จะถูกรวมอยู่ใน XCode4 อยู่แล้ว ไม่ได้แยกออกเป็นโปรแกรมต่างหากเหมือน XCode3 ดังนั้นเราจะมาศึกษากันดูว่า การปรับแต่ง UITableView นั้นสามารถทำอะไรได้บ้าง

เริ่มกันเลยนะครับ ก่อนอื่นให้เพื่อนๆ คลิกไปที่ ไฟล์ RootViewController.xib ก่อนนะครับ (กดเฉยๆ ไม่ต้อง double click นะ) เมื่อกดไฟล์ .xib แล้ว จะปรากฏ Interface Builder ด้านขวาของ Project Navigator นะครับ หากเรามาถึงหน้า Interface Builder กันแล้ว สิ่งที่จะพูดถึงในบทความนี้คือ File’s Owner และ Table View ตามลำดับนะครับ

1. คลิกเลือกที่ File’s Owner จะได้ตามรูปด้านล่าง

จากรูปแสดง Identity Inspector (Tab ที่  3) จะเห็นว่า File’s Owner นี้จะลิ้งไปที่ Class RootViewController เนื่องจากว่า คลาส RootViewController นั้น extends UITableViewController ดังนั้นไฟล์ File’s Owener จึงลิ้งไปที่คลาสดังกล่าวครับ โดยพวกคลาส ViewController ต่างๆ จะมี property view เอาไว้ใช้เป็น Main Container เพื่อเพิ่ม view ต่างๆ เข้าไปด้วย

2. คลิกเลือก Tab ที่ 6 (Connection Inspector) จะได้ตามภาพด้านล่าง

ในส่วนของ Connection จะแสดงการเชื่อมโยง File’s Owner กับ Outlet และ Reference Outlet ต่างๆ นะครับ

จากรูป Outlet view (view เป็น property outlet ของ View Controller อยู่แล้ว) ถูกลิ้งไปยัง Table View เนื่องจากว่า คลาส RootViewController ของเราเป็น UITableViewController ดังนั้น จึงเชื่อมกับ Table View เพื่อแสดงผลเป็นวิวแรก (Main Contrainer)

ในส่วนของ Reference Outlets จะเป็นส่วนการเชื่อมกับ Delegate กับ Datasource เพื่อ implement ฟังก์ชั่นของ  delegate และ datasource ในการรับและจัดการอีเวนท์ และการจัดการการแสดงผลข้อมูล (อ่านเรื่อง UITableView Delegate และ Datasource ใน iPhone: UITableView Tutorial)

3. คลิกเลือก Table View ที่ด้านซ้ายมือ ในส่วนของ Object ต่อไปเราจะมาดูในส่วนของ Table View บ้าง ว่าเราสามารถจะปรับแต่งอะไรได้โดยไม่ต้องเขียนโค้ดบ้างนะครับ หากคลิกเลือกแล้ว เลือกไปที่ Tab ที่ 4 (Attributes Inspector) ก่อนเลย จะได้ตามภาพด้านล่างนี้ครับ

3.1 จากภาพ ในส่วนของ Simulate Metrics จะเป็นการจำลองหน้าจอแอพของเราว่า

  • อยู่ในแนวไหน (Oriantation) : แนวนอน (Landscape) หรือแนวตั้ง (Portrait)
  • การแสดง Status Bar : ไม่แสดง (None) หรือแสดง Status Bar ในรูปแบบ Grey, Black, Translucent Black
  • การแสดง Top Bar : ไม่แสดง (None) หรือแสดง Top Bar ในรูปแบบ Navigation Bar แบบต่างๆ
  • การแสดง Bottom Bar : ไม่แสดง (None) หรือแสดง Bottom Bar ในรูปแบบ TabBar  หรือ ToolBar ในแบบต่างๆ

การแสดงผลในส่วน Simulate Metrics นี้จะมีผลต่อ ผลลัพธ์ของแอพด้วยนะครับ เพราะว่า หากเราไม่กำหนดการแสดงพวก Top Bar, Bottom Bar แล้วนิ แต่แอพของเรามี Top Bar หรือ Bottom Bar จะทำให้ การแสดงผลผิดพลาด! ได้ครับ ดังนั้น Simulate Metrics จึงมีประโยชน์ที่ช่วยให้เราดูและจัดการ หน้าตาแอพได้ก่อนรันดูผลโปรแกรม

3.2 ส่วนของ Table View ต่อจาก Simulate Metrics เป็นส่วนการกำหนดรูปแบบการแสดงผล Table View

  • รูปแบบ (Style) : Plain เป็นแบบเรียงรายการตามลำดับ index (รูปด้านซ้าย) และ Group เป็นแบบเรียงตามกลุ่มโดยจะมี section คือลำดับกลุ่มและ index คือลำดับในกลุ่มนั้น (รูปด้านขวา)

  • การแสดงเส้นขั้นระหว่างรายการ (Separator) มีรูปแบบการแสดงได้แก่ None, Single Line, Single Line Etched
  • กำหนดจำนวนแถว (Index Row Limit) ใส่ตัวเลขกำหนดลงไปได้เลยครับ แต่หากยังไม่แน่ใจว่าจำนวนแถวจะเป็นเท่าไร ให้ใส่ 0  ไปก่อนแล้วไปปรับในโค้ดโปรแกรมเอา
  • การตั้งค่า Selection: Allows selection while editing และ Show selection on touch

ดังนั้นในส่วนของ Table View จะเป็นการปรับค่าที่เกี่ยวข้องกับ การแสดงผล Table View เช่น การแสดงเป็นแบบ รายการหรือแบบกลุ่ม จำนวนแถวรายการที่จะแสดง การแสดงเส้นขั้นระหว่างรายการและการตั้งค่าการ selection

4. การกำหนดค่าการแสดงผล Scroll View

ในส่วนของ Scroll View มีการปรับแต่งค่าการแสดงผลของ Scroll View ดังนี้

  • รูปแบบ Scroll Style มีแบบ Default, Black และ White
  • Scrollers เป็นการกำหนดและปรับแต่งค่า Scrollers ให้แสดงในรูปแบบตามที่ต้องการเช่น การกำหนดให้แสดง Scroller เฉพาะแนวตั้งหรือแนวนอน การกำหนดการเลื่อนของ Scroller การกำหนดการเลื่อนแบบ Paging  การกำหนดการเลื่อนแบบยืดหยุ่นเด้งไปมา (Bounces) การกำหนดให้ Scroller แสดงตลอดในแนวตั้งหรือแนวนอน
  • การซูม Zoom การกำหนด ค่า Min และ Max ของค่าการ Zoom (Zoom Scale)
  • การกำหนดค่าการ Touch (อันนี้ไม่เคยปรับเหมือนกันครับ ปล่อยตาม default เลย)

ดังนั้นในส่วนของ Scroll View จะเป็นส่วนที่เราสามารถปรับแต่งการแสดงผล Scroll View เบื้องต้นได้เลย

เนื้อหาของบทความนี้ยังไม่หมดเท่านี้นะครับ ผมของพักไว้ครึ่งแรกก่อน แล้วเรามาต่อกันในครึ่งหลังในส่วนของการปรับแต่งในส่วนต่างๆ และ Inspector ใน Tab อื่นๆ ด้วย ติดตามกันต่อใน iPhone: Configuration Xib file of UITableView with using XCode4 (2) นะครับ

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

adaydesign :)

About adaydesign

นักพัฒนาแอพพลิเคชั่นบนโมบาย [iPhone Android] คนหนึ่งซึ่งอยากจะบันทึกเรื่องราวของเส้นทางนักพัฒนาโมบายแอพพลิเคชั่นเอาไว้ในบล็อคน้อยๆ แห่งนี้ เผื่อจะแบ่งบันและแลกเปลี่ยนความรู้ให้กับคนอื่นๆ ได้บ้าง :) Mobile Application Developer; Flash Mobile, iPhone/iPad, Android Mobile Phone/Tablet and Blackberry Playbook.

Posted on มิถุนายน 19, 2011, in [Dev] iOS and tagged , . Bookmark the permalink. 1 ความเห็น.

ใส่ความเห็น

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / เปลี่ยนแปลง )

Twitter picture

You are commenting using your Twitter account. Log Out / เปลี่ยนแปลง )

Facebook photo

You are commenting using your Facebook account. Log Out / เปลี่ยนแปลง )

Google+ photo

You are commenting using your Google+ account. Log Out / เปลี่ยนแปลง )

Connecting to %s

%d bloggers like this: