Table Viewの使い方

TableView

1. Xamarin Studio上でStory Boardを開く
2. Table View Controllerをドラッグ＆ドロップして追加
3. 追加したTable View Controllerの下部(黒いバー)をクリック
4. [Class]欄にクラス名を追加
5. 作成したクラスファイルが自動生成される
6. Table View Controllerの本体部分をクリック
7. NameにC#コードからアクセスするための名前を設定

TableView Source

TableViewにセットするためのDataSource用のクラスを新規作成する。

1. 新規クラス用のC#ファイルを追加する
2. UITableViewSourceクラスを継承する
3. RowsInSectionメソッドをオーバーライドし、表示する項目数を返す
4. GetCellメソッドをオーバーライドし、各セルの表示方法を設定する
5. RowSelectedメソッドをオーバーライドし、項目が選択された際の動作を記述する

TableSource.cs

/// <summary>
/// Table Source Class
/// </summary>
public class TableSource : UITableViewSource
{
    /// <summary>
    /// Table Item
    /// </summary>
    private string[] TableItems;

    /// <summary>
    /// Cell Identifier
    /// </summary>
    private const string CellIdentifier = "TableCell";

    /// <summary>
    /// Constructor
    /// </summary>
    /// <param name="items">Items</param>
    public TableSource(string[] items)
    {
        /* Set Table Items */
        this.TableItems = items;
    }

    /// <summary>
    /// Get Row Count In Section
    /// </summary>
    /// <returns>In Section</returns>
    /// <param name="tableview">Table View</param>
    /// <param name="section">Section</param>
    public override nint RowsInSection(UITableView tableview, nint section)
    {
        return TableItems.Length;
    }

    /// <summary>
    /// Get Table View Cell
    /// </summary>
    /// <returns>Table View Cell</returns>
    /// <param name="tableView">Table View</param>
    /// <param name="indexPath">Index Path</param>
    public override UITableViewCell GetCell(UITableView tableView, Foundation.NSIndexPath indexPath)
    {
        /* Get Table View Cell(Default : Create new Talbe View Cell) */
        var cell = tableView.DequeueReusableCell(CellIdentifier) ?? new UITableViewCell(UITableViewCellStyle.Value1, CellIdentifier);
        /* Show Disclosure Indicator of Cell */
        cell.Accessory = UITableViewCellAccessory.DisclosureIndicator;
        /* Set Cell label */
        cell.TextLabel.Text = this.TableItems[indexPath.Row];
        /* Get Label Length */
        var len = this.TableItems[indexPath.Row].Length;
        /* Set Cell Detail Label */
        cell.DetailTextLabel.Text = string.Format("{0} items", len);
        /* Set Cell Image */
        cell.ImageView.Image = UIImage.FromFile("Icons/Folder256.png");

        return cell;
    }

    /// <summary>
    /// Row Selected Event Handler
    /// </summary>
    /// <param name="tableView">Table View</param>
    /// <param name="indexPath">Index Path</param>
    public override void RowSelected(UITableView tableView, NSIndexPath indexPath)
    {
        /* Create Alert View */
        var alert = new UIAlertView("Row Selected", this.TableItems[indexPath.Row], null, "OK", null);
        /* Show Alert View */
        alert.Show();

        /* Deselect Row */
        tableView.DeselectRow(indexPath, true);
    }
}

TableView Controller

TableViewにセットするData Sourceを初期化する。
1. ViewDidLoadメソッドをオーバーライドする。
2. TableSourceクラスのインスタンスを生成する
3. TableViewのSourceプロパティにTableSourceインスタンスをセットする

TableViewController.cs

/// <summary>
/// Table View Controller
/// </summary>
partial class TableViewController : UITableViewController
{
    /// <summary>
    /// Constructor
    /// </summary>
    /// <param name="handle">Handle</param>
    public TableViewController(IntPtr handle) : base(handle)
    {
        /* Nothing to do */
    }

    /// <summary>
    /// View Did Load Event Handler
    /// </summary>
    public override void ViewDidLoad()
    {
        /* Base Method */
        base.ViewDidLoad();

        /* Create Table View Items */
        var items = new string[] { "Vegetables", "Fruits", "Flower Buds", "Legumes", "Bulbs", "Tubers" };
        /* Create Table View Source */
        var source = new TableSource(items);
        /* Set Table View Source */
        this.Categories.Source = source;
    }
}

実行画面