[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] 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を使用すると、アニメーションなどのコントロールにエフェクトを設定することができます。

 

 

 

 

[Xamarin.Mac] Visual StudioでMacアプリを作成する

Visual Studio for Macを使用している方であれば、Mac用のアプリケーションを作成することができます。

今回は、新規プロジェクトの作成方法とプロジェクトに追加されたファイルがどのようなものかを見ていきます。

Macアプリ用のプロジェクトを作成してみよう

Mac用のアプリを作成するには、Visual Studio for Macで「新規プロジェクトの作成」で「新しいプロジェクト」のダイアログを表示します。

続いて左側で[Mac]-[アプリ]を選択して、右側の一覧で「Cocoa app」を選択し[次へ]ボタンをクリックします。

続いて下図のようにMacのアプリ構成の設定を行います。App Nameにアプリケーション名を、Organization Identifierには、企業URLを逆から入力します。企業URlがない場合は、とりあえず適当でも構いません。Dock Itemにチェックを付けると、デスクトップやDockに表示する名前を入力することができます。ターゲットはOS Xのどのバージョン以降で動作するアプリケーションとして開発するのかを選択します。以上の設定が完了したら[次へ]ボタンをクリックします。

Extensionsにチェックを付けると、アプリで使用するファイルの拡張子を設定をすることができます。今回は使用しないこととします。

次の画面ではプロジェクト名やソリューション名、保存場所といった設定を行うことができます。特に必要がなければデフォルト設定のままで[作成]ボタンをクリックします。

プロジェクトのファイルを確認しよう

プロジェクトの作成が完了すると、ソリューションエクスプローラーは以下のようになります。

Main.cs

Main.csはアプリケーションのエントリポイントです。アプリが起動されると最初に実行されるクラスとメソッドが追加されています。Mainめそっどの中ではアプリケーションのインスタンスを作成し、OSのイベントを処理できるようにしています。

using AppKit;

namespace MyApp
{
    static class MainClass
    {
        static void Main(string[] args)
        {
            NSApplication.Init();
            NSApplication.Main(args);
        }
    }
}

AppDelegate.cs

AppDelegate.csはOSからのイベントを受け取るクラスが実装されています。

DidFinishLaunchingメソッドは、アプリケーションのインスタンスが作成された後に実行され、アプリのウィンドウを作成してビューを表示する処理を実行します。

WillTerminateメソッドは、ユーザーやシステムがアプリケーションを終了しようとしたときに実行されます。アプリケーションが終了する前に、設定の保存や何かしらの処理を行いたい場合は、このメソッドにコードを追加します。

using AppKit;
using Foundation;

namespace MyApp
{
    [Register("AppDelegate")]
    public class AppDelegate : NSApplicationDelegate
    {
        public AppDelegate()
        {
        }

        public override void DidFinishLaunching(NSNotification notification)
        {
            // Insert code here to initialize your application
        }

        public override void WillTerminate(NSNotification notification)
        {
            // Insert code here to tear down your application
        }
    }
}

ViewController.cs

Xamarin.MacのアプリはMVCモデルです。ViewControllerはメインウィンドウのコントローラーを表すクラスで、ライフサイクルを管理します。

using System;

using AppKit;
using Foundation;

namespace MyApp
{
    public partial class ViewController : NSViewController
    {
        public ViewController(IntPtr handle) : base(handle)
        {
        }

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

            // Do any additional setup after loading the view.
        }

        public override NSObject RepresentedObject
        {
            get
            {
                return base.RepresentedObject;
            }
            set
            {
                base.RepresentedObject = value;
                // Update the view, if already loaded.
            }
        }
    }
}

ViewController.Designer.cs

ViewController.Designer.csファイルはユーザーインターフェースを作成したときに自動で作成されるファイルです。

Info.plist

Info.plistはアプリケーションに関する情報を入力することができます。新規プロジェクト作成時に入力した内容もここで確認/変更することができます。

Entitlement.plist

Entitlement.plistはアプリのサンドボックスやiCloudでの設定を行うことができます。