การทำ TableView บน iOS ด้วย ภาษา Swift ครับ เป็น เนื้อหา ของคอร์ส เขียนแอพไอโฟน https://www.androidthai.in.th/workshop-with-master-ung/184-course-basic-ios-with-swift สนใจ มาลุยกันเลยครับ

เป็นแบบนี้ครับ TableView จะ คล้ายๆ ListView หรือ RecyclerView บน Android แหละครับ เรามาเริ่มต้นทำกันครับ

 

เปิด Xcode ขึันมาเลยครับ และไปที่ Create a new Xcode project

 

 

เลือก Single View App เหมือนเดิมที่เคยทำครับ

ใส่ชื่อ Product Name ซะหน่อย

 

หาที่เก็บ

ได้มาละ Project iOS ของเรา คลิกที่ MainStoryBoard

และ Library ครับ

 

Search หาคำว่า Table จะเจอ Table View แบบนี้ครับ

ลากไปวางไว้ใน StoryBoard แบบนี้ครับ

กระจาย Table View ให้เต็มจอครับ

กำหนด Constraints ให้ ยึด 4 ด้านแบบนี้ครับ

คลิกที่ Table View (สังเกตุค่า Prototype Cells)

เพิ่ม Prototype Cells เป็น 1 ซะ

 ต่อไป คลิกที่ Prototype Cells ให้กำหนด Identifier เป็น คำว่า Cell (จะตั้งเป็นอะไร ก็ได้นะ ห้ามมีช่องว่าง)

 คลิกขวา แดรค Prototype Cells ไปปล่อยที่ View Controller 

และเลือก dataSource

ทำใหม่ คลิกขวาที่ Protytype Cells ลากไปปล่อยที่ View Controller (วงกลมสีเหลือง) และ เลือก delegate ครับ

เปิด ViewController.swift ออกมาครับ

มาสเตอร์ จะเอาคลาส ViewController มา สืบทอด UITableViewDelegate ก่อน

และ ต่อไป สืบทอด UITableViewDataSource

จะได้แบบนี้ครับ แต่จะมี Error คลิกที่ วงกลมสีแดง

การ Extend UITableViewDelegate และ UITableviewDataSource จะต้องมี Function ที่จำเป็น จะขออนุญาติสร้าง ให้ คลิก Fix

ได้มาละ Function tableView ที่ Return ค่าต่างกัน ตัวแรก จะ Return ค่า Int (จำนวนของข้อมูลที่จะสร้าง Table) ส่วนตัวที่สอง Return UITableViewCell

มาสเตอร์ ทดสอบง่ายๆ ก่อนนะครับ กำหนดให้สร้าง ตัวอักษรแค่ 1 บรรทัด ให้ return 1

และ ที่ fun tableView ตัวที่สอง คลิกที่ code

ประกาศตัวแปร cell 

เลือก UITbaleViewCell แบบ style: นะครับ

กด Tab จะมาที่ UITableViewCell.CellStyle

พิมพ์ UITa เลือก UITableViewCell

 จะได้แบบนี้ครับ ต่อไป Tab

ตามด้วย เลือก default

 

UITableViewCell.CellStyle.default กด Tab ไปที่  String?

จำชื่อ Prototype Cells ที่เราตั่ง Idenfifier ไว้ว่า Cell ได้นะ

กลับมาที่  ViewController.swift ไปที่ String?

 พิมพ์ "Cell" ไม่ต้องกังวลกับ Missing return นะ เดี๋ยวเราค่อย Return cell ที่หลังได้

 เอา cell ที่ได้มา

ใส่ค่า "Top Row" เข้าไป

แล้วค่อย return cell ไป

ลองทดสอบโค้ดดู จะได้แบบนี้ครับ

ภาพรวมทั้งหมดนะครับ

มาสเตอร์ ประกาศตัวแปรแบบ Array เป็น String ต่างๆ แบบนี้

 แก้ไข return 1 มาเป็น return nameString.count คือให้นับจำนวนของ สมาชิก Array

และให้ cell แสดง ค่าจาก Array แบบนี้

 

ไม่ยากนะครับ แต่ถ้าทำไม่ได้อย่างไร ? เรามาลองเรียน  iOS ด้วย Xcode บน Swift https://www.androidthai.in.th/workshop-with-master-ung/184-course-basic-ios-with-swift ครับ 

 

• Prev
• Next