プロジェクションマッピング

エンターテインメントから工業利用まで、プロジェクションマッピングの活用・運用をお考えの方へ

more

インタラクティブ&サイネージ

情報表示用のデジタルサイネージから、センサーを利用したインタラクティブ要素などをお考えの方へ

more

VR/360MOVIE

VRHMD用コンテンツからプラットフォームを利用した360度ムービーを活用したPRをお考えの方へ

more
CONTACT 052-253-9866

【Xcode】Storyboardに配置したUIButtonの画像をタップ時に切り替える!

2014.07.06 日曜日 10:01:29

public-domain-images-free-stock-photos-high-quality-resolution-downloads-unsplash0074_02

先日「UIButtonで3パターン切り替えスイッチを作成! 」という記事で、
addsubviewで生成したButtonの画像をタップ時に切り替えるコードをご紹介しました。

今回、基本は同じなのですがもっと単純に、
Storyboardに配置してあったボタンの画像をタップ時に切り替える方法を紹介します。

ViewController.hへの記述

ViewController.h側への宣言を行います。

@interface ViewController : UIViewController
{
    int flash_on;
}
@property IBOutlet UIButton *flashBtn;
@end

ViewController.mへの記述

ViewController.mへボタンタップ時のアクションを設定します。

- (void)viewDidLoad {
    [super viewDidLoad];
    flash_on = 0;
}

-(IBAction)light:(id)sender {
   
    if(flash_on == 0 ){
        UIImage *img = [UIImage imageNamed:@"bt_flash_on.png"];
        [_flashBtn setBackgroundImage:img forState:UIControlStateNormal];
        flash_on = 1;
        //スイッチオン時の処理を記述できます

    }else{
        UIImage *img = [UIImage imageNamed:@"bt_flash.png"];
        [_flashBtn setBackgroundImage:img forState:UIControlStateNormal];
        flash_on = 0;
        //スイッチオフに戻った場合の処理を記述

    }
}

Storyboard側の設定

projectへ必要な画像をドラッグ&ドロップで追加します。
「images」フォルダを作って、その中へまとめました。
今回使用する画像は「bt_flash_on.png」「bt_flash.png」という名前です。

スクリーンショット 2014-07-06 9.32.21

StoryboardへUIButtonをドラッグ&ドロップで配置したら、Backgroundに画像を設定します。
設定したファイル名は「bt_flash.png」です。

スクリーンショット 2014-07-06 9.36.45

続いて、Storyboard上のUIButtonのOutlet接続を行います。
今回は以下のようになりました。

outlet_ss

以上で、タップ時に画像が切り替わる用になったと思います!
タップ時に処理を追加したりして使ってください!

Category:Development , iOS , Mac , Xcode     Tag:
Authorブログの著者について
田中 義弘

田中 義弘

イベントプロダクション・グラフィックデザイナーを経て、2010年3月に株式会社アイデアクラウドを設立。近年、WEBから得た技術をベースに、プロジェクションマッピング事業をはじめとした先端事業をスタート。

Our Business
最近の記事
人気記事
Our Project