cocos2d:ラジオボタンを実現する

2012/11/10

category: cocos2d | tag: cocos2d, iOS, iPhone | no comments

cocos2dのCCMenuでラジオボタンを実現します。

メニュー項目は文字部分も含めて画像として作成しておきます。

それぞれのメニュー項目の、それぞれの状態における画像(ファイル名)を定義します。

#define IMG_NORMAL_1    @"rad_normal1.png"
#define IMG_PRESSED_1   @"rad_pressed1.png"
#define IMG_SELECTED_1  IMG_PRESSED_1
#define IMG_NORMAL_2    @"rad_normal2.png"
#define IMG_PRESSED_2   @"rad_pressed2.png"
#define IMG_SELECTED_2  IMG_PRESSED_2

#define IMG_NORMAL_1 @"rad_normal1.png"

#define IMG_PRESSED_1 @"rad_pressed1.png"

#define IMG_SELECTED_1 IMG_PRESSED_1

#define IMG_NORMAL_2 @"rad_normal2.png"

#define IMG_PRESSED_2 @"rad_pressed2.png"

#define IMG_SELECTED_2 IMG_PRESSED_2

※ メニュー項目が押された時と選択された時は、同じ画像にしています。

メニュー項目と選択されているメニュー項目を保持する変数を定義します。

@implementation HelloWorldLayer
{
    CCMenuItemImage *item1_;
    CCMenuItemImage *item2_;
    int selected_;
}

@implementation HelloWorldLayer

{

CCMenuItemImage *item1_;

CCMenuItemImage *item2_;

int selected_;

}

メニュー項目を作成し、画面にメニューとして追加します。

        selected_ = 1;
        
        item1_ = [CCMenuItemImage itemWithNormalImage:IMG_SELECTED_1
                                        selectedImage:IMG_PRESSED_1
                                               target:self selector:@selector(pressMenuItem:)];
        item1_.position = ccp(-55, 0);
        
        item2_ = [CCMenuItemImage itemWithNormalImage:IMG_NORMAL_2
                                        selectedImage:IMG_PRESSED_2
                                               target:self selector:@selector(pressMenuItem:)];
        item2_.position = ccp(55, 0);
        
        CCMenu *menu = [CCMenu menuWithItems:item1_, item2_, nil];
        
        [self addChild:menu];

selected_ = 1;

item1_ = [CCMenuItemImage itemWithNormalImage:IMG_SELECTED_1

selectedImage:IMG_PRESSED_1

target:self selector:@selector(pressMenuItem:)];

item1_.position = ccp(-55, 0);

item2_ = [CCMenuItemImage itemWithNormalImage:IMG_NORMAL_2

selectedImage:IMG_PRESSED_2

target:self selector:@selector(pressMenuItem:)];

item2_.position = ccp(55, 0);

CCMenu *menu = [CCMenu menuWithItems:item1_, item2_, nil];

[self addChild:menu];

デフォルトで選択されているメニュー項目は1とし、通常時の画像を選択状態の画像として設定します。

メニュー項目が押された際に呼ばれるメソッドを用意します。

- (void) pressMenuItem:(id)sender
{
    CCMenuItemImage *item = (CCMenuItemImage *)sender;
    
    if (item == item1_)
    {
        [item1_ setNormalImage:[CCSprite spriteWithFile:IMG_SELECTED_1]];
        [item2_ setNormalImage:[CCSprite spriteWithFile:IMG_NORMAL_2]];
        selected_ = 1;
    }
    else
    {
        [item1_ setNormalImage:[CCSprite spriteWithFile:IMG_NORMAL_1]];
        [item2_ setNormalImage:[CCSprite spriteWithFile:IMG_SELECTED_2]];
        selected_ = 2;
    }
}

- (void) pressMenuItem:(id)sender

{

CCMenuItemImage *item = (CCMenuItemImage *)sender;

if (item == item1_)

{

[item1_ setNormalImage:[CCSprite spriteWithFile:IMG_SELECTED_1]];

[item2_ setNormalImage:[CCSprite spriteWithFile:IMG_NORMAL_2]];

selected_ = 1;

}

else

{

[item1_ setNormalImage:[CCSprite spriteWithFile:IMG_NORMAL_1]];

[item2_ setNormalImage:[CCSprite spriteWithFile:IMG_SELECTED_2]];

selected_ = 2;

}

選択されているメニュー項目は、通常時に表示される画像(NormalImage)を選択時の画像に入れ替えます。選択されていないメニュー項目は、元の画像に戻します。

こうすることで、メニュー項目から指が離されたあとも、押された時と同じ見た目にします。

画像を変えれば、UIKitのUISegmentedController風になります。

#define IMG_NORMAL_1    @"normal1.png"
#define IMG_PRESSED_1   @"pressed1.png"
#define IMG_SELECTED_1  @"selected1.png"
#define IMG_NORMAL_2    @"normal2.png"
#define IMG_PRESSED_2   @"pressed2.png"
#define IMG_SELECTED_2  @"selected2.png"

#define IMG_NORMAL_1 @"normal1.png"

#define IMG_PRESSED_1 @"pressed1.png"

#define IMG_SELECTED_1 @"selected1.png"

#define IMG_NORMAL_2 @"normal2.png"

#define IMG_PRESSED_2 @"pressed2.png"

#define IMG_SELECTED_2 @"selected2.png"

※ 全ソースファイルは、こちら：likeRadioButton

Pocket

Check

コメントを残すコメントをキャンセル

コメントを投稿するにはログインしてください。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。

Trackback URL:

devlog [naru design]