(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 :)

Comments

Post a Comment

Popular posts from this blog

Pewarnaan Objek Geometri Di Java 2D

Image
Pewarnaan (filling) sanggup diterapkan ke dalam pembuatan objek geometri. Objek geometri sanggup digambar dengan method fill atau draw . Untuk menambahkan warna pada objek geometri, kita sanggup menambahkan method dari kelas Graphics. void setColor(Color c)  Objek Color didefinisikan sebagai sebuah warna. Kelas Color secara default memakai rentan warna RGB. Berikut ini yaitu pola penggunaan Color di Java 2D. /** * * @author Wim Sonevel */ import java.awt.*; import java.awt.geom.*; import javax.swing.*; public class SegiPanjangWarna extends JApplet { public static void main(String[] args) { JFrame frame = new JFrame(); frame.setTitle("Persegi Panjang Warna"); frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); JApplet applet = new SegiPanjangWarna(); applet.init(); frame.getContentPane().add(applet); frame.pack(); frame.setVisible(true); } @Override public void init() { JPan...
Read more

Tugas Komplemen Terakhir

(Ainun Najib) 1. Buat sebuah aplikasi berbasis GUI untuk registrasi siswa gres : - hitung nilai tes untuk mata pelajaran tertentu dan jikalau rata-rata <  70 maka gagal - inputkan data-data siswa dan simpan dalam database - tampilkan data dalam bentuk tabel - data sanggup disimpan, diedit, dihapus dan dicari (Moh. Fachrudin) 2. Buat sebuah aplikasi berbasis GUI untuk registrasi musyrif gres : - hitung nilai tes b.arab, b.ing, Afkar, dan Al-Quran dan jikalau rata - rata < 70 maka gagal - inputkan data-data siswa dan simpan dalam database - tampilkan data dalam bentuk tabel - data sanggup disimpan, diedit, dihapus dan dicari (Aulia) 3. Buat sebuah aplikasi berbasis GUI untuk menghitung nilai selesai suatu matakuliah dan berikan nilai huruf.    - Rumus nilai selesai = kiprah 20% + uts 30% + uas 50 %    - Berikan nilai karakter :       46-55 Nilai C         56-65 Nilai C+  ...
Read more

Konsep Oop Encapsulation

Image
Encapsulation biasa disebut dengan Information Hidding. Encapsulation merupakan kombinasi dari data dan method pada paket suatu kelas dan menyembunyikan implementasi detail dari user terhadap object. Hak jalan masuk diatur dalam sebuah access modifier yang diantaranya yakni : - private : hanya sanggup diakses oleh kelas itu sendiri - protected : hanya sanggup diakses dalam package dan kelas turunannya - public : sanggup diakses dimanapun - default : hanya sanggup diakses dalam package saja Manfaat dari encapsulation : - Modularitas : Source code dari sebuah class sanggup dikelola secara independen dari source code class yang lain. Perubahan internal pada sebuah class tidak akan besar lengan berkuasa bagi class yang menggunakannya. - Information Hiding : Penyembunyian gosip yang tidak perlu diketahui objek lain. Untuk mengakses gosip sanggup memakai mediator method yang dikenal dengan setter dan getter. Sebagai contoh, buatlah 3 kelas masing-masing di package yang berbed...
Read more