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

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

more

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

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

more

VR/360MOVIE

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

more
CONTACT 052-253-9866

【Xcode】UIButtonで3パターン切り替えスイッチを作成!

2014.06.19 木曜日 06:53:01

a0006_000146_m_02

Objective-Cでオン・オフ切り替えスイッチを作成する場合は、通常はUISwitch等を使用すると思います。
ところが、UISwitchでは背景画像によるビジュアルの変更も出来ませんし、使い勝手もあまり良いとは言えません。
というか3パターン切り替えもできませんので、UIButtonにオン・オフ画像を適用させて切り替えを行えるものを作成しました。

今回はそのコードを紹介します。
かなり急いで作ったので綺麗にまとまったコードではありませんが、
シンプルな3パターン切り替えボタンが必要な場合は良いかもしれません。

変数の宣言

まずはViewController.mの@interface ViewController内に変数を宣言します。
変数名は適宜、分かりやすい名前に変更してください。

@interface ViewController ()
{
    IBOutlet UIImage *size_btn_img_1;
    IBOutlet UIButton *size_btn_1;
    IBOutlet UIImage *size_btn_img_2;
    IBOutlet UIButton *size_btn_2;
    IBOutlet UIImage *size_btn_img_3;
    IBOutlet UIButton *size_btn_3;
    NSInteger size_count;
}

ボタンの生成

続いて、viewDidLoad内でボタンを生成します。
予めProject内に各ボタンの画像をドラッグ&ドロップで用意しておきます。
今回は「images」というフォルダを作成してその中にまとめました。

スクリーンショット 2014-06-19 6.33.50

- (void)viewDidLoad
{
  //画像を読み込み
    size_btn_img_1 = [UIImage imageNamed:@"btn_1_on.png"];
    size_btn_img_2 = [UIImage imageNamed:@"btn_2_off.png"];
    size_btn_img_3 = [UIImage imageNamed:@"btn_3_off.png"];
    //インスタンス作成
    size_btn_1 = [[UIButton alloc] init];
    size_btn_2 = [[UIButton alloc] init];
    size_btn_3 = [[UIButton alloc] init];
    //各ボタンに画像を設定
    [size_btn_1 setBackgroundImage:size_btn_img_1 forState:UIControlStateNormal];
    [size_btn_2 setBackgroundImage:size_btn_img_2 forState:UIControlStateNormal];
    [size_btn_3 setBackgroundImage:size_btn_img_3 forState:UIControlStateNormal];
    //座標、サイズを指定します。必要に応じて変更してください。
    size_btn_1.frame = CGRectMake(20, 130, 81, 81);
    size_btn_2.frame = CGRectMake(120, 130, 81, 81);
    size_btn_3.frame = CGRectMake(220, 130, 81, 81);
    //viewへ生成
    [size_btn_1 addTarget:self action:@selector(btn1on:) forControlEvents:UIControlEventTouchDown];
    [size_btn_2 addTarget:self action:@selector(btn2on:) forControlEvents:UIControlEventTouchDown];
    [size_btn_3 addTarget:self action:@selector(btn3on:) forControlEvents:UIControlEventTouchDown];
    [self.view addSubview:size_btn_1];
    [self.view addSubview:size_btn_2];
    [self.view addSubview:size_btn_3];
    
    //デフォルトはボタン1がオンになるようにしておきます。
    size_count = 1;
}

各ボタンのタップ時の画像を指定

ボタンを選択した際の切り替え画像を指定します。
各イベント内に処理を追記したり、size_countの値で分岐させたりといったことが可能です。

- (void)btn1on:(id)sender{
    size_count = 1;
    [size_btn_1 setBackgroundImage:[UIImage imageNamed:@"btn_1_on.png"] forState:UIControlStateNormal];
    [size_btn_2 setBackgroundImage:[UIImage imageNamed:@"btn_2_off.png"] forState:UIControlStateNormal];
    [size_btn_3 setBackgroundImage:[UIImage imageNamed:@"btn_3_off.png"] forState:UIControlStateNormal];
    
}
- (void)btn2on:(id)sender{
    size_count = 2;
    [size_btn_1 setBackgroundImage:[UIImage imageNamed:@"btn_1_off.png"] forState:UIControlStateNormal];
    [size_btn_2 setBackgroundImage:[UIImage imageNamed:@"btn_2_on.png"] forState:UIControlStateNormal];
    [size_btn_3 setBackgroundImage:[UIImage imageNamed:@"btn_3_off.png"] forState:UIControlStateNormal];
    
}
- (void)btn3on:(id)sender{
    size_count = 3;
    [size_btn_1 setBackgroundImage:[UIImage imageNamed:@"btn_1_off.png"] forState:UIControlStateNormal];
    [size_btn_2 setBackgroundImage:[UIImage imageNamed:@"btn_2_off.png"] forState:UIControlStateNormal];
    [size_btn_3 setBackgroundImage:[UIImage imageNamed:@"btn_3_on.png"] forState:UIControlStateNormal];
    
}


すぐ動くので、パッと設置したい場合は良いのではないでしょうか。
これから時間を見つけてブラッシュアップしていきたいですね!

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

田中 義弘

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

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