MENU
mobile-logo
Home / Developer  / iOS Developer  / เขียนแอปพลิเคชัน iOS ด้วย Swift การใช้งาน UITableView
iOS Developer Swift

เขียนแอปพลิเคชัน iOS ด้วย Swift การใช้งาน UITableView

7:26 AM
0
408Views

บทเรียนสำหรับผู้เริ่มต้นในการพัฒนาแอปพลิเคชันบนแพลตฟอร์ม iOS ด้วย XCode และ Swift (ในตัวอย่างใช้ XCode 10.2.1 และ Swift เวอร์ชัน 5) เรียกใช้ UITableView

ศึกษาบทเรียนก่อนหน้า เพื่อความสนุก:

บทเรียนนี้ให้ทำการสร้าง Single View App ขึ้นมาใหม่ แล้วให้ไปที่ Main.Storyboard เพื่อเรียกใช้งาน TableView มาใช้งาน

ลากไป ทำการผูก Contraint ใหม่ให้เรียบร้อย

ทำการผูก Constraint แบบนี้

ไปที่ Attribute Inspector แล้วทำการตั้งค่า TableView ดังนี้ เลือก Prototype Cells เป็น 1 เพื่อมี UITableViewCell ปรากฏขึ้นให้เราตั้งค่า Reuse Identifier

ตั้งชื่อ Identifier ของ Table View Cell ว่า “Cell” ขั้นตอนนี้สำคัญ

กลับไปที่ TableView แล้วคลิกค้างพร้อมกด Control ลากไปที่ไอคอน ViewController สีเหลือง

เลือก dataSource และทำอีกครั้งเลือก delegate

ไปที่ ViewController.swift ทำการแก้ไข Class ดังนี้จากเดิม:

Swift
1
class ViewController: UIViewController {

แก้ไขเป็น

Swift
1
class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {

หลังจากนั้น ประกาศตัวแปรต่อไปนี้ไว้ใต้คลาส นั่นคือ ชุด Array ของ String ว่า data:

Swift
1
2
var tableView : UITableView!
    var data:[String] = ["Asa Akira","Kalina Ryu","Tia Tanaka","Asia Carrera"]

สร้างฟังก์ชันใหม่ขึ้นว่าเพื่อจัดการ return row ของ UITableView ด้วยจำนวน Array

Swift
1
2
3
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return self.data.count
}

ประกาศอีกฟังก์ชันในการ Bind Data:

Swift
1
2
3
4
5
6
internal func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "Cell", for: indexPath)
        
        cell.textLabel?.text = self.data[indexPath.row]
        return cell
}

ดังนั้นภาพรวมจะเป็นดังนี้:

Swift
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
import UIKit
 
class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {
    
    var tableView : UITableView!
    var data:[String] = ["Asa Akira","Kalina Ryu","Tia Tanaka","Asia Carrera"]
    
    override func viewDidLoad() {
        super.viewDidLoad()
    }
 
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return self.data.count
    }
    
    internal func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "Cell", for: indexPath)
        
        cell.textLabel?.text = self.data[indexPath.row]
        return cell
    }
}

ทดสอบกันหน่อยดีกว่า

จะบอกว่าเรียบร้อยก็คงไม่ใช่เรามาทำ Style ของ UITableViewCell กันดีกว่าเลือก subtitle

เพิ่ม Code ต่อไปนี้ที่ Global

Swift
1
var detail:[String] = ["Rank #1 Toshy","Rank #2 VR","Rank #3 Retro","Rank #4 Classics"]

แล้วเพิ่มที่ func tableView()

Swift
1
cell.detailTextLabel?.text = self.detail[indexPath.row]

ทดสอบ:

ไปหาภาพมาใส่ดีกว่า เราไปเซฟภาพ นามสกุล .png ดังนี้ดีกว่า

ประกาศตัวแปร Array เพิ่มเติมดังนี้:

Swift
1
var images:[String] = ["A1.png","A2.png","A3.png","A4.png"]

แก้ไข fun tableView() ใหม่ดังนี้:

Swift
1
cell.imageView?.image = UIImage(named: images[indexPath.row])

ดังนั้นไฟล์ ViewController.swift จะเป็นดังนี้:

Swift
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
import UIKit
 
class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {
    
    var tableView : UITableView!
    var data:[String] = ["Asa Akira","Kalina Ryu","Tia Tanaka","Asia Carrera"]
    var detail:[String] = ["Rank #1 Toshy","Rank #2 VR","Rank #3 Retro","Rank #4 Classics"]
    var images:[String] = ["A1.png","A2.png","A3.png","A4.png"]
    
    override func viewDidLoad() {
        super.viewDidLoad()
    }
 
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return self.data.count
    }
    
    internal func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "Cell", for: indexPath)
        
        cell.textLabel?.text = self.data[indexPath.row]
        cell.detailTextLabel?.text = self.detail[indexPath.row]
        cell.imageView?.image = UIImage(named: images[indexPath.row])
        
        return cell
    }
}

เทสแอปพลิเคชันของเรากันหน่อย:

เสร็จแล้วการพัฒนาแอปพลิเคชันด้วย UITableView แบบง่ายลองเอาไปฝึกทำกันต่อนะครับ

Comments

POST TAGS:

daydevthailand@gmail.com

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

Review overview
NO COMMENTS

Sorry, the comment form is closed at this time.