Xamarin.iOS ストーリーボード

【 Xamarin 記事一覧 】

Xamarinでは、バージョン3以降、iOSの画面設計（Storyboard）をVisualStudioから直接行う事ができるようになりました。

1 プロジェクト

ストーリーボードを使用するプロジェクトは、「テンプレート」 -「VisualC#」 - 「iOS」 - 「iPhone Storyboard」から作成できます。
そして、このプロジェクトでは、Info.plistにストーリーボードのファイル名「MainStoryboard」が記載され、このファイルからアプリケーションが初期化されることなります。

-- Info.plist ---
<plist version="1.0">
  <dict>
    <key>UIMainStoryboardFile</key>
    <string>MainStoryboard</string>

[2014.07.12追記]
Xamarin Ver3.1以降、プロジェクトテンプレートで、[iOS」の階層下の「iPhone Storyboard」は無くなりました。

新バージョンでは「iOS」の階層下で「iphone」を選択すると、６種類ほどのテンプレートが選択可能となり、そのうち「Blank App」以外は、全部 Storyboardを使用するテンプレートになりました。

2 初期画面となるビューコントローラ

初期画面となるビューコントローラは、MainStoryboard.storyboardの中で指定されています。
customClass="SingleView1ViewController"

-- MainStoryboard.storyboard --
<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="4451" systemVersion="13A461" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" initialViewController="vXZ-lx-hvc">
    <scenes>
        <scene sceneID="ufC-wZ-h7g">
            <objects>
                <viewController id="vXZ-lx-hvc" customClass="SingleView1ViewController" sceneMemberID="viewController" storyboardIdentifier="ViewId">
                    <view key="view" contentMode="scaleToFill" id="kh9-bI-dsS">

このため、ビューに対する処理は、クラスSingleView1ViewControllerで記述可能になります。

-- SingleView1ViewController.cs --
public partial class SingleView1ViewController : UIViewController {
    public override void ViewDidLoad() {
        base.ViewDidLoad();

        //ここに処理を記述する

3 ストーリボートからのイベント追加

プロパティ－Eventのページで、イベントを追加すると、MainStoryboard.storyboard及びdesigner.csにアクションが追加されます。
<action selector="Button1Click"

-- MainStoryboard.storyboard --
<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="4451" systemVersion="13A461" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" initialViewController="vXZ-lx-hvc">
    <scenes>
        <scene sceneID="ufC-wZ-h7g">
            <objects>
                <viewController id="vXZ-lx-hvc" customClass="SingleView1ViewController" sceneMemberID="viewController" storyboardIdentifier="ViewId">
                    <view key="view" contentMode="scaleToFill" id="kh9-bI-dsS">
                        <subviews>
                            <button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="roundedRect" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="1" fixedFrame="YES">
                                <connections>
                                    <action selector="Button1Click" destination="vXZ-lx-hvc" id="4" eventType="touchUpInside"/>
                                </connections>

-- SingleView1ViewController.designer.cs --
[Register ("SingleView1ViewController")]
partial class SingleView1ViewController{
    [Action ("Button1Click")]
    [GeneratedCode ("iOS Designer", "1.0")]
    partial void Button1Click (UIButton sender);

これにより、コントローラクラスの中では、インテリセンスでこのイベントを呼び出すことができるようになります。

-- SingleView1ViewController.cs --
public partial class SingleView1ViewController : UIViewController {
    public SingleView1ViewController(IntPtr handle)
        : base(handle) {
    }

    partial void Button1Click(UIButton sender){
	//ここにButton1がクリックされた際の処理を記述する	
        //throw new NotImplementedException();
    }

4 ストーリボートで貼ったオブジェクトへのアクセス

プロパティ－Widgetのページで、名前を指定すると、MainStoryboard.storyboard及びdesigner.csにアウトレットが追加されます。
<outlet property="button1"

-- MainStoryboard.storyboard --
<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="4451" systemVersion="13A461" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" initialViewController="vXZ-lx-hvc">
    <scenes>
        <scene sceneID="ufC-wZ-h7g">
            <objects>
                <viewController id="vXZ-lx-hvc" customClass="SingleView1ViewController" sceneMemberID="viewController" storyboardIdentifier="ViewId">
                    <connections>
                        <outlet property="button1" destination="1" id="name-outlet-1"/>
                    </connections>

-- SingleView1ViewController.designer.cs --
[Outlet]
[GeneratedCode ("iOS Designer", "1.0")]
UIButton button1 { get; set; }

void ReleaseDesignerOutlets (){
    if (button1 != null) {
        button1.Dispose ();
        button1 = null;
    }
}

これにより、コントローラクラスの中では、インテリセンスでこのオブジェトにアクセスできるようになります。

次のコードは、コード中でイベント処理を記述した例です。

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

    button1.TouchUpInside += (sender, args) => {
        //ここにButton1がクリックされた際の処理を記述する
    };
}

【 Xamarin 記事一覧 】