Xamarin iOS – Expendable UITableView

Xamarin iOS – Expendable UITableView

Anggaplah saya ingin menampilkan sekumpulan data klub sepak bola ke dalam UITableView. Jika salah satu klub sepak bola di-klik, akan menampilkan daftar pemain pada data tersebut seperti gambaran berikut :

jan-03-2017-10-16-37

Pertama buatlah model untuk mendefinisikan data SoccerClub pada file “SoccerClubModel.cs”, masukkan code berikut :

 using System;
 using System.Collections.Generic;
 
 namespace ios_playground
 {
     public class SoccerClubModel
     {
         private List<string> players;
         private string name;
 
         public SoccerClubModel(string name)
         {
             this.name = name;
             players = new List<string>();
         }
 
         public string Name { 
             get { return this.name;}
         }
 
         public List<string> Players
         {
             get { return this.players; }
             set { this.players = value;}
         }
     }
 }

Code tersebut mendefinisikan class SoccerClubModel dengan variabel nama klub sepak bola dan list nama pemainnya.

Tambahkan sebuah UIViewController dan tambahkan UITableView di dalamnya. Beri nama UITableView tersebut dengan nama “tableExpend”. Paad UITableView yang telah ditambahkan terdapat sebuah UITableViewCell, atur property “Style” -nya menjadi “Right Detail” dan beri identifier “CellChild”.

Kita akan memasuki bagian utama yaitu membuat UITableViewSource yang dapat mendefinisikan Expendable table. Buatlah sebuah class “ExpendableSource” yang akan meng-extend class UITableViewSource. Masukkan code berikut :

 using System;
 using System.Collections.Generic;
 using ObjCRuntime;
 using Foundation;
 using UIKit;
 using CoreGraphics;
 
 namespace ios_playground
 {
     public class ExpendableSource : UITableViewSource
     {
         List<SoccerClubModel> datas;
         NSString childIdentifier = new NSString("CellChild");
         UITableView parentTable;
 
         private bool[] _isSectionOpen;
         private EventHandler _buttonClick;
 
         public ExpendableSource(UITableView parentTable,List<SoccerClubModel> datas)
         {
             this.datas = datas;
             this.parentTable = parentTable;
 
             _isSectionOpen = new bool[datas.Count];
 
             _buttonClick = (sender, e) =>
             {
                 var button = sender as UIButton;
                 var section = button.Tag;
                 _isSectionOpen[(int)section] = !_isSectionOpen[(int)section];
 
                 parentTable.ReloadData();
                 var paths = new NSIndexPath[RowsInSection(parentTable, section)];
                 for (int i = 0; i < paths.Length; i++)
                 {
                     paths[i] = NSIndexPath.FromItemSection(i, section);
                 }
 
                 parentTable.ReloadRows(paths, UITableViewRowAnimation.Automatic);
             };
         }
 
         public override nint NumberOfSections(UITableView tableView)
         {
             return datas.Count;
         }
 
         public override nint RowsInSection(UITableView tableview, nint section)
         {
             return _isSectionOpen[(int)section] ? datas[(int)section].Players.Count : 0;
         }
 
 
         public override nfloat GetHeightForHeader(UITableView tableView, nint section)
         {
             return 44f;
         }
 
         public override nfloat EstimatedHeightForHeader(UITableView tableView, nint section)
         {
             return 44f;
         }
 
         public override UIView GetViewForHeader(UITableView tableView, nint section)
         {
             UIView view = CustomView(datas[(int)section].Name, (int)section);
             return view;
         }
 
         public UIView CustomView(string caption,nint tag)
         {
             UIView view = new UIView(new System.Drawing.RectangleF(0, 0, 320, 20));
             view.BackgroundColor = UIColor.White;
 
             UILabel label = new UILabel();
             label.Font = UIFont.FromName("Helvetica-Bold", 16f);
             label.Frame = new System.Drawing.RectangleF(5, 10, 315, 20);
             label.Text = caption;
             view.AddSubview(label);
 
             UIButton hiddenButton = new UIButton(view.Bounds);
             hiddenButton.Tag = tag;
             hiddenButton.TouchUpInside += _buttonClick;
             view.AddSubview(hiddenButton);
 
             return view;
         }
 
         public override UITableViewCell GetCell(UITableView tableView, NSIndexPath indexPath)
         {
             UITableViewCell cell = tableView.DequeueReusableCell(childIdentifier);
             if (cell == null)
                 cell = new UITableViewCell(UITableViewCellStyle.Default, childIdentifier);
 
             cell.TextLabel.Text = datas[indexPath.Section].Players[indexPath.Row];
             cell.DetailTextLabel.Text = datas[indexPath.Section].Name;
 
             return cell;
 
         }
     }
 }
 

Berikut penjelasan code di atas :

  • Mendefinisikan variabel datas untuk menyimpan data yang ditampilkan, childIdentifier sebagai identifier dari UITableViewCell yang digunakan, dan parentTable yang akan menghubungkan class dengan tabel yang menggunakannya. Perlakuan yang terjadi pada variabel “parentTabel” akan berpengaruh langsung pada table yang memanggil class ini.
  • Pendefinisian variabel _isSectionOpen untuk variabel penyimpan data mana saja yang sedang menampilkan dan menyembunyikan daftar nama pemain, _buttonClick yang akan menyimpan suatu event.
  • Constructor akan mendefinisikan tableView, datas serta proses yang dilakukan untuk event _buttonClick
  • NumberOfSections sebagai jumlah section pada tabel
  • RowsInSection sebagai jumlah row pada masing-masing section
  • GetHeightForHeader dan EstimatedHeightForHeader untuk tinggi header
  • GetViewForHeader menentukan UIView apa yang ditampilkan pada section header. Header sendiri akan memanggil UIView dari fungsi CustomView() dimana fungsi ini akan menghasilkan sebuah UIView yang terdiri dari sebuah UILabel beserta hidden UIButton yang ketika di klik akan menjalankan event _buttonClick
  • Yang terakhir fungsi GetCell() adalah code yang menampilkan data pada masing-masing row data nama pemain sepak bola.

Selesai.. silahkan running aplikasi anda..

Thanks to https://github.com/b099l3/StackOverflow/tree/master/ExpandableTableView

Code dari tutorial ini dapat juga dilihat di https://github.com/sabithuraira/xamarin_ios_playground/commit/1eccd61bee5720009aef8af99613245bc1161c4d

Advertisements

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: