Xamarin iOS – Using UITableView with Custom Cell

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 :

screen-shot-2016-11-02-at-12-30-37-pm

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 :

screen-shot-2016-11-02-at-12-49-20-pm

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 :

screen-shot-2016-11-02-at-12-52-36-pm

Jika anda memilih jenis selain “Custom” maka UITableViewCell akan memiliki tampilan simple  yang sudah memiliki format default dari iOS seperti berikut :

pizap-com14780667820401

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 :

screen-shot-2016-11-02-at-2-08-02-pm

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 :

screen-shot-2016-11-02-at-9-21-57-pm

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:

screen-shot-2016-11-02-at-9-29-05-pm

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 :

screen-shot-2016-11-02-at-9-51-28-pm

Selamat mencoba.. Happy coding..

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: