以下の記事でテーブルビューに通常のセルを追加する方法は分かったので、今度はカスタマイズしたセルをテーブルビューに追加する方法を調べてみました。
まず、storyboard で Table View を追加します。
次に、Table View の Table View Cell を選択し、以下のように プロパティの Class フィールドにメソッド名を入力して Enterキーを押します。
すると以下のような EmployeeCell クラスが自動作成されます。
namespace iphone_tableview { public partial class EmployeeCell : UITableViewCell { public EmployeeCell (IntPtr handle) : base (handle) { } } }
セルを選択して、セルにラベルを2つ追加します。
Table View の Table View Cell > Identifier プロパティに「cell_id」を設定します。
そして、ラベルの1つ目の Name プロパティに「NameLabel」を、ラベルの2つ目の Name プロパティに「AgeLabel」を設定します。
Employee.cs ファイルに以下のように Employee クラスを作成します。
using System; namespace iphone_tableview { public partial class Employee { public string Name { get; set; } public int Age { get; set; } } }
EmployeeCell.cs を以下のように書き換えます。
using Foundation; using System; using UIKit; namespace iphone_tableview { public partial class EmployeeCell : UITableViewCell { public EmployeeCell (IntPtr handle) : base (handle) { } internal void UpdateCell(Employee employee) { NameLabel.Text = employee.Name; AgeLabel.Text = employee.Age.ToString(); } } }
ViewController.cs を以下のように書き換えます。
using Foundation; using UIKit; namespace iphone_tableview { public partial class ViewController : UIViewController { protected ViewController(IntPtr handle) : base(handle) { } public override void ViewDidLoad() { base.ViewDidLoad(); //追加 var employees = new List<Employee>(); employees.Add(new Employee { Name = "Yamada", Age = 22}); employees.Add(new Employee { Name = "Tanaka", Age = 30 }); employees.Add(new Employee { Name = "Sato", Age = 43}); //TableViewのソース指定 tableView.Source = new EmployeeViewSource(employees); tableView.RowHeight = UITableView.AutomaticDimension; tableView.EstimatedRowHeight = 40f; tableView.ReloadData(); } public override void DidReceiveMemoryWarning() { base.DidReceiveMemoryWarning(); } } //クラス追加 class EmployeeViewSource : UITableViewSource { List<Employee> employees; public EmployeeViewSource(List<Employee> employees) { this.employees = employees; } public override UITableViewCell GetCell(UITableView tableView, NSIndexPath indexPath) { var cell = (EmployeeCell)tableView.DequeueReusableCell("cell_id", indexPath); //Cellが再利用できない場合は新規追加 if (cell == null) { cell = (EmployeeCell)(new UITableViewCell(UITableViewCellStyle.Default, "cell_id")); } var employee = employees[indexPath.Row]; cell.UpdateCell(employee); return cell; } public override nint RowsInSection(UITableView tableview, nint section) { return employees.Count; } } }
デバッグで実行すると、以下のように表示されます。
問題ありませんね。
・参考サイト