[Xamarin.Mac] セグエを使ったWindowの表示

今回はセグエ(画面と画面を接続するための部品)を使用して、別ウィンドウを表示する方法を見ていきます。

1.メイン画面の作成

はじめに、新規でCocoaアプリケーションプロジェクトを作成してください。

次に、ソリューションエクスプローラーからMain.storyboardを見つけ、ダブルクリックして開きます。

Xcodeが表示されるので、Buttonを1つ配置します。

2.サブウィンドウの追加

次にサブウィンドウを追加します。

オブジェクトライブラリからView Controllerを探して、デザインエリアにドラッグ&ドロップして追加してください。

配置したView Controllerには、表示したときにサブウィンドウであることがわかるようにLabelコントロールを配置して、「サブウィンドウ」という文字を設定しておきます。

Labelに表示する文字列は、Labelを選択状態にして、Attribute InspectorでTextプロパティを変更します。

3.サブウィンドウを表示する

次にButtonがクリックされたとき、配置されたサブウィンドウが表示されるようにしてみましょう。

1つめのView Controllerに配置したButtonを[control]キーを押しながらドラッグして、新しく配置したView Controllerの上でドロップします。

続いて、Action Segueダイアログが表示されます。このダイアログでは、接続する画面がどのように表示されるかを選択します。

ここではModalを選択することとします。

Modalを選択後は、新しく配置されたView Controllerに向かって矢印が接続されます。これがSegueです。

ここまで作成できたら[command]+[s]を押して保存をし、Visual Studioに戻ります。

実行ボタンを押して、動作を確認してみましょう。

はじめにメインウィンドウが表示されます。

Buttonをクリックすると、以下のようにサブウィンドウが表示されます。

Modal表示の場合は、サブウィンドウが閉じられるまで呼び出し元の画面を触ることはできません。

ここまで、1行もコードを書きませんでした。

このように単に画面を表示するだけであればコードを書かく必要はありません。

4.Action Segue

先ほど説明したようにAction Segueでは画面の表示方法を選択することができます。

Xcodeでサブウィンドウに接続された矢印(segue)を選択してKindを変更することでも表示方法を変更することができます。

それぞれがどのような画面になるかを見ていきましょう。なおModalについてはすでに説明済みなので割愛します。

4-1.Show

表示方法をShowにした場合は、Modalと同じようにサブウィンドウが表示されます。

Modalはサブウィンドウを閉じるまでメインウィンドウを触れませんが、Showはサブウィンドウが開いている状態でもメインウィンドウを触ることができます。

4-2.Sheet

Sheetは、メインウィンドウの上からスルスルッと下に向かって表示される画面になります。

サブウィンドウを閉じるには、コードを書く必要があります。これについては次回紹介します。

4-3.Popover

Popoverは吹き出しのように表示させることができます。

[Xamarin.Mac] シンプルなアプリを作ってみよう 〜アクションとアウトレット〜

今回は、前回作成した「MyFirstApp」に貼り付けたButtonがクリックされたときのコードを作成する方法を見ていきます。

1.準備

はじめに、Buttonの右側にLabelを配置して以下のように制約を設定してください。

Iビームは左、上、右に設定し、Heightにチェックを付けます。

左に設定したIビームは、画面の左端ではなく、すでに配置しているButtonの右端からの位置になることに注意してください。このように、制約を設定使用としている周りに部品がある場合は、その部品からの位置となります。

また、Widthにチェックを付けなかったのは、幅を画面に追従させるためです。

2.アウトレットの作成

アウトレットとは、配置した部品をコードから操作できるようにするための設定です。アウトレット接続などとも呼ばれます。

Interface Builderの右上の方にあるアシスタントエディタボタンをクリックして、アシスタントエディタを表示します。これによりインターフェースエディタとコードエディタを同時に表示することができます。

アシスタントエディタによってコードエディタが開かれると、自動的にViewController.mファイルが選択されます。

アウトレットを作成するにはViewController.hを選択する必要があるので、ファイルを選択して切り替えます。

それではLabeのアウトレット接続を作成します。

画面に貼り付けたLabelコントロールを[control]キーを押しながら、コードエディタの以下のコードの下にドラッグ&ドロップします。

@interface ViewController : NSViewController {
}

ドラッグ&ドロップすると、ダイアログが表示されます。Name欄には任意のアウトレット接続名称を入力して、[Connect]ボタンをクリックします。


作成されたアウトレット接続のコードを以下に示します。IBOutletとなっていることがアウトレットであることを表しています。

@property (assign) IBOutlet NSTextField *myLabel;

3.アクションの作成

続いて配置したボタンがクリックされたときのアクションを作成します。アクション接続とも呼びます。

アクション接続もアウトレット接続と同様の手順で作成することができます。

画面に貼り付けたButtonコントロールを[control]キーを押しながら、コードエディタにドラッグ&ドロップします。ドラッグ&ドロップする位置は先ほどのLabelのアウトレット接続の下にします。

ダイアログが開くので、Connectionに「Action」を指定し、Name欄に任意の名前を入力します。ここではbuttonClickedとします。

作成されたコードは以下のようになります。(IBAction)となっていることからアクションとして作成されていることがわかります。

- (IBAction)buttonClicked:(id)sender;

ここまでできたら一度保存をしておきましょう。

4.アクションコードの作成

ここまでで、アウトレット接続とアクション接続の作成が完了し、コードから操作できるようになりました。

Visual Studioに戻り、ソリューションエクスプローラーからViewController.designer.csを開くと、以下のようにアウトレットとアクションのコードが挿入されていることを確認できます。

挿入されているコードを確認できたら、今度はソリューションエクスプローラーでViewController.csをダブルクリックして開きます。

ViewDidLoadとというメソッドがあるので、以下のように編集します。ViewDidLoadは画面(ViewController)が表示されたときに実行されるメソッドです。今回はこのメソッドの中でLabelのテキストを初期化するコードを書いています。アウトレット接続で作成したmyLabelが、画面に貼り付けたLabelを表しています。あとはStringValueプロパティに表示したい文字をセットすれば、アプリの起動時に表示されます。

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

    // ラベルにテキストを表示する
    myLabel.StringValue = "クリック前です";
}

次に、Buttonがクリックされたときのコードを作成します。アクション接続はbuttonClickedという名前で作成したので以下のようにコードを作成します。このコードは、先ほどのViewDidLoadの下あたりに作成します(実際はどこでも構いません。自分がわかる場所に記載してください)。

// Buttonがクリックされたときのコード
partial void buttonClicked(Foundation.NSObject sender) {
    myLabel.StringValue = "クリックされました";
}

5.作成したアプリの実行確認

以上で今回の目的のコードは作成できたので、実際に起動して動作を確認してみましょう。画面上にある右向きの三角のボタンをクリックします。

ビルドが実行され、しばらくすると作成したアプリが起動します。

Button をクリックしてみましょう。以下のようにLabelの文字列が変わることが確認できれば成功です。

[Xamarin.Mac] シンプルなアプリを作ってみよう 〜UI部品の貼り付け編〜

今回はVS for Macで、Macアプリのプロジェクトを作成してUI部品を貼り付けるところまでを見ていきます。

画面のデザインはOS XのXcodeと連携しますので、インストールされていることを確認の上で作業ください。

1.プロジェクトの作成

はじめに、VS for Macを起動して、Cocoa Appプロジェクトを作成します。

Cocoa Appプロジェクトの作成方法については「[Xamarin.Mac] Visual StudioでMacアプリを作成する」の記事を参照してください。

今回はプロジェクト名を「MyFirstApp」とすることにします。

2.ストーリーボードの作成

ストーリーボードとは、拡張子が.storyboardというファイルで、画面レイアウトから遷移までを作成します。

新規でプロジェクトを作成すると、必ず1つ「Main.storyboard」というファイルが作成されます。

今回の目的は、このstoryboardにUI部品を配置して起動をすることです。

ソリューションエクスプローラーからMain.storyboardというファイルを見つけてダブルクリックしてください。

ダブルクリックをすると、XcodeのInterface Builderという画面デザイン専用のエディタが開きます。

VS for Macは、このInterface Builderとバックグラウンドでやりとりを行いながら、画面のデザインを行うようにできています。

よってXcodeでアプリを作成したことがあるユーザーであれば、何ができる画面なのかはすぐに理解いただけるかと思います。

3.UI部品を配置する

それではMain.storyboardにUI部品を配置してみましょう。

Interface Builderの右下で、Object Libraryを選択します。ここには、画面に貼り付けて使用できる様々なUI部品の一覧があります。一番下に文字を入力すると、その文字を含む部品が表示されます。

それでは、Buttonを貼り付けてみます。

UI部品はView Controllerに貼り付けます。View Controllerは、アプリのView(表示部分)です。Inteface Builderの真ん中のエリアに、画面が上と下に矢印でつながれて表示されています。上側の画面に部品を貼り付けるのではなく、下側の画面の方に貼り付けます。上側の画面は、画面の場所を提供していると考えると良いでしょう。アプリに表示する画面は1つとは限りません。用途によって様々な画面を表示します。現時点では、矢印で接続されている下側のView Controllerがアプリ起動時に表示されるようになっています。

下側のView Controllerに、Push Buttonを貼り付けると以下のようになります。

4.制約

貼り付けた部品には制約を設定する必要があります。

制約とは、画面のリサイズが行われたときに、部品の位置を追従させたり、部品のサイズを変更するかを設定します。

貼り付けたButtonを選択状態にして、Interface Builderの下にある「Add New Constraints」をクリックしてください。制約を設定する画面が表示されます。

画面の上部で赤い点線のIの形をした部分(以降Iビーム)をクリックすると、上下左右からの位置を固定することができます。ここでは上端と左端の位置が固定されるようにクリックをします。クリックするとIビームは点線から実線に変わります。

次に、幅と高さの制約を付けます、WidthとHeightのテキストボックスに任意のサイズを入力してチェックをします。これにより、ウィンドウのサイズが変更されたとしても、Buttonのサイズが維持されるようになります。

最後に[Add 4 Constraits]ボタンをクリックすると制約が付きます。

制約を付けたButtonは以下のように表示されます。制約を付けた部分に青い線が引かれていることを確認できます。

次回、Buttonがクリックされたときの動作を作成する予定です。