-->
Selamat datang di website www.imamkunblog.com - Tempat Sharing Tips Trik Android, Komputer, Internet dll

(Tutorial iOS) Custom UITableViewCell in UITableView

(Tutorial iOS) Custom UITableViewCell in UITableView


Hallo gaes, sudah usang cita rasanya tidak menulis tutorial mengenai iOS.
Nah pada kesempatan kali ini saya akan coba membahas tentang UITableView. UITableView merupakan widget yang biasa digunakan 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 jika ingin membuat baris yang lebih komplek maka kita perlu membuat custom UITableViewCell.
Oke singkat penjelasannya di atas, kini pribadi kita praktekkan aja.
Pertama buat project baru di Xcode, buat bahasa pemrogramannya memakai Swift tiga.



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






Setelah itu tambahkan beberapa widget di dalam Table View Cell, contohnya 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 menu EditorEmbed inNavigation Controller






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

import UIKit group 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 lalu override beberapa function menurut 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 group 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 hasilnya seperti ini :



Source code lengkap dapat dilihat di https://github.com/wimsonevel/CustomUITableViewCell
Sekian tutorial berdasarkan aku dan semoga berguna.
Jangan lupa share ke sosial media kalian. Thanks :)



















































Show comments
Hide comments

0 Response to "(Tutorial iOS) Custom UITableViewCell in UITableView"

Post a Comment

Berkomentar dengan Baik dan Jangan Buat Spam
1. Tidak semua pertanyaan sempat atau bisa dijawab.
3. Bagi yang mau tanya, sebelum bertanya, silakan cari dulu di Kotak Pencarian di Sidebar.
Thanks for visiting and the comment :)

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Adblock Detected

Like this blog? Keep us running by whitelisting this blog in your ad blocker

This is how to whitelisting this blog in your ad blocker

Thank you

×