มาจัดเรียง Table ViewCell ด้วยการ Drag and Drop กันเถอะ

                     
                       ในครั้งนี้จะมาเรียนรู้การ Drag and Drop   หรือ การทำให้ขยับแล้ววางลงนั้นเองครับโดยปกติแล้วหลังจากบทความที่ผ่านๆมาจะเน้นไปด้านการทำเกี่ยวกับการตกแต่งสร้าง Table View ให้เป็นในส่วนของการใส่ข้อมูลตกแต่ง หรือ จะเป็นการไปถึงการใส่ข้อมูลบันทึกข้อมูลลงไปใน Firebaseแต่มาครั้งนี้จะเริ่มต้นโดยการเคลื่อนย้ายเพื่อการทำการจัดเรียง Cell ได้ภายในแอปพลิเคชั่นนั้นเองซึ่งสามารถนำไปต่อยอดอย่างอื่นได้อีกซึ่งวันนี้เราจะมาแสดงวิธีการทำโดยจะทำออกมาในรูปแบบจัดเรียงนั้นเอง
     

                     มาเริ่มต้นการทำงานกันเลยนะครับโดยโปรแกรมที่เราใช้นั้นจะเป็นโปรแกรม 

xcode Ver.8.2.1 โดยใช้ 

และ

ใช้ swift language 3.0 ในการเขียน

มาเริ่มต้นกับการสร้างงานกันเลยนะครับโดยในบทความนี้จะเน้นการนำเสนอในรูปแบบstep by step

เพื่อให้เข้าใจต่อการอ่านถึงแม้ผู้อ่านจะเพิ่งเริ่มต้นเขียนแอปพลิเคชั่นนั้นเองครับ

โดยเริ่มแรกเลยเปิดโปรแกรม xcode แล้วไปยัง Tab bar ด้านบนของโปรแกรม

เพื่อทำการสร้างโปรเจคขึ้นมาครับ

File >  New > Project 

เลือก Single View Application

ตั้งชื่อให้เรียบร้อย

แล้วไปที่ด้านซ้ายของจอ กดที่ Main Story Board

ทำการลากปุ่ม Table View มาไว้ใน View Controller และ ทำการลากมาไว้ให้เต็มจอ

ทำการคลิ๊กที่  Table View เพื่อที่จะทำการกำหนดให้ วัตถุของเรานั้นไม่เคลื่อนไหวไปไหน

ถึงแม้ขนาดของขนาดหน้าจอจะเปลี่ยนไปตาม ฮาดแวร์ 

โดยการกดปุ่ม Add New Constraints ที่มุมขวาด้านล่างแล้วกำหนดค่าตามรูปแล้วกดปุ่ม Add

หลังจากนั้นใส่ Table View Cell เข้ามาแล้วไปแถบเครื่องมือด้านขวา 

แล้วเปลี่ยน ในช่อง Style  ให้เป็น Basic

มาในส่วน เชื่อมข้อมูลให้แสดงผลนั้นเรา คลิกที่ Table View แล้วกดปุ่ม Control ที่แป้นพิมพ์

กดค้างไว้แล้วไปปล่อยที่ ปุ่มเหลืองๆ หรือ ปุ่ม View Controller แล้วให้เลือก dataSource และ ทำซ้ำอีกรอบเพื่อเลือก delegate เพื่อนเป็นการเชื่อมข้อมูลนั้นเอง

ที่นี้มาดูในส่วนโค้ดกันบ้างครับ เนื่องจากเราจะทำการทำให้เคลื่อนไหว

กลับมาที่หน้า ViewController.swift แล้วทำการเพิ่ม UITableViewDataSource และ UITableViewDelegate ลงไปใน Class

ระวังถ้าใช้เวอร์ชั่นภาษาที่ต่ำกว่า 3.0 จะทำให้ไม่สามารถรันได้บน xcode เวอร์ชั่น 8 นี้

กดเลือกที่ Table View เพื่อทำการเตรียมลากไปยังโค้ดเพื่อมเชื่อมกันระหว่าง 

class ViewController.swift

โดยการกดปุ่ม control ที่คีบอร์ดพร้อมกับลากไปยัง class ViewController.swift ตามรูป

ดังภาพ ในภาพนี้ตั้งชื่อว่า tableView

ทำการประกาศชื่อ Cell โดยการกดปุ่มหัวแหลมทิ่มลง แล้วตั่งชื่อว่า CellName ใน identifier

หลังจากนั้นให้ประการตัวแปร เพื่อที่เอาไว้เก็บข้อมูลเพื่อที่จะได้นำไปแสดงได้ใน TableView

โดยในนี้ได้ประกาศเป็นตัวแปรที่ชื่อ name แล้วใน [ ] ให้ใส่ชื่อที่เราต้องการแสดงโดย

ใช้เครื่องหมาย "  "  เพื่อใส่ชื่อ และใช้ , เพื่อเพิ่มจำนวนชื่ออื่นๆเข้า

ใน Class เดียวกันนั้นให้ในตอนแรกที่เราเข้ามาใน Class ViewController.swift 

นั้นจะมี overfunction อยู่สองตัวให้ทำการใส่

tableView.setEditing(true, animated: true)

ดังในภาพใต้  override func viewDidLoad()

ในส่วนด้านล่างนั้นจะเป็น โค้ดในส่วนการเรียกค่าให้มาแสดงใน TableViewCell 

โดยจะประกอปด้วยทั้งหมด 5 func

ได้แก่ 1. func numberOfSectionsInTableView(in tableView: UITableView) -> Int

จำนวนใน TableView

2.func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int

จำนวนแถวที่เลือกใน TableView

3.func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell

เป็นการประกาศ Cell ใน TableView ในส่วนช่องสีเขียวจะแสดงให้เห็นว่า Swift 2 ไม่สามารถ ทำงานได้แล้วและโค้ดได้มีการเปลี่ยนแปลง

4.func tableView(_ tableView: UITableView, editingStyleForRowAt indexPath: IndexPath) -> UITableViewCellEditingStyle

เป็นการแก้ไขแถว ใน UITableViewCellEditingStyle

5.func tableView(_ tableView: UITableView, moveRowAt sourceIndexPath: IndexPath, to destinationIndexPath: IndexPath)

เป็นการทำงานที่ทำให้ ตัว Cell นั้นสามารถเคลื่อนไหวได้

อย่าลืม ถ้าตอนแรกประกาศตัวแปร หรือ ตั่งชื่อต่างจากในบทความนี้ในส่วนของโค้ดนั้นจะต้องเปลี่ยนแปลงตามชื่อที่คุณตั่งเอาไว้ตั้งแต่แรกไม่อย่างนั้นอาจจะไม่สามารถรันได้ หรือ ข้อมูลไม่แสดง ดังในตัวอย่างที่ใช้ name และ CellName 

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