読者です 読者をやめる 読者になる 読者になる

nigoblog

スタートアップのCMOブログ

Objective-Cでトグルボタンを作る

詳解 Objective-C 2.0 第3版

詳解 Objective-C 2.0 第3版

今回はObjective-Cのtipsを説明します。
今までは結構大きな話題(Gitやら)でしたが、今回は少し細かい話になります。

Tips第一弾として「トグルボタン」について説明します。

  1. トグルボタンってなに?
  2. 実装
  3. 応用編
  4. まとめ

トグルボタンってなに?

簡単にいうと
ON-OFFの切り替えができるボタン。
もっと簡単にいうと
スイッチ
したらスイッチでいいべさ
って思うでしょ?
でもスイッチに画像は付けられないので、スイッチに画像を付けたい場合はボタンをトグル化する必要があります。
そのやり方を今回説明します。

実装

実装の前にどういう方法かを予め説明します。
1. BOOL型フラグを用意する。
2. 呼び出し時にフラグにtrueを代入(別にfalseでもよい)。
3. ボタンを押した際にフラグの値を切り替える。
以上です。それでは実際にコードを説明。

~.h

@property ( readwrite ) BOOL toggle;

@property (nonatomic, retain) IBOutlet UIButton startBtn;

- (IBAction) pushStartBtn:(id)sender;

~.m viewDidLoad内

toggle = true;

~m pushStartBtn内

if(toggle){
//何かしらの動作
toggle = false;
}else{
//何かしらの動作
toggle = true;
}

こんな感じです。
特に説明の必要はないかもしれませんが、ボタンを押すと、
toggleがtrueかfalseかを判断します。
trueであれば「何かしらの動作」をした後にtoggleをfalseに
falseであれば「何かしらの動作」をした後にtrueにします
この方法で状態を一回一回切り替えることができます。
3つの状態が欲しければ、フラグをintにして、1, 2, 3とすればよいでしょう。
他にもボタンのタイトルなどで切り替える方法もあります。

応用編

というわけでこれを利用したメニューボタンを作りました。
Githubにあげています。nigohiroki/GoodMenu · GitHub
暇があってxcodeがある人は試しにやってみてください。

まとめ

以上簡単でしたが、トグルボタンを作る方法でした。
応用編にもありますが、新しいメニューなどを考える際には細かなテクニックが必要です。
それを徐々に使っていくことで新たなUI/UXが生まれるのではないでしょうか!?
いつかこのブログ上でCustom UI Controls for iOS and Mac OS X - Cocoa ControlsにあげられるくらいのUIを作ることを目標とします。

それではこのへんで。

広告を非表示にする