Hallo gaes, sudah lama rasanya tidak menulis tutorial tentang 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, sekarang langsung kita praktekkan aja.
Pertama buat project baru di Xcode, untuk bahasa pemrogramannya menggunakan Swift 3.
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 Editor → Embed in → Navigation Controller
Sekarang kita masuk ke sesi codingnya. Buka file ViewController.swift kemudian implement UITableViewController seperti 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 hasilnya seperti ini :
Source code lengkap dapat dilihat di https://github.com/wimsonevel/CustomUITableViewCell
Sekian tutorial dari saya dan semoga bermanfaat.
Jangan lupa share ke sosial media kalian. Thanks :)
0 Komentar
Penulisan markup di komentar