Xamarin,iPhoneアプリでテーブルビューのセルにチェックボックスを表示する


以下の記事で、Xamarin を使用した際、iPhone アプリでテーブルビューのセルをカスタマイズする方法が分かりました。

また、以下の記事でチェックボックスをビューに表示する方法が分かりました。

では、この2つを組み合わせて、iPhone アプリのテーブルビューのセルにチェックボックスを表示するにはどうすればよいでしょうか。

これがこの記事の主題です。

以前の2記事がベースになっているため、2記事に目を通してから先に進んでください。

まず、Employee クラスに isRetired というブール型のプロパティを追加します。

using System;
namespace iphone_tableview
{
    public partial class Employee
    {
        public string Name { get; set; }
        public int Age { get; set; }
        public bool isRetired { get; set; }
    }
}

そして、EmployeeCell クラスのコンストラクタでセルにチェックボックスを追加します。

using Foundation;
using System;
using UIKit;
using SaturdayMP.XPlugins.iOS;

namespace iphone_tableview
{
    public partial class EmployeeCell : UITableViewCell
    {
        private BEMCheckBox checkBox;

        public EmployeeCell (IntPtr handle) : base (handle)
        {
            //チェックボックスの座標と大きさを渡し初期化
            checkBox = new BEMCheckBox(new CoreGraphics.CGRect(200, 10, 20, 20));

            //チェックボックスをカスタマイズ
            checkBox.TintColor = UIColor.Black;
            checkBox.OnTintColor = UIColor.Black;
            checkBox.OnCheckColor = UIColor.Black;
            checkBox.BoxType = BEMBoxType.Square;
            checkBox.AnimationDuration = 0; //アニメーション無効化

            //チェックボックスをセルに追加
            ContentView.AddSubview(checkBox);
        }


        internal void UpdateCell(Employee employee)
        {
            NameLabel.Text = employee.Name;
            AgeLabel.Text = employee.Age.ToString();
            this.checkBox.On = employee.isRetired;
        }
    }
}

ここまで分かれば、あとはテーブルビューの ViewController クラスを以下のように修正します。

3件のデータを追加していますが、2件目だけ isRetired が true になっていることに着目してください。

using System;
using System.Collections;
using System.Collections.Generic;
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, isRetired = false});
            employees.Add(new Employee { Name = "Tanaka", Age = 30, isRetired = true });
            employees.Add(new Employee { Name = "Sato", Age = 43, isRetired = false});

            //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;
        }
    }
}

デバッグして実行すると、以下のようにテーブルビューのセルにチェックボックスが表示され、しかも isRetired が true のものだけチェックが表示されているのが分かります。

f:id:fnyablog:20180907235219p:plain

これでテーブルビューのセルにチェックボックスを表示して、データが true の場合のみチェックをつけることができるようになりました。

本当はチェックボックスにチェックを入れた際に、テーブルビューが持っているデータの更新までできればよかったのですがそこまでは調べられませんでした。

それはまたの機会に調べようと思います。