Windows Azureモバイルサービスで始めるスマホアプリ開発

第3回 Xamarinを使ってiOS向けアプリを開発(後編)

この記事を読むのに必要な時間:およそ 3 分

詳細画面にタスク名を表示する

再びXcodeに戻り,タスク名を表示するように手を加えます。

ストーリーボードの見た目がiOS 6.0になっているので,iOS 7.0に変更します。右側のウインドウから「File Inspector」を選択して,View asの項目にて「iOS 7.0 and Later」を選択します。

見た目をiOS 7.0に変更します

見た目をiOS 7.0に変更します

「Todo Detail View Controller」のCellを選択して,右側のウインドウから「Attributes Inspector」を選択して,Styleを「Basic」にします。

見た目を調整します

見た目を調整します

右上の「Assistant Editor」を選択して,⁠QSTodoDetailViewController.h」を選択します。デフォルトでは「QSTodoDetailViewController.m」が選択されますのでご注意ください。

「QSTodoDetailViewController.h」を選択します

「QSTodoDetailViewController.h」を選択します

左側のCellから右側の「QSTodoDetailViewController.h」にcontrolキーを押しながら,ドラッグアンドドロップします。このとき,画像と同じ位置にドラッグアンドドロップするようにご注意ください。

ドラッグアンドドロップします

ドラッグアンドドロップします

ポップアップが表示されますので,⁠titleCell」と入力して,⁠Connect」をクリックします。

「titleCell」と入力して,⁠Connect」をクリックします

「titleCell」と入力して,「Connect」をクリックします

次のようにpropertyが追加されていることを確認します。

propertyの追加を確認します

propertyの追加を確認します

テーブルのレイアウトを変更します。

右上の「Standard Editor」をクリックし,左側の「Table View」をクリックして,右側のContentから「Static Cells」をクリックします。

テーブルのレイアウトを変更します

テーブルのレイアウトを変更します

左側の「Table View Section」をクリックして,右側のRowsを「1」に設定します。これで1行固定表示となります。

1行固定表示にします

1行固定表示にします

Headerに「タイトル」と入力してヘッダーの設定をします。

ヘッダーを設定します

ヘッダーを設定します

Xamarinに戻りまして,⁠QSTodoListViewController.cs」を開きます。

「QSTodoListViewController.cs」を開きます

「QSTodoListViewController.cs」を開きます

次のコードを `async Task RefreshAsync ()` メソッドの次の行に挿入します。詳細画面に遷移する前にタップしたアイテムを取得して,詳細画面の表示アイテムとして格納します。


public override void PrepareForSegue (UIStoryboardSegue segue, NSObject sender)
{
    base.PrepareForSegue (segue, sender);

    // 画面遷移先のコントローラーを取得して,違う場合は何もしない。
    var detailController = segue.DestinationViewController as QSTodoDetailViewController;
    if (detailController == null)
        return;

    // タップしたindexを取得してToDoItemを次の画面に渡す
    var selectedRowIndex = TableView.IndexPathForSelectedRow.Row;
    detailController.Item = todoService.Items[selectedRowIndex];
}

ここに挿入します

ここに挿入します

続いて「QSTodoDetailViewController.cs」を開きます。詳細画面から受け取るItemプロパティとそれを表示するViewDidLoad()メソッドを追加します。


public partial class QSTodoDetailViewController : UITableViewController
{
    public ToDoItem Item { get; set;    }

    public QSTodoDetailViewController (IntPtr handle) : base (handle)
    {
    }

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

        titleCell.TextLabel.Text = Item.Text;
    }
}

ここに挿入します

ここに挿入します

以上で完成です。実行してみましょう。次のように画面遷移できるようになっていると思います。

完成です

完成です

【コラム】Xamarin Studio Mac版の日本語入力でハングアップする

2014年3月30日現在,Xamarin Studio Mac版において,ソースコード上で日本語入力を行うとハングアップしてしまい,Xamarin Studioが反応を受け付けなくなってしまうことがあります。この現象はすでにバグとして報告されており,Bug 18385 - Xamarin Studio on Mac crashes when I type Japanese charactorsにていずれ修正されると思います。今は回避策として別のテキストエディタで日本語を入力してコピペすると良いです。

2014年6月9日追記

最新のXamarin Studio(5.0 build 878)にアップグレードすることで日本語入力でハングアップする問題は解消します。

Xamarin Studioの問題ではなく,描画に利用しているGTK+の問題だったようです。

まとめ

Xamarinを使用したiOSアプリ開発の雰囲気がつかめたかと思います。カメラで写真を追加したり,位置情報を取得して地図を表示したりなど,いろいろな機能を追加したいところですが,次回はAndroidのアプリ開発について説明したいと思います。

著者プロフィール

山本誠樹(やまもとまさき)

ブログ:http://nnasaki.hatenablog.com
Twitter:@nnasaki
Facebook:https://www.facebook.com/nnasaki
Github:https://github.com/nnasaki