9ensanのLifeHack

 

iPhoneアプリのデフォルトのUIではAndroidやHTMLで実現出来るチェックボックスのようなものがありません。

ですので、UIButtonを使用してチェックボックスを作って実現してみました。

用意するもの

1. チェックボックス用の画像
2. UIButtonを継承したサブクラスの実装

この２つで実装できます。

まず、画像はAndroidで表示されるチェックボックスの画像を切りだして作成しました。

　　

この３つの画像を使用します。

１．UIButtonのサブクラスを作成する

1. メニューの「File」 →「New」→「File」をクリックして「Choose a template for your new file」を表示します。

   
2. 「Next」ボタンを押下して、Class名に「CheckboxButton」Subclass of に「UIButton」を入力して「Next」ボタンを押下する
   
3. 「CheckboxButton.h」を編集

   #import <UIKit/UIKit.h>
   
   @interface CheckboxButton : UIButton
   
   @property (nonatomic, assign) BOOL checkBoxSelected;
   
   @end

4. 「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」を使用する方法です。

２．「CheckboxButton」の使用方法

1. Storyboardまたは、nibファイルに「Round Rect Button」を設置する。
   
2. 設置したButtonのClass名に「CheckboxButton」を設定する
   

これだけでチェックボックスが実装できます。

実際に動かしたイメージが以下になります。

こんな感じでチェックボックスが実装できます。

「checkBoxSelected」の状態を取得することでチェックがON/OFFなのか判断できます。

関連する記事:

• Twitter Bootstrapのアイコンの色をカラフルにする方法
• MacのTime Machineで保存容量を制限する方法
• AndroidのzxingでNoClassDefFoundErrorが出た場合の対処
• Macで簡単に画像をリサイズする方法 (ドラッグ&ドロップでリサイズ)
• WordPressプラグイン AddQuicktag