(Tutorial Ios) Custom Uitableviewcell In Uitableview

Hallo gaes, sudah usang rasanya tidak menulis tutorial wacana iOS.
Nah pada kesempatan kali ini aku akan coba membahas wacana UITableView. UITableView merupakan widget yang biasa dipakai untuk menampilkan data dalam bentuk list. Pada umumnya komponen di dalam UITableView disebut dengan UITableViewCell. Komponen UITableViewCell inilah yang mengisi setiap baris-baris di dalam list. Secara default, UITabelViewCell cuma berisi title dan subtitle. Maka dari itu jikalau ingin menciptakan baris yang lebih komplek maka kita perlu menciptakan custom UITableViewCell.

Oke singkat penjelasannya di atas, kini eksklusif kita praktekkan aja.

Pertama buat project gres di Xcode, untuk bahasa pemrogramannya memakai Swift 3.

Kemudian pada halaman storyboard-nya kita memakai Table View Controller. Drag and drop Table View Controller ke halaman storyboard, kemudian jadikan sebagai Root View Controller (alias tanda panah berada di Table View Controller).

Setelah itu tambahkan beberapa widget di dalam Table View Cell, misalnya di sini kita menambahkan Image View dan Label. Lalu letakkan dengan posisi sebagai berikut :

Embed Table View Controller tadi ke dalam Navigation Controller dengan cara klik sajian Editor → Embed in → Navigation Controller

Sekarang kita masuk ke sesi codingnya. Buka file ViewController.swift kemudian implement UITableViewController menyerupai berikut :

import UIKit  class ViewController: UITableViewController {      var foods = [Food(thumb: "rendang", name: "Rendang", country: "Indonesia"),                  Food(thumb: "nasi_goreng", name: "Nasi Goreng", country: "Indonesia"),                  Food(thumb: "sushi", name: "Sushi", country: "Japan"),                  Food(thumb: "tom_yum_goong", name: "Tom Yum Goong", country: "Thailand"),                  Food(thumb: "pad_thai", name: "Pad Thai", country: "Thailand"),                  Food(thumb: "som_tam", name: "Som Tam", country: "Thailand"),                  Food(thumb: "dim_sum", name: "Dim Sum", country: "Hongkong"),                  Food(thumb: "ramen", name: "Ramen", country: "Japan"),                  Food(thumb: "peking_duck", name: "Peking Duck", country: "China"),                  Food(thumb: "massaman_curry", name: "Massaman Curry", country: "Thailand")]          override func viewDidLoad() {         super.viewDidLoad()         // 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.     }  } 

Tambahkan type struct untuk item Food.

struct Food {     var thumb = String()     var name = String()     var country = String() } 

Tambahkan class CustomCell.

class CustomCell: UITableViewCell {      @IBOutlet weak var thumbImageView: UIImageView!     @IBOutlet weak var nameLabel: UILabel!     @IBOutlet weak var countryLabel: UILabel!      } 

Kemudian reference komponen dari Table View Cell di storyboard ke kelas CustomCell di atas.

Tambahkan extension di bawahnya kemudian override beberapa function dari TableView.

extension ViewController {          override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {         return foods.count     }          override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {                  let food = foods[indexPath.row]                  let cell = tableView.dequeueReusableCell(withIdentifier: "CustomCell", for: indexPath) as! CustomCell                  cell.thumbImageView.image = UIImage(named: food.thumb)                  cell.nameLabel?.text = food.name         cell.countryLabel.text = food.country                  return cell      }      } 

Source code lengkapnya jadi sebagai berikut :

import UIKit  class ViewController: UITableViewController {      var foods = [Food(thumb: "rendang", name: "Rendang", country: "Indonesia"),                  Food(thumb: "nasi_goreng", name: "Nasi Goreng", country: "Indonesia"),                  Food(thumb: "sushi", name: "Sushi", country: "Japan"),                  Food(thumb: "tom_yum_goong", name: "Tom Yum Goong", country: "Thailand"),                  Food(thumb: "pad_thai", name: "Pad Thai", country: "Thailand"),                  Food(thumb: "som_tam", name: "Som Tam", country: "Thailand"),                  Food(thumb: "dim_sum", name: "Dim Sum", country: "Hongkong"),                  Food(thumb: "ramen", name: "Ramen", country: "Japan"),                  Food(thumb: "peking_duck", name: "Peking Duck", country: "China"),                  Food(thumb: "massaman_curry", name: "Massaman Curry", country: "Thailand")]          override func viewDidLoad() {         super.viewDidLoad()         // 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.     }  }  struct Food {     var thumb = String()     var name = String()     var country = String() }  class CustomCell: UITableViewCell {      @IBOutlet weak var thumbImageView: UIImageView!     @IBOutlet weak var nameLabel: UILabel!     @IBOutlet weak var countryLabel: UILabel!      }  extension ViewController {          override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {         return foods.count     }          override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {                  let food = foods[indexPath.row]                  let cell = tableView.dequeueReusableCell(withIdentifier: "CustomCell", for: indexPath) as! CustomCell                  cell.thumbImageView.image = UIImage(named: food.thumb)                  cell.nameLabel?.text = food.name         cell.countryLabel.text = food.country                  return cell      }      }   

Build dan jalankan maka akhirnya menyerupai ini :

Source code lengkap sanggup dilihat di https://github.com/andronut/CustomUITableViewCell

Sekian tutorial dari aku dan biar bermanfaat.
Jangan lupa share ke sosial media kalian. Thanks :)