Xamarin.iOS テーブルビュー（その２） セクション毎のグループ化

【 Xamarin 記事一覧 】

セクション表示

テーブルビューでは、セクション毎でグループ化して表示が可能です。
グループ化するためには、データ表示用クラスで、セクション数(NumberOfSections)、各セクションのヘッダ(TitleForHeader)等をオーバーライドします。
また、RowsInSectionでは、セクションごとのセル数を返し、GetCellでも対象データがセクション毎になることに注意が必要です。

public class ListSource : UITableViewSource {

    private readonly List<string> _ar = new List<string>();

    public ListSource() {
        //データの生成
        _ar.Add("A-001");//A 001-005 5個
        _ar.Add("A-002");
        _ar.Add("A-003");
        _ar.Add("A-004");
        _ar.Add("A-005");
        _ar.Add("B-001");//B 001-003 3個
        _ar.Add("B-002");
        _ar.Add("B-003");
        _ar.Add("C-001");//C 001-002 2個
        _ar.Add("C-002");
        _ar.Add("D-001");//D 001-005 5個
        _ar.Add("D-002");
        _ar.Add("D-003");
        _ar.Add("D-004");
        _ar.Add("D-005");
    }

    public override UITableViewCell GetCell(UITableView tableView, MonoTouch.Foundation.NSIndexPath indexPath) {
        // UITableViewCellの取得
        var cell = tableView.DequeueReusableCell("MyCell");
        if (cell == null) {
            // セルの生成（最初に各セルを１回だけ生成する）
            cell = new UITableViewCell(UITableViewCellStyle.Default, "MyCell");
        }
            
        //各セクションの分だけずれる
        switch (indexPath.Section) {
            case 0:
                cell.TextLabel.Text = _ar[indexPath.Row];
                break;
            case 1:
                cell.TextLabel.Text = _ar[indexPath.Row +5 ];
                break;
            case 2:
                cell.TextLabel.Text = _ar[indexPath.Row +5+3 ] ;
                break;
            case 3:
                cell.TextLabel.Text = _ar[indexPath.Row +5+3+2];
                break;

        }
        return cell;
    }

    //セクション数
    public override int NumberOfSections(UITableView tableView) {
        return 4; //A,B,C,D
    }

    //各セクションのセル数
    public override int RowsInSection(UITableView tableview, int section) {
        switch (section) {
            case 0: //A
                return 5;
            case 1://B
                return 3;
            case 2://C
                return 2;
            case 3://D
                return 5;
        }
        return 0;
    }

    //各セクションのヘッダ
    public override string TitleForHeader(UITableView tableView, int section) {
        switch (section) {
            case 0: //A
                return "GROUP-A";
            case 1://B
                return "GROUP-B";
            case 2://C
                return "GROUP-C";
            case 3://D
                return "GROUP-D";
        }
        return "";
    }

    //各セクションのフッタ
    public override string TitleForFooter(UITableView tableView, int section) {
        return "";
    }
}

インデックス表示

SectionIndexTitlesをオーバーライドすると、右端にインデックスが表示されるようになります。

    //インデックス
    public override string[] SectionIndexTitles(UITableView tableView) {
        return new string[]{"A","B","C","D"};
    }

※サンプルプロジェクトは、「ファイル」-「新規作成」ｰ「新しいプロジェクト」ｰ「テンプレート」
「Vieual C#」- 「iOS」-「iPhone Storybord」-「Single View Application」から作成されています。

【 Xamarin 記事一覧 】