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


はじめに

Visual Stuido for Mac の Xamarin.iOS で、iPhone アプリにテーブルビューを追加しようとしたら、思いの外ハマったので技術メモです。

まず、Xamarin のテーブルビューの情報が極端に少ないです。

また、Xamarin だと Swift と実装方法が異なるのに、日本語サイトの情報が間違っていてそれに気がつくまでに時間がかかりました。

ここで掲載しているソースは動作確認ができているので現時点では動作すると思います。

StoryBoard にテーブルビューとセルビューを追加

まずは StoryBoard にテーブルビューとセルビューを以下のように追加します。

どちらにもテーブルビューには名前 (“tableView")、セルビューには identifier (“cell")をつけるのを忘れないでください。(カッコ内の名称は随意)

f:id:fnyablog:20180907223328p:plain

ソースコードを修正

ViewController.cs のソースコードを以下のように修正します。

細かい説明は省きますので、コメントを参考にしてみてください。

using System;
using System.Collections;
using System.Collections.Generic;

using UIKit;

namespace iphone_tableview
{
    public partial class ViewController : UIViewController
    {
        protected ViewController(IntPtr handle) : base(handle)
        {
        }

        public override void ViewDidLoad()
        {
            base.ViewDidLoad();

            //追加
            var list = new List<string>();
            list.Add("おはようございます。");
            list.Add("こんにちは。");
            list.Add("こんばんは。");

            this.tableView.Source = new TableViewSource(list);
        }

        public override void DidReceiveMemoryWarning()
        {
            base.DidReceiveMemoryWarning();
        }

    }

    //クラスを追加
    public class TableViewSource : UITableViewSource
    {
        readonly List<string> list = new List<string>();

        public TableViewSource(List<string> _list)
        {
            list = _list;
        }

        public override nint RowsInSection(UITableView tableview, nint section)
        {
            return list.Count;
        }

        public override UITableViewCell GetCell(UITableView tableView, Foundation.NSIndexPath indexPath)
        {
            var cell = tableView.DequeueReusableCell("cell");

            //Cellが再利用できない場合は新規追加
            if (cell == null){
                cell = new UITableViewCell(UITableViewCellStyle.Default, "cell");
            }


            var text = list[indexPath.Row];
            cell.TextLabel.Text = text;
            return cell;
        }
    }
}

ソースコードを修正してデバッグ実行すると、正しく値が表示されていることが分かります。

f:id:fnyablog:20180907223458p:plain

おわりに

ざっとですが、Xamarin でテーブルビューを作成する方法をご紹介しましたが、いかがだったでしょうか?

簡単にできると思いきや苦戦するので油断は禁物ですね。

参考サイト