Home / Developer  / iOS Developer ตอนที่ 8 ตกแต่ง UITableViewCell ให้สวยงาม

iOS Developer ตอนที่ 8 ตกแต่ง UITableViewCell ให้สวยงาม

พัฒนาแอพพลิเคชันบนแพลตฟอร์ม iOS หรือ iPhone กับบทเรียนแนะนำวิธีการตกแต่ง UITableViewCell บน UITableView ให้ออกมาสวยงาม และน่าใช้งานแน่นอนว่าถ้าเราใช้งาน UITableView ง่ายๆ แสดงผลตารางเป็นแถวของข้อมูลจาก Array แบบที่หน้าจอบทเรียนก่อนหน้านี้ คือ “iOS Developer ตอนที่ 5 ปรับแต่งรูปภาพ Thumbnail บน UITableViewCell” ได้แสดงผลออกมานั้นยังไม่ตอบโจทย์ เพราะว่ามันดูเหมือยแอพพลิเคชันธรรมดาๆ ทั่วๆ ไป

การเรียกใช้งาน  UITableView

การเรียกใช้งาน UITableView

แม้ว่าจะพยายามปรับรูปแบบของ UITableViewCell ให้เป็นแบบ Custom หรือเป็นแบบ Subtitle ผ่านหน้า StoryBoard ไปบ้างแล้วก็ยังรู้สึกธรรมดาอยู่ดี ปรับอะไรหวือหวาไม่ได้ ผมก็เลยหาวิธีการปรับแต่งหน้าจอ Interface ของ UITableViewCell ให้น่าสนใจขึ้นครับ แน่นอนว่าอาจจะต้องใช้งานไฟล์ Source Code หรือศึกษาบทเรียนก่อนหน้านี้มาก่อนในการใช้งาน UITableView ครับ

ผมจะอ้างอิง Project เดิมจาก 2 บทข้างต้นครับ

สำหรับการปรับแต่ง UITableViewCell นั้น หลายคนที่ต้องปรับแต่งแถวของข้อมูลให้ดูแปลกตา หรือน่าสนใจ ก็เพราะว่ามีเหตุผลในการรองรับการใช้งาน โดยเฉพาะพวกแอพพลิเคชันอย่าง E-Book หรือ E-Magazine ที่ต้องมีการแสดงหน้าปก ชื่อหนังสือ และ ราคา พร้อมคำโปรยเป็นต้นครับ และเพราะว่าข้อมูลทั้งหมดนั้นมันอัดใน Cell เดียวไม่ได้แน่นอนครับ จึงต้องมีการปรับแต่ง UITableViewCell ขึ้นมาครับ

เปิดไฟล์ ViewController.h ขึ้นมา แก้ไขไฟล์นี้ใหม่โดยเปลี่ยนและเพิ่มตัวแปรลงไปจาก

ให้กลายเป็น

ต่อมาให้ทำการแก้ไขไฟล์ Viewcontroller.m ในตำแหน่งของการสร้างตัวแปร Array ใหม่อีกครั้ง จาก

ให้กลายเป็น

เมื่อเสร็จขั้นตอนการเปลี่ยนคำสั่ง และหายงงจากการเปลี่ยนชุด Array แล้ว ให้แก้ไข คำสั่ง

ให้กลายเป็น

ทำการ  New File ขึ้นมาใหม่ใน Project ของเรา เลือกเป็น Objective-C Class ตั้งชื่อไฟล์ว่า “SimpleTableCell”

ทำการ  New file เข้ามาใหม่

ทำการ New file เข้ามาใหม่

ตั้งชื่อไฟล์ว่า SimpleTableCell

ตั้งชื่อไฟล์ว่า SimpleTableCell

ให้สร้างไฟล์ สำหรับออกแบบ UITableViewCell ขึ้นมาใหม่ เลือกเป็น User Interface และคลิกที่รูปแบบ Empty

New File ใหม่ขึ้นมาเป็น User Interface

New File ใหม่ขึ้นมาเป็น User Interface

เข้าไปที่ StoryBoard ของ SimpleTableCell ให้ปรากฏหน้าจอการออกแบบ  User Interface ลาก UITable View Cell ไปวางบน SimpleTableCell บน StoryBoard ต่อจากนั้นทำการวาง รูปภาพ UIImage, UILabel, UITextView ลงไปครับ ปรับแต่งให้เหมาะสม จะทำเหมือนตัวอย่างของผมก็ได้ผมจะทำรูปแบบของแอพพลิเคชัน ขายหนังสือ

ลาก UITable View Cell ไปวางบน SimpleTableCell บน StoryBoard

ลาก UITable View Cell ไปวางบน SimpleTableCell บน StoryBoard

ตัวอย่างที่ผมวางลงไป ผมปรับความสูงเป็น 114 px แล้วใส่ UI ทุกตัวลงไป

ตัวอย่างที่ผมวางลงไป ผมปรับความสูงเป็น 114 px แล้วใส่ UI ทุกตัวลงไป

ไปที่ไฟล์ SimpleTableCell.h เพิ่ม Code ลงไป

ต่อจากนั้นให้ไปเพิ่มคำสั่งลงในไฟล์ SimpleTableCell.m ดังนี้

เมื่อสร้างตัวแปล และทำการ Synthesize หมดแล้วให้ไปที่ SimpleTableCell คลิกที่ตัว UITableViewCell ใน StoryBoard เปลี่ยน Class ให้เป็น SimpleTableCell ทันที

เลือก Class ใหม่ให้กับ SimpleTableCell

เลือก Class ใหม่ให้กับ SimpleTableCell

ทำการเชื่อม UI เข้ากับตัวแปลที่สร้างขึ้นใน SimpleTableCell กับหน้าจอบน Story Board ให้ครบทุกตัว เข้ากับตัวแปล ที่เราสร้างขึ้น

เชื่อมต่อตัว Interface ลงไปกับตัวแปลที่เราสร้างใน SimpleTableCell ครับ

เชื่อมต่อตัว Interface ลงไปกับตัวแปลที่เราสร้างใน SimpleTableCell ครับ

ทำการเชื่อม UIImageView กับตัวแปล CoverCell, เชื่อม UILabel  ที่ตั้งชื่อว่า “Price” ไปเชื่อมกับตัวแปล PriceCell และตัวสุดท้าย UILabel  ที่ตั้งชื่อว่า Title ไปเชื่อมกับตัวแปล TitleCell ครับ

แก้ไขไฟล์ ViewController.m ในฟังก์ชัน – (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath จากเดิมคือ

ให้แก้ไขเป็น

ถ้าเกิด Error ไม่ต้องตกใจครับ ให้เลื่อนไปเพิ่มที่ส่วน Header ว่า

สุดท้ายให้เพิ่มฟังก์ชันเข้าไปเพื่อกำหนดความสูงของ Cell บน UITableViewCell โดยใช้คำสั่ง

ทำการ “Run” ตัวแอพพลิเคชันของเราดูอีกครั้ง

แสดงผลหน้าจอแอพพลิเคชันที่ปรับแต่ง UITableViewCell เรียบร้อย

แสดงผลหน้าจอแอพพลิเคชันที่ปรับแต่ง UITableViewCell เรียบร้อย

เป็นยังไงบ้างครับ วิธีการออกแบบหน้าจอแอพพลิเคชันบน iOS ในการใช้ UITableView มาปรับแต่ง UITableViewCell ให้แสดงผลได้แตกต่างกว่ารูปแบบเดิมๆ ที่มีอยู่ครับ

สำหรับ Source Code สามารถดาวน์โหลดได้ที่: http://code.google.com/p/daydev/

 

Comments

daydevthailand@gmail.com

อาจารย์ประจำสาขาวิชาการออกแบบเชิงโต้ตอบ และการพัฒนาเกม วิทยาลัยครีเอทีฟดีไซน์ & เอ็นเตอร์เทนเมนต์เทคโนโลยี มหาวิทยาลัยธุรกิจบัณฑิตย์ ,ผู้ก่อตั้ง บริษัท Daydev Co., Ltd, (เดย์เดฟ จำกัด)

Review overview
2 COMMENTS

POST A COMMENT