Xamarin.iOS テーブルビュー（その３） スタイル指定と定型セル

【 Xamarin 記事一覧 】

1 スタイル UITableViewStyle

UITableViewのコンストラクタに２種類のスタイルを指定できます。
図の左が Plain で、右が Grouped です。

    //var table = new UITableView(View.Bounds, UITableViewStyle.Plain);  //スタイルPlain
    var table = new UITableView(View.Bounds, UITableViewStyle.Grouped);  //スタイルGrouped

iOS6と比べると、大分イメージが違います。

なお、ヘッダ及びフッタの表示は、次のようになっています。

//各セクションのヘッダ
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) {
    switch (section) {
        case 0: //A
            return "5 items";
        case 1://B
            return "3 items";
        case 2://C
            return "2 items";
        case 3://D
            return "5 items";
    }
    return "";
}

2 定型セル UITableViewCell

GetCell()でUITableViewCellの定型から４種類のセルを生成できます。
図は左から、Default、Subtitle、Value1、Value2を指定して作成したものです。

public override UITableViewCell GetCell(UITableView tableView, MonoTouch.Foundation.NSIndexPath indexPath){

    //以下の４種類の定型からUITableViewCellが作成できます。
    //var cell = new UITableViewCell(UITableViewCellStyle.Default, "MyCell");
    var cell = new UITableViewCell(UITableViewCellStyle.Subtitle, "MyCell");
    //var cell = new UITableViewCell (UITableViewCellStyle.Value1,  "MyCell");
    //var cell = new UITableViewCell (UITableViewCellStyle.Value2,  "MyCell");
    
    //各セルの内容は、次の要領で指定します。
    cell.TextLabel.Text = string.Format("Text-{0}",indexPath.Row);
    cell.DetailTextLabel.Text = string.Format("detailText-{0}", indexPath.Row); //Defaultの時、指定できません
    cell.ImageView.Image = UIImage.FromFile("Images/xamarin.png"); // Value2の時指定できません
    return cell;
}

3 カスタムセル

GetCell()で返すUITableViewCellを独自に生成することで、自由にセルを設計できます。

public override UITableViewCell GetCell(UITableView tableView, MonoTouch.Foundation.NSIndexPath indexPath){
    //セルの生成
    var cell = new UITableViewCell(UITableViewCellStyle.Default, "MyCell"){
        BackgroundColor = UIColor.FromRGB(255, 230, 230) //セルの背景色
    };

    //イメージの生成
    var imageView = new UIImageView{
        Image = UIImage.FromFile("Images/xamarin.png"),
        Frame = new RectangleF(5, 0, 40, 40)//表示領域
    };

    //テキストの生成(左)
    var text1 = new UILabel{
        Font = UIFont.BoldSystemFontOfSize(20f),//フォントサイズ
        TextColor = UIColor.Black,//テキストの色
        Text = string.Format("Text-{0}", indexPath.Row),
        Frame = new RectangleF(50, 10, 80, 20),//表示領域
    };

    //テキストの生成(右)
    var test2 = new UILabel{
        Font = UIFont.BoldSystemFontOfSize(10f),//フォントサイズ
        TextColor = UIColor.Red,//テキストの色
        Text = string.Format("detailText-{0}", indexPath.Row),
        Frame = new RectangleF(130, 20, 100, 10),//表示領域
    };

    //セルへの追加
    cell.Add(text1);
    cell.Add(test2);
    cell.Add(imageView);
    return cell;
}

【 Xamarin 記事一覧 】