Xamarin,iPhoneアプリのテーブルビューにカスタマイズしたセルを追加する

以下の記事でテーブルビューに通常のセルを追加する方法は分かったので、今度はカスタマイズしたセルをテーブルビューに追加する方法を調べてみました。

Xamarin.iOSでiPhoneアプリにテーブルビューを作成する

まず、storyboard で Table View を追加します。

f:id:fnyablog:20180907231344p:plain

次に、Table View の Table View Cell を選択し、以下のようにプロパティの Class フィールドにメソッド名を入力して Enterキーを押します。

f:id:fnyablog:20180907231429p:plain

すると以下のような EmployeeCell クラスが自動作成されます。

namespace iphone_tableview
{
    public partial class EmployeeCell : UITableViewCell
    {
        public EmployeeCell (IntPtr handle) : base (handle)
        {
        }
    }
}

セルを選択して、セルにラベルを２つ追加します。

f:id:fnyablog:20180907231546p:plain

Table View の Table View Cell > Identifier プロパティに「cell_id」を設定します。

そして、ラベルの１つ目の Name プロパティに「NameLabel」を、ラベルの２つ目の 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;
        }
    }
}