[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がクリックされたときの動作を作成する予定です。

[Xamarin.Mac] Visual Studio for MacでInterface Builderを使用する

前回の記事では、Visual  Studio for Macを使用してMac用アプリの新規プロジェクト作成方法を確認しました。

Visual Studio for Macは画面を編集する専用のエディタは持っていません。その代わり、XcodeのInterface Builderとシームレスに連携して画面のデザインを行うことができます。

Interface BuilderはXcodeに付属するユーザーインターフェスデザイナーでSwiftやObject-Cを使用して開発をしているユーザーにとってはなじみ深いものです。

VS for MacからInterface Builderを使うには

VS for Macのソリューションエクスプローラーで、拡張子が.storyboardというファイルをダブルクリックすると、Interface Builderが起動します。

一番左側がProject Navigation、その隣がInterface Hierarchy、続いてInterface Builder、Properties & Utilitesの4つのエリアから構成されています。

Project Navigation

このエリアでは、プロジェクトのファイルを確認することができ。.storyboardファイルを選択したときには、Interface Editorでデザインの編集を行うことができます。

Interface Hierarchy

このエリアでは各ビュー(ウィンドウ)に配置されている、コントロールの階層を確認および変更することができます。Interface Builder上でビューに配置されたコントロールをクリックして選択することもできますが、このエリアでコントロールを選択状態にすることもできます。

Interface Builder

ビュー(画面)のデザインを行うことができます。様々なUI部品を貼り付けて、サイズを変更したり、配置位置を設定することができます。

Properties & Utilities

このエリアはVisual Studioのプロパティウィンドウとツールボックスに似ています。Interface Editorで選択したUI部品のプロパティの変更や、選択しているファイル設定の変更を行うことができます。また、ビューに貼り付ける様々なUI部品はUtilitesエリアから選択して配置します。

Properties とUtilites の種類について

PropertiesとUtilitiesには以下のようなものがあります。

File Inspector

File Inspectorは編集中のxibファイルの名前やファイルの保存場所などを編集することができます。

Quick Help Inspector

Quick Help Inspectorは選択されている項目の説明を表示します。

Identity Inspector

Identity Inspectorは選択されたビューやUI部品の様々な属性を提供します。

Attribute Inspector

Attribute Inspectorは選択したビューやUI部品の様々な属性を編集することができます。

Size Inspector

Size Inspectorは選択されたUI部品の位置やサイズ、リサイズの設定を行うことができます。

Connections Inspector

Connections Inspectorは、選択したUI部品のアウトレットやアクションの接続を管理します。

Bindings Inspector

Bindings Inspectorは自動的にデータモデルをバインディングするように編集ができます。

Effects Inspector

Effects Inspectorを使用すると、アニメーションなどのコントロールにエフェクトを設定することができます。