2015年6月12日金曜日

Xcode で InterfaceBuilder で作成したボタンをコードで操作する方法

概要

Xcode の InterfaceBuilder を使ってUIを作成した場合に、コード側と連携する方法を紹介します
今回はボタンを設置してそのボタンに対してコード側でいろいろと操作をしてみたいと思います

環境

  • Mac OS X 10.10.4
  • Xcode 6.3.2

InterfaceBuilderでボタンを設置する

Main.storyboard を選択して InterfaceBuilder を表示します
右側のコンポーネント一覧からボタンをドラッグアンドドロップして左の画面に設置します
View 配下でないとボタンは設置できません
とりあえず以下のようなになればOKです
setting_button.png

ボタン情報をコードに配置する

Xcodeの画面レイアウトを「Asistant editor」という分割画面にします
左側に InterfaceBuilder を表示させ右側にボタンを操作するクラスのヘッダファイルを表示します

InterfaceBuilder で設置したボタンを Control を押しながらコード側にドラッグアンドドロップします(言葉で説明するのが非常に難しい…)
d_and_d.png

コード側に配置したボタンの名前を入力します
input_button_name.png

この名前を元に InterfaceBuilder 側のボタンがどれであるか識別するので、後で変更する場合は注意してください

.h ファイルにはこんな感じで宣言されています

@property (weak, nonatomic) IBOutlet UIButton *button;

これで .m ファイルでボタンを操作できるようになります

ボタンのオブジェクトを操作してみる

実際にコード上でボタンオブジェクトを操作してみましょう
ボタンオブジェクトはviewDidLoad内で取得します
今回はUIButtonクラスのオブジェクトを操作して、ボタンに表示されるラベル情報を変更してみます

- (void)viewDidLoad {
    [super viewDidLoad];
    [self.button setTitle:@"ほげぼたん" forState:UIControlStateNormal];
}

ボタンオブジェクトはself.buttonで参照することができます
setTitleをコールしてボタンのラベルを変更しています

記載できたらCommand+rでビルドして実行してみるとラベルが変更されていることが確認できると思います

Tips

基本はself.で参照すればいいのですがサイズの変更がうまくできない現象に遭遇しました
UIButtonのサイズの変更は以下のように実施します

[self.button setFrame:CGRectMake(30,30,100,100)];

これがうまく動かなくて悩んでいたのですが、どうやら InterfaceBuilder で作成した UI コンポーネントは「Auto Layout」という機能がデフォルトでは有効になっているらしいくこれをdisableにしてあげることでコード上でもサイズをダイナミックに変更できるようになります
auto_layout_disable.png

0 件のコメント:

コメントを投稿