Tutorial Swift : Menggunakan TableView (List)

Kali ini kita akan mencoba membuat list dengan swift. Kita akan memanfaatkan TableView. Langsung saja kita membuat project baru dengan nama learningTableView jika ingin memberi nama berbeda silahkan gunakan nama project berbeda tidak akan menjadi masalah.

Membuat Project Swift Baru masrahman28

Jika sudah kita langsung saja masukan TableView ke View yang kita harapkan pada Main.storyboard kita

TableView pada XCode masrahman28

Kita drag and drop lalu kita setting constraint dari TableView yang kita buat untuk fill ke layar menjadi seperti di bawah ini

TableView pada View Main.storyboard masrahman28

Setelah itu kita tambahkan TableViewCell pada TableView yang telah kita tambahkan tadi serta rubah identifier dari TableViewCell menjadi TableCell seperti pada gambar di bawa ini

Menambahkan Table View Cell masrahman28

Selanjutnya kita akan coba tambahkan satu buah label pada TableCell yang telah kita sisipkan sebelumnya, bukan pada Table View ya dan gunakan Constraint agar ukuran label menjadi rata kiri dan rata kanan dengan View seperti pada gambar di bawah

Menambahkan Label masrahman28

Sekarang kita tambahkan satu buah Cocoa Touch Class dengan nama TableViewCell yang dimana SubClass nya ke UITableViewCell 

Menambahkan class baru untuk TableViewCell masrahman28

Jika sudah, kita hubungkan dengan TableCell yang telah kita tambahkan label sebelumnya

Menghubungkan Table View Cell dengan Class masrahman28

Sungguh panjang proses desain yang dilakukan untuk membuat list ya, sekarang saatnya kita untuk melakukan coding. Silahkan tambahkan label dengan nama txtLabel ke class TableViewCell dengan cara drag and drop untuk auto connect nya ya dengan View jadi seperti di bawah ini

import UIKit

class TableViewCell: UITableViewCell {

    @IBOutlet weak var txtLabel: UILabel!
    
    override func awakeFromNib() {
        super.awakeFromNib()
        // Initialization code
    }

    override func setSelected(_ selected: Bool, animated: Bool) {
        super.setSelected(selected, animated: animated)

        // Configure the view for the selected state
    }

}

Lalu kita tambahkan TableView ke class ViewController dengan nama tableList

@IBOutlet weak var tableList: UITableView!

Nah untuk penggunaan Table View kita menggunakan sub class lagi ke UITableViewDelegate, UITableViewDataSource contoh coding lengkapnya seperti ini

import UIKit

class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {

    @IBOutlet weak var tableList: UITableView!
    let list = ["Pertama", "Kedua", "Ketiga", "Keempat", "Kelima", "Keenam", "Ketujuh"]
    
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return list.count
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableList.dequeueReusableCell(withIdentifier: "TableCell") as! TableViewCell
        cell.txtLabel.text = list[indexPath.row]
        return cell
    }
    
    override func viewDidLoad() {
        super.viewDidLoad()
        tableList.delegate = self
        tableList.dataSource = self
        // Do any additional setup after loading the view, typically from a nib.
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
}

Dan aplikasi sudah dapat dijalankan dan seperti di bawah ini :)

List dengan menggunakan TableView Swift masrahman28

Download project lengkapnya Disini