iPhone: Configuration Xib file of UITableView with using XCode4 (2)


iPhone: Configuration Xib file of UITableView with using XCode4 (2)

เรามาต่อกันกับเนื้อหาที่เหลือของส่วนการแนะนำการปรับแต่งค่าของ UITableView ใน Interface Builder ได้แก่ส่วนของ การปรับแต่ง View, TableView Size, ScrollView Size, Outlets และ Reference Outlets เรามาเริ่มลุยกันต่อเลยครับ

5. ในส่วนของการปรับแต่ง View โอเค View ในที่นี้หมายถึงส่วนการแสดงผลเทเบิลวิว (TableView) ทั้งหมด ตัวอย่างเช่นการกำหนดสีพื้นหลัง การกำหนดความโปร่งแสงของเทเบิลวิว เป็นต้น

ในส่วนของการปรับแต่ง View ผมจะกล่าวถึงในส่วนของการปรับแต่ง Alpha, Background, Tag, Hidden และ User Interactive Enabled นะครับ เนื่องจากส่วนดังกล่าวจะถูกใช้บ่อยที่สุด

  • Alpha คือการปรับความโปร่งแสงของเทเบิลวิว มีค่า 1.0 (ทีบแสง) – 0.0 (โปร่งแสง)
  • Background คือการปรับสีพื้นหลังของเทเบิลวิว ผมยกตัวอย่างที่เห็นได้ชัดเจนดังภาพด้านล่าง นะครับ ผมกำหนดให้ Alpha = 0.4 และ Background เป็นสีเหลือง ผลลัพธ์ก็จะเป็นตามภาพด้านล่าง

  • Tag คือ ค่าที่กำหนดให้กับวิวใดๆ เพื่อระบุให้เป็นเลขเฉพาะประจำวิวนั้น ใช้ต่อเมื่อต้องการแยกแยะวิวที่มีอยู่ซ้ำกัน เพื่อนำวิวที่ต้องการออกมาใช้งานได้ถูกต้อง
  • Hidden คือการซ่อนวิวเอาไว้ หากเลือก (ใส่เครื่องหมายถูก) เทเบิลจะถูกซ่อนเอาไว้ ทำให้มองไม่เห็น
  • User Interaction Enabled คือ การกำหนดค่าการปฏิสัมพันธ์กับผู้ใช้ หากเราไม่ติ๊กเครื่องหมายถูกออก จะทำให้ผู้ใช้กดที่เทเบิลของเราแล้วไม่เกิดผลอะไรขึ้นเลย

ดังนั้นในส่วนของ Attribute Inspector จะเป็นการปรับแต่งค่าของวิวและการแสดงผลของ Simulator ในส่วนต่อไปจะเป็นการปรับแต่งตำแหน่งและขนาดของเทเบิล นะครับ เรียกว่า Size Inspector

6. Size Inspector ผมจะกล่าวถึงแค่การเซ็ต ความสูงของแถว และความสูงของ Header กับ Footer

  • ความสูงของแถวแต่ละแถวในเทเบิลสามารถกำหนดในฟิว Row ซึ่งจากภาพด้านบนกำหนดให้เป็น 44
  • ความสูงของ Header และ Footer คือส่วนบนและส่วนล่างของเทเบิล สามารถกำหนดได้จากฟิว Header และ Footer ตามลำดับ แต่หากเราไม่มี Header/Footer ให้เราไม่ต้องปรับแก้ไขอะไร แต่หากเราใช้สไตล์เทเบิลแบบ Group การกำหนดค่า Header/Footer (หากไม่มีข้อมูลในส่วน Header/Footer) จะเป็นการกำหนดระยะห่างของแต่ละ section

ในส่วนของ Size Inspector ที่ผลกล่าวแค่เพียงการกำหนดค่า Height เนื่องจากการกำหนดค่าตรงนี้จะได้ใช้บ่อยเมื่อเรามีการสร้าง TableViewCell ขึ้นมาใช้งานเองเพื่อกำหนดขนาดการแสดงผลของแต่ละแถวให้มีความสูงเท่ากับ Cell ที่เราได้สร้างขึ้น เราไปต่อที่ส่วนสุดท้ายกันเลยครับ คือส่วนของ Connections Inspector

7. Connections Inspector เป็นส่วนที่ระบุการเชื่อมต่อของวิวที่เราเลือก เช่นในที่นี้ผมเลือกที่ TableView ทางด้าน Connection Inspector จะแสดงข้อมูลการเชื่อมต่อของ TableView ออกมาให้ดู โดยแยกเป็น 2 อย่างคือ Outlet และ Reference Outlet เรามาทำความเข้าใจในแต่ละตัวกันครับ

  • Reference Outlet คือ ส่วนที่บอกว่าวิวของเรานั้นลิ้งเข้ากับตัวแปรชื่อว่าอะไรใน File’s Owner เช่นในตัวอย่างภาพด้านบน ลิ้งกับตัวแปรชื่อว่า view ดังนั้น เราสามารถปรับแต่งเทเบิลของเราได้ผ่านตัวแปร view ในการเขียนโค้ดได้
  • Outlet คือการเชื่อมต่อทางด้านฟังก์ชั่น เช่น เทเบิลจะมีฟังก์ชั่นของ delegate และ datasource โดยจากตัวอย่างนั้นได้ลิ้งไปที่ File’s Owner ทั้งสองอย่าง ซึ่งหมายถึง เราต้อง implement ฟังก์ชั่น delegate และ datasource ของ เทเบิล ณ ไฟล์  File’s Owner (หากงงว่าไฟล์ File’s Owner คือไฟล์ใด อ่าน iPhone: Configuration Xib file of UITableView with using XCode4)

เรียบร้อยแล้วครับ สำหรับการอธิบายการปรับแต่งเทเบิลโดยวิธีปรับแต่งผ่าน Interface Builder ซึ่งผมอาจจะอธิบายได้ไม่ครบทุกตัว เนื่องจากเวลาทำงานจริงๆ การเขียนโค้ดกำหนดค่าจะเป็นการทำที่ปรับแต่งได้ตามสถานะการมากกว่าการปรับแต่งผ่าน Interface Builder ครับ แต่หากเพื่อนๆ อยากจะให้อธิบายในส่วนไหนเพิ่มเติมแนะนำ/เม้นเข้ามาได้นะครับ ผมจะได้นำมาปรับปรุงบทความให้ตกตามความต้องการผู้อ่านมากยิ่งขึ้นด้วย ส่วนบทความต่อไปเราได้เล่นกับ UITableView กันจริงๆ กันแล้วหลังจาก Intro มาตั้งสามบทความแล้ว ติดตามในบทความหน้านะครับ เริ่มต้นกับ UITableView วันนี้สวัสดีครับ

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

adaydesign :)

About adaydesign

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

Posted on มิถุนายน 23, 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: