ทำ UITableView แบบของตัวเอง

สำหรับกรณีที่เราจะสร้างในหัวข้อนี้เป็นการสร้าง UITableView ในแบบที่เราอยากได้ ซึ่งจริงๆ แล้วคือรูปแบบของ UITableViewCell ที่มีการจัดวาง UI ต่างๆ ตามที่เราต้องการนั่นแหล่ะค่ะ ดังนั้นเรามาสร้าง Project ใหม่อันหนึ่งดีกว่า เหมือนเดิมเลยค่ะ เลือก Template เป็น Single View Application และตั้งชื่อตามต้องการเลยค่ะ

จากนั้นเปิด Main.storyboard รอเลยค่ะ ถ้าใครอยากวาง Background ก็ตามสะดวกเลยค่ะ (ดูวิธีใส่ Backgroud ได้จากหัวข้อ Layout นะจ๊ะ) เมื่อพร้อมแล้ว คราวนี้เราเอา UITableView มาวางบน storyboard เลยค่ะ

วางแล้วอย่าลืมปรับ Layout นะคะ คราวนี้เราก็ได้ storyboard ที่พร้อมสำหรับจะวาง UI ต่างๆ กันแล้วจ๊ะ

สิ่งที่เราจะเอามาวางบน UITableViewCell จะประกอบด้วย UIImageView UILabel และ UIButton เมื่อวางแล้วจัด Layout ตามภาพค่ะ

( ส่วนของ UIButton เนื่องจากค่าเริ่มต้นเราต้องการให้เป็นปุ่มภาพดาวว่างๆ ดังนั้นส่วนของ Attributes Inspector ตรง image จึงเลือกเป็น fav2.png ที่เป็นภาพดาวว่างๆ นั่นเองค่ะ )

ก่อนจะไปเขียน Code กัน ให้ประกาศ Datasource และ Delegate ให้เรียบร้อยด้วยนะคะ (เดี๋ยวลืมน่ะ)

มา... เขียน Code กันได้ละ อย่างแรกเราจะสร้าง File สำหรับ Class ข้อมูลของเรา (อยากรู้วิธีสร้าง Class ลองย้อนไปดูที่ CollectionView นะจ๊ะ) ดังนั้นเราจะสร้าง File country.swift กัน โดยในไฟล์จะมี Code ดังนี้

File ถัดมาที่เราจะสร้างเป็นไฟล์ที่มี subclass เป็น UITableViwCell ซึ่งในตัวอย่างนี้เราจะสร้าง File ที่ชื่อ listDataTableViewCell.swift เพื่อให้ File นี้ควบคุม UITableViewCell ของเรา เราจำเป็นต้องกำหนด Identity Inspector Class เป็น File ของเราดังนี้

เมื่อกำหนดแล้วที่เหลือคือ ประกาศ Outlet ให้กับ UI ที่อยู่บน UITableViewCell

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

(เพิ่มให้หน่อยค่ะ self.imgView.frame.size.width/2 เป็นการทำให้ภาพเป็นวงกลมนะ)

เมื่อเราได้ File เรียบร้อย ที่เหลือคือนำไปใช้งานแล้วค่ะ ไปเขียน Code ที่ไฟล์ ViewController.swift ได้เลยค่ะ

เริ่มจากที่ด้านบน Class ประกาศ UITableViewDataSource และ UITableViewDelegate ค่ะ (ของเดิมเลยค่ะ) จากนั้นนำข้อมูลไปแสดงบน Cell

--- เนื่องจากเป็นของเดิม คงไม่อธิบายอะไรเยอะนะคะ ---

ที่นี้สิ่งที่เราสนใจคือ เมื่อผู้ใช้งาน slide ที่ cell จะมีปุ่มที่สามารถทำงานได้เกิดขึ้น เราจะใช้ Function ดังนี้ค่ะ

จาก Code ข้างต้น เมื่อ slide แล้ว เราจะได้ปุ่ม share ที่มีพื้นสีน้ำเงิน สิ่งที่ตามมาคือ เมื่อกดปุ่มแล้วเราอยากให้ทำงานอะไร ก็ขึ้นอยู่กับว่าเราจะเขียนคำสั่งแล้วค่ะ เนื่องจากเราอยากได้ว่าให้ share ไปที่ facebook ของเรา ถ้าอย่างนั้น ณ ตำแหน่งที่ลูกศรชี้อยู่ให้จึงเรียกใช้ Function shareToFacebook โดยส่งค่าที่ต้องการให้ share ไปด้วยนั่นเอง

แทรกนิดหนึ่งค่ะ เราจะเขียนคำสั่ง share facebook เราจึงต้อง import library social ด้วยคำสั่ง import Social ไว้ด้านบนสุดเหนือการประกาศ class และที่ project -> General ส่วนของ Linked Frameworks and Libraries ให้ + Social.framework เข้าไปด้วยนะคะ