iPhoneアプリのUIButtonでチェックボックスを実装する方法
iPhoneアプリのデフォルトのUIではAndroidやHTMLで実現出来るチェックボックスのようなものがありません。
ですので、UIButtonを使用してチェックボックスを作って実現してみました。
用意するもの
- チェックボックス用の画像
- UIButtonを継承したサブクラスの実装
この2つで実装できます。
まず、画像はAndroidで表示されるチェックボックスの画像を切りだして作成しました。
この3つの画像を使用します。
1.UIButtonのサブクラスを作成する
- メニューの「File」 →「New」→「File」をクリックして「Choose a template for your new file」を表示します。
- 「Next」ボタンを押下して、Class名に「CheckboxButton」Subclass of に「UIButton」を入力して「Next」ボタンを押下する
- 「CheckboxButton.h」を編集
#import <UIKit/UIKit.h> @interface CheckboxButton : UIButton @property (nonatomic, assign) BOOL checkBoxSelected; @end
- 「CheckboxButton.m」を編集する
#import "CheckboxButton.h" @implementation CheckboxButton @synthesize checkBoxSelected = _checkBoxSelected; - (void)awakeFromNib { [super awakeFromNib]; UIImage* nocheck = [UIImage imageNamed:@"nocheck.png"]; UIImage* checked = [UIImage imageNamed:@"check.png"]; UIImage* disable = [UIImage imageNamed:@"disable_check.png"]; [self setBackgroundImage:nocheck forState:UIControlStateNormal]; [self setBackgroundImage:checked forState:UIControlStateSelected]; [self setBackgroundImage:checked forState:UIControlStateHighlighted]; [self setBackgroundImage:disable forState:UIControlStateDisabled]; [self addTarget:self action:@selector(checkboxPush:) forControlEvents:UIControlEventTouchUpInside]; [self setState:self]; } - (id)initWithFrame:(CGRect)frame { NSLog(@"initWithFrame"); self = [super initWithFrame:frame]; if (self) { // Initialization code UIImage* nocheck = [UIImage imageNamed:@"nocheck.png"]; UIImage* checked = [UIImage imageNamed:@"check.png"]; UIImage* disable = [UIImage imageNamed:@"disable_check.png"]; [self setBackgroundImage:nocheck forState:UIControlStateNormal]; [self setBackgroundImage:checked forState:UIControlStateSelected]; [self setBackgroundImage:checked forState:UIControlStateHighlighted]; [self setBackgroundImage:disable forState:UIControlStateDisabled]; [self addTarget:self action:@selector(checkboxPush:) forControlEvents:UIControlEventTouchUpInside]; [self setState:self]; } return self; } - (void)checkboxPush:(CheckboxButton*) button { button.checkBoxSelected = !button.checkBoxSelected; [button setState:button]; } - (void)setState:(CheckboxButton*) button { if (button.checkBoxSelected) { [button setSelected:YES]; } else { [button setSelected:NO]; } } @end
これで、「CheckboxButton」クラスの作成は終了です。
次は、作成した「CheckboxButton」を使用する方法です。
2.「CheckboxButton」の使用方法
- Storyboardまたは、nibファイルに「Round Rect Button」を設置する。
- 設置したButtonのClass名に「CheckboxButton」を設定する
これだけでチェックボックスが実装できます。
実際に動かしたイメージが以下になります。
こんな感じでチェックボックスが実装できます。
「checkBoxSelected」の状態を取得することでチェックがON/OFFなのか判断できます。