November 3, 2016
by Sabit Huraira
Xamarin iOS – Using UITableView with Custom Cell
Salah satu control yang cukup sering digunakan pada pengembangan aplikasi adalah table. Pada iOS table sering ditampilkan dengan menggunakan sebuah control bernama UITableView (bagi anda yang familiar dengan Android, control ini mirip dengan ListView). Bagaimana menggunakan UITableView pada Xamarin?
Anda dapat menambahkan UITableView yang dipilih dari “toolbox” dan memasukkannya ke dalam UIViewController. Pada tulisan ini saya akan menambahkan UITableView ke dalam WelcomeController yang sudah dibuat pada tulisan sebelumnya. Tampilan design storyboard setelah penambahan UITableView adalah sebagai berikut :
Beri initial pada UITableView yang sudah ditambahkan dengan nama “My_Table”. UITableView akan menampilkan sekumpulan data dimana setiap row data akan diletakkan pada sebuah UITableViewCell. UITableViewCell sendiri secara default sudah include di dalam UITableView seperti gambar berikut :
Setiap UITableView dapat memiliki beberapa jenis UITableViewCell yang memiliki tampilan berbeda-beda sesuai kebutuhan. Pastikan anda memberi identitas “identifier” pada setiap UITableViewCell agar dapat dikenali oleh aplikasi, pada contoh ini saya akan berikan identifier pada cell saya dengan nama “Simple_Cell”.
UITableViewCell memiliki beberapa jenis tampilan untuk dipilih :
Jika anda memilih jenis selain “Custom” maka UITableViewCell akan memiliki tampilan simple yang sudah memiliki format default dari iOS seperti berikut :
Berikut adalah contoh membuat UITableView dengan tampilan “Right Detail”. Pertama-tama silahkan atur property UITableViewCell style anda dengan style “Right Detail”. Aplikasi yang kita buat akan membuat screen dengan sebuah UITableView yang akan menampilkan daftar nama football player beserta club-nya. Buat terlebih dahulu class model untuk Player, tambahkan sebuah class dengan nama “Player.cs” dan masukkan code berikut :
namespace ios_playground
{
public class Player
{
private string name;
private string club;
public Player(string name,string club)
{
this.name = name;
this.club = club;
}
public string Name
{
get { return this.name; }
}
public string Club
{
get { return this.club; }
}
}
}
UITableView akan menampilkan data source yang berasal dari class “UITableViewSource”. Class yang meng-extend UITableViewSource inilah yang akan mengeksuksi tampilan yang muncul pada setiap row data beserta event yang dilaksanakan pada setiap row. Buatlah sebuah class “SimpleSource” yang akan meng-extend class UITableViewSource dan masukkan code seperti berikut :
using System;
using System.Collections.Generic;
using Foundation;
using UIKit;
namespace ios_playground
{
public class SimpleSource : UITableViewSource
{
//variable yang menyimpan list data
List<Player> datas;
//identifier cell yang akan ditampilkan
string CellIdentifier = "Simple_Cell";
public SimpleSource(List<Player> datas)
{
this.datas = datas;
}
public override nint RowsInSection(UITableView tableview, nint section)
{
return datas.Count;
}
public override UITableViewCell GetCell(UITableView tableView, NSIndexPath indexPath)
{
UITableViewCell cell = tableView.DequeueReusableCell(CellIdentifier);
Player single_data = this.datas[indexPath.Row];
if (cell == null)
{
cell = new UITableViewCell(UITableViewCellStyle.Default, CellIdentifier);
}
//konfigurasi data.Name ke textLabel sedangkan data.Club ditampilkan pada detailTextLabel
cell.TextLabel.Text = single_data.Name;
cell.DetailTextLabel.Text = single_data.Club;
return cell;
}
}
}
Class di atas menampilkan row data class Player yang dikirim dari parameter constructor. Untuk menampilkan data tersebut pada UITableView WelcomeController, masukkan code berikut pada class “WelcomeController”.
//definisikan variabel datas untuk menyimpan kumpulan data “Player”
private List<Player> datas;
public WelcomeController (IntPtr handle) : base (handle)
{
this.datas = new List<Player>();
}
Pada class ViewDidLoad(), masukkan code berikut :
this.datas.Add(new Player("Christiano Ronaldo", "Real Madrid"));
this.datas.Add(new Player("Lionel Messi", "Barcelona"));
this.datas.Add(new Player("Gareth Bale", "Real Madrid"));
this.datas.Add(new Player("Zlatan Ibrahimovic", "Manchester United"));
this.datas.Add(new Player("Mesut Ozil", "Arsenal"));
//konfigurasi source table dengan class SimpleSource
this.My_Table.Source = new SimpleSource(this.datas);
Code di atas menambahkan data Player ke dalam list, list yang sudah ada akan dilempar kedalam class “SimpleSource”. Tampilan berikut akan muncul setelah anda menjalankan aplikasi :
Custom UITableViewCell
Ada banyak kebutuhan dimana kita diharuskan menampilkan UITableViewCell dengan tampilan yang kompleks dan sering digunakan di berbagai tabel. Untuk mengatasi permasalahan tersebut kita dapat membuat sebuah custom UITableViewCell, berikut caranya.
Buatlah sebuah file “TableViewCell” baru :
Berilah nama “SimpleCustomCell” pada file tersebut. Setelah membuat SimpleCustomCell, maka akan terbentuk dua buah file yaitu “SimpleCustomCell.cs” sebagai class dari TableViewCell dan “SimpleCustomCell.xib” yang merupakan file UI dari TableViewCell. Buka data .xib dan buat UI seperti berikut:
TableViewCell terdiri dari tiga buah UILabel. Silahkan beri identitas nama pada masing-masing label: “label name” bernama “name”, “label club” bernama “club dan “label country” bernama “country”. Setelah memberi identitas masing-masing UILabel, berikan identitas “identifier” untuk UITableViewCell dengan nama “Custom_Cell”. Buka class “SimpleCustomCell.cs” dan masukkan code berikut :
using System;
using Foundation;
using UIKit;
namespace ios_playground
{
public partial class SimpleCustomCell : UITableViewCell
{
protected SimpleCustomCell(IntPtr handle) : base(handle)
{}
public SimpleCustomCell() : base()
{}
//update row with current data
public void UpdateCell(Player data)
{
Name.Text = data.Name;
Club.Text = data.Club;
Country.Text = data.Country;
}
}
}
Karena data player bertambah satu buah field yaitu field “Negara” maka tambahkan code berikut pada class Player:
private string country;
//lakukan perubahan pada constuctor
public Player(string name,string club, string country)
{
this.name = name;
this.club = club;
this.country = country;
}
public string Country
{
get { return this.country; }
}
Masukkan code berikut pada class “SimpleSource” :
using System;
using System.Collections.Generic;
using ObjCRuntime;
using Foundation;
using UIKit;
namespace ios_playground
{
public class SimpleSource : UITableViewSource
{
List<Player> datas;
NSString CellIdentifier = new NSString("Custom_Cell");
public SimpleSource(List<Player> datas)
{
this.datas = datas;
}
public override nint RowsInSection(UITableView tableview, nint section)
{
return datas.Count;
}
public override UITableViewCell GetCell(UITableView tableView, NSIndexPath indexPath)
{
Player single_data = this.datas[indexPath.Row];
SimpleCustomCell cell = tableView.DequeueReusableCell(CellIdentifier) as SimpleCustomCell;
if (cell == null)
{
cell = new SimpleCustomCell();
var views = NSBundle.MainBundle.LoadNib("SimpleCustomCell", cell, null);
cell = Runtime.GetNSObject(views.ValueAt(0)) as SimpleCustomCell;
}
//update data cell
cell.UpdateCell(single_data);
return cell;
}
}
}
Berikut tampilan aplikasi setelah dijalankan :
Selamat mencoba.. Happy coding..
Sabitlabscode 
Komentar