[3]:Interface Builder と Xcode を接続する方法

今回は、Interface Builder を使って、UITextField, UILabel, そして ボタンを配置し、Xcode で書いたコードと接続し、動作させてみます。

アプリケーションの仕様

1. ユーザーがテキストボックスをタップすると入力用のキーボードが表示される
2. ユーザーは自分の名前(任意の文字列)を入力する
3. 実行ボタンを押す
4. ボタンを押すとラベルが、「Hello! ユーザー名！」のような表示に更新される
5. もし、テキストボックスが空のまま実行されると、警告を表示させる

このチュートリアルでは、以下の記事を既に理解されている方を前提としています。

	
[2]:Interface Builder のみで Hello World
	
[1]:UITableViewでHelloWorldを表示させる

今回の流れ：

• View Based Projectの新規作成
• シンプルなユーザーインターフェースを作成
• インターフェースに接続するためのコードを作成
• インターフェースとコードを接続
• ユーザー入力によってインターフェースの表示を更新

View Based Projectの新規作成

上記のように今回作成するアプリケーションは１つのビューしか必要ないので、View-Based Applicationのテンプレートを使って作成します。

Xcodeを起動し、「新規プロジェクト」を選択します。

以下のようなウインドウが表示されたら、左ペイン内のiOS > Application が選択されているのを確認、「View-based Application」を選んで、「選択」ボタンを押す。

その後に表示されるプロジェクト名は「ViewBased」として保存。

ViewBasedViewController.xib をクリックし、インターフェースビルダーを起動します。起動すると以下のように４つのウインドウが現れると思います。

Interface builder について少し…

Library – 一番左のライブラリには、ビューに追加することが出来るコントロールがすべて表示されています。このチュートリアルでは、 TextField, Label, そして Buttonを使います。

その右隣の下側にあるウインドウに含まれるview は、このnibファイルの見た目を表します。File’s Owner は、インターフェースとプログラムのコードを接続するためのものです。

View – これは、あなたのiPhoneアプリのインターフェースです。ここにライブラリから必要なコントロールをドラッグ＆ドロップして配置します。

Attributes – これは、配置したコントロールの詳細設定を行うものです。

シンプルなユーザーインターフェースを作成

Text Field を追加 まず、ライブラリからText Field を選択し、view ウインドウに追加します。その際、ブルーの線が表示されることがありますが、これは配置の手助けになるガイドです。Text Field をお好みの場所に配置し、左右に伸ばしてください。 そして、配置したText Field に、Attributesにて、属性を追加します。 Text Field を選択し、Attributes ウインドウのタイトルが下図のように、Text Field Attributes となっていることを確認します。(違う名前になっている場合は、view ウインドウからText Field をクリックして選択します。)

• Attributes ウインドウ内の Placeholder の箇所で、Text Field のデフォルトで表示される文字設定を行います。
• Capitalize フィールドから Words を選択します。これは、すべての各単語を大文字にすることをXCodeに伝えます。
• Return Key のフィールドからDone を選択します。これは、キーボードのreturn キーがリターンではなく、Done(完了)であることを設定します。
• Clear When Edit Begins をチェックします。これは名前の通り、編集が始まると初期設定のテキストをクリアするということです。

Label を追加 ライブラリから Label をview にドラッグし追加します。Text Field と同様に適度に拡大しておきます。 Attributes 内の Text フィールドに「お名前を入力してください。」という案内文を設定します。 Button を追加 ライブラリから Round Rect Button をview にドラッグし追加します。お好みのサイズに変更しておきます。 Attributes 内の Title フィールドに「実行する」と入力し設定します。 以上でインターフェースの作成は完了です。 次は実行するプログラムのコードを記述していきます。保存したら Interface Builder は閉じてください。 インターフェースとコードを接続するファイルは、View Controller と呼ばれています。 ViewBasedViewController.h ファイルを以下の様に編集します。

#import <UIKit/UIKit.h>

@interface ViewBasedViewController : UIViewController {

IBOutlet UITextField *txtName;

IBOutlet UILabel *lblHello;

}

@property(nonatomic,retain) IBOutlet UITextField *txtName;

@property(nonatomic,retain) IBOutlet UILabel *lblHello;

-(IBAction) updateText:(id) sender;

@end

Interface Builder は、IBOutlets と IBAction を使って、コードと接続します。以下は各コードの説明です。

• IBOutlet UITextField *textName – interface builder 上のText Field に接続するためのアウトレットを作成します。Text Field からの情報を取得するために、この変数を使います。
• IBOutlet UILabel *lblHello – interface builder 上のlabelに接続するためのアウトレットを作成します。labelの値を設定するために、この変数を使います。

これらの変数を宣言したので、プロパティを設定する必要があります。 そうすることで、変数に属性を設定することが可能になります。 Retain とは、このオブジェクトのメモリを保持することをコンパイラに伝えます。(完了した時には、リリースする必要があることを忘れてはいかません。)さもなくば、インスタンス化された時点で解放されます。(?)

– (IBAction) updateText:(id) sender;

これは、インターフェースビルダーで作ったボタンがクリックされた時に呼び出されるアクションです。このヘッダーファイルで宣言しました。このアクション(コード)とインターフェースを接続するためにViewBasedViewController.xibファイルをダブルクリックしてInterface Builderを起動します。

View を接続する

viewの中の任意の場所をクリックします。AttributesウインドウのConnection(左から２番目のタブ、もしくはTools > Connections Inspector を選択)を表示させます。

Referencing Outlets の中から New Referencing Outlet という項目の右側にある○をクリック＆ドラッグし、File’s Owner のファイルの上で放します。すると、view というポップアップが出ると思うのでそれを選択して、view と File’s Owner を接続します。

Text Field , Labelを接続する

viewウインドウの中のText Field をクリックして選択します。AttributesウインドウのConnection(左から２番目のタブ、もしくはTools > Connections Inspector を選択)を表示させます。

Referencing Outlets の中から New Referencing Outlet という項目の右側にある○をクリック＆ドラッグし、File’s Owner のファイルの上で放します。すると、txtName というポップアップが出ると思うのでそれを選択して、Text Field と File’s Owner を接続します。

同様に、label(lblHello)も接続します。

Buttonを接続する

viewウインドウの中の Button をクリックして選択します。AttributesウインドウのConnection(左から２番目のタブ、もしくはTools > Connections Inspector を選択)を表示させます。

Events の中から Touch Up Inside という項目の右側にある○をクリック＆ドラッグし、File’s Owner のファイルの上で放します。すると、updateText というポップアップが出ると思うのでそれを選択して、Button と File’s Owner を接続します。

接続されると以下の図のように表示されます。

これですべてのコントロールが接続されました。 以上で、インターフェースビルダーとXCodeを接続する設定は完了です。

次に、XCode上からViewBasedViewController.m を開きます。これはupdateTextというアクションを実装するファイルですので、以下のようにファイルを編集します。

#import “ViewBasedViewController.h”

@implementation ViewBasedViewController

@synthesize txtName,lblHello;

-(IBAction) updateText:(id)sender{

NSString *text;

if ([txtName.text length] == 0) {

text = @”Error:名前を入力してください。“;

}

else {

text = [[NSString alloc] initWithFormat:@”こんにちは、%@さん！！“,txtName.text];

}

lblHello.text = text;

;

}

ここで記述したコードについて簡単に説明します。

@synthesize txtName,lblHello;

基本的に変数を作成すれば、“getter” や “setter” と呼ばれるメソッドを定義する必要があります。これらの関数は、変数の値を取得し、変数の値を設定します。

synthesize を設定することで、簡単にこれらのメソッドを実装することが出来ます。とても便利ですね。

次は、 updateText メソッドを実装します。まず、NSString型の変数textを宣言します。これはラベルに挿入する文字列を扱います。

次の if 行で Text Field 内に文字が入力されているかどうかを検証しています。

[txtName.text length] == 0

つまり、何も入力されていない状態でボタンがクリックされると「Error:名前を入力してください。」と表示されます。

ユーザーが何らかの文字を入力していれば、その文字が「txtName.text」に設定されます。 initWithFormat メソッドはC言語の printfin に似ています。

@”こんにちは、%@さん！！“,txtName.text

“%@” の箇所に、後ろで指定している txtName.text が挿入されます。

最後に、lblHello.text = text; で、入力されたテキストが lblHello.text ラベルに挿入されます。

最後の行の ; の宣言で、一時的にテキストフィールドに保存されているメモリを解放します。これはクラッシュの少ない、有能なアプリケーションを作るためには必ず書く必要があります。iPhone ではデスクトップPCなどに比べ、使えるメモリが限られているからです。

以上で、今回のアプリは完成です。シミュレータから実行してみてください。

以下の画面のように表示されればOKです。