IBOutletとIBAction:関連付けでラクラクパーツを配置しよう

IBとは

まず、IBとは「Interface Builder」の略ですが、“マウスで直感的にパーツなどを配置できる便利ソフト”のようなものです。

本来、プログラムで「座標◯◯」に△△のパーツを配置すると書くところを、
xibファイル(storyboardファイル)上で以下図のように、ドラッグ&ドロップして配置したり、拡大縮小、色の決定なども全てマウスで出来てしまう訳です。
ib01

しかし、配置した後、実際に表示を切り替えたり、動作を加えるのはプログラム上です。

IBOutletとは

IBOutletとは、パーツ自体をプログラムで定義した変数に紐付けるものです。

例)
まず、xibファイル(.xib)上に図のようにボタンを適当に配置します。
ib02

 

以下のようにヘッダーファイル(.h)で、ボタン変数を定義して下さい。

#import <UIKit/UIKit.h>

@interface TestViewController : UIViewController
{
    UIButton *btn;
}

@end

しかし、これだけではbtnがxibファイル上に設置したボタンを意味するとは分かりません。そこで関連付けする必要があります。

IBOutletの使い方:関連付けの3ステップ

ステップ1
まず、ヘッダーファイルにさらに以下の1文を追加します。

#import 

@interface TestViewController : UIViewController
{
    UIButton *btn;
}

@property (nonatomic, retain) IBOutlet UIButton *btn;

@end

ステップ2
次に、深い意味は考えず、一旦ソースファイル(.m)に以下赤字部分を追記します。
特に、「@synthesize〜の部分は必ず書きます」

@interface TestViewController ()

@end

@implementation TestViewController

@synthesize btn;

- (void)dealloc {
    [btn release];
    [super dealloc];
}

- (void)viewDidLoad

ステップ3
最後に、xibファイル上のコネクションインスペクタという部分から、以下のように紐付けします(クリックで拡大)。
①パーツを選択
コネクションインスペクタを選択
③『New Referencing Outlets』から『File’s Owner』へドラッグ&ドロップ
ib03

④最後にドラッグ&ドロップで“ドロップ”する際に、ヘッダーファイルで定義した変数名を選択。
ib04

 

以上で完了となります。
これで、ソースファイル内で自由に『btn』が使えるようになります。

試しに、viewDidLoad内に、以下のコードを書いてみます。

- (void)viewDidLoad
{
    [super viewDidLoad];
	// Do any additional setup after loading the view, typically from a nib.
    
    [btn setTitle:@"ららら" forState:UIControlStateNormal];
}

シミュレーターで実行すると、ボタン表示が「ららら」になっています。
ib05

 

IBActionとは

IBActionとは、パーツに何か変化を加えたときの動作をプログラムへ引き渡すものです。

例えば、先ほどボタンを配置して「IBOutlet」で関連付けしましたが、これだけではボタンを押しても何も起こりません。そこで、プログラム上にボタンを押した際に実行するメソッドを書き、それを紐付ける必要があります。実際に具体例でみてみます。

IBActionの使い方:関連付けの3ステップ

ステップ1
まず、ヘッダーファイルに以下の1文を追加します。
BtnPushの部分はメソッド名に相当し、好きに名前をつけて構いません。

#import <UIKit/UIKit.h>

@interface TestViewController : UIViewController
{
    UIButton *btn;
}

@property (nonatomic, retain) IBOutlet UIButton *btn;

- (IBAction)BtnPush:(id)sender;

@end

ステップ2
次に、ソースファイル(.m)にメソッドを追加します。
NSLogの行は書かなくてもよいですが、ボタンが押されたことをコンソールで確かめるために、ここでは書いておきます。

- (void)dealloc {
    [btn release];
    [super dealloc];
}

- (IBAction)BtnPush:(id)sender {
    
    NSLog(@"ボタンが押されました");
    
}

- (void)viewDidLoad

ステップ3
最後に、xibファイル上のコネクションインスペクタという部分から、以下のように紐付けします(クリックで拡大)。
①パーツを選択
コネクションインスペクタを選択
③『使うイベント』から『File’s Owner』へドラッグ&ドロップ
ib06

④最後にドラッグ&ドロップで“ドロップ”する際に、ヘッダーファイルで定義したメソッド名を選択。
ib07

さて、ここで『使うイベント』と書きましたが、
パーツに“どのような”変化が加わったときに動作を起こすか決めることができます。これが『イベント』です。例えば、今回使った「Touch Down」は、ボタンが押し込まれた際に動作が起こるものです。他にもボタンを押して指を離したときに動作を起こす「Touch Up Inside」などいくつか種類がありますので、詳細は「イベントの種類」でご確認下さい。

以上で完了となります。
これで、ソースファイル内で自由に『btn』が使えるようになります。

試しにシミュレーターで実行してボタンを押してみます。
コンソールに、「ボタンが押されました」と表示されます。
ib08

まとめ

IBOutletもIBActionも、大きく以下の4つの作業で準備が完了します。

  • パーツのxibファイル(storyboard)への配置
  • ヘッダーファイルでの定義
  • ソースファイルへの必要事項追記
  • コネクションインスペクタを使った紐付け

この作業に慣れるとサクサク進みます。
あと、個人的には最後の紐付けを忘れることがありますが、うまくいかない際には紐付け忘れを確認してみるとよいかもしれませn。

複雑なプログラムになると、このようなIBはあまり使わず、プログラムだけで全てパーツも生成するようになってきます。

コメントを残す

サブコンテンツ

このページの先頭へ