cocos2d:UITableViewを実装する

2012/11/18

category: cocos2d | tag: cocos2d, iOS, UIKit | 1 comment

実アプリを想定し、2つのシーン切り替えと合わせてUITableViewを実装してみました。

初めてUITableViewを使ってみましたが、あまりのカスタマイズの自由度の高さに驚きました。UIKit全般に言えますが、知れば知るほど良くできていることが分かってきます。

一旦、UITableViewの追加と削除、スクロールの強制停止に関してメモしておきます。

UITableViewの追加

UITableViewの追加は、シーンの切り替えが終了したタイミング(onEnterTransitionDidFinish)で行なっています。
alphaを0で追加し、0.1秒でalphaが1になるアニメーションを再生し、スムーズに画面に表示されるようにしています。

- (void) onEnterTransitionDidFinish
{
    table = [[UITableView alloc] initWithFrame:[CCDirector sharedDirector].view.frame style:UITableViewStylePlain];
    table.alpha = 0;

    [[[CCDirector sharedDirector] view] addSubview:table];
    
    [UIView animateWithDuration:0.1 animations:^(void)
     {
         table.alpha = 1.0;
     }];
}

- (void) onEnterTransitionDidFinish

{

table = [[UITableView alloc] initWithFrame:[CCDirector sharedDirector].view.frame style:UITableViewStylePlain];

table.alpha = 0;

[[[CCDirector sharedDirector] view] addSubview:table];

[UIView animateWithDuration:0.1 animations:^(void)

{

table.alpha = 1.0;

}];

}

※ UITableViewの外観などの設定は省略してあります。

UITableViewの削除

UITableViewの削除は、シーンの切り替えが始まるタイミング(onExitTransitionDidStart)で行っています。

- (void) onExitTransitionDidStart
{
    [table removeFromSuperview];
    table = nil;
    [table release];
}

- (void) onExitTransitionDidStart

{

[table removeFromSuperview];

table = nil;

[table release];

}

スクロールの強制停止

UIScrollView(UITableViewのスーパークラス)のプロパティがデフォルトのままだと、スクロールが惰性で行われている間は、CCDirectorのreplaceSceneが始まりませんでした。

惰性でスクロールが行われているときに、go Titleをタップすると、タップされたことは認識されるが、Title Sceneへの移動は行われない。惰性のスクロールが止まった後にTitleSceneへの移動が始まる。

下記のように、UITableViewのContentOffsetをアニメーションなしでセットすることで、スクロールを強制停止することができました。

CCMenuItem *itemMain = [CCMenuItemFont itemWithString:@"go Title" block:^(id sender) {
      [table setContentOffset:table.contentOffset animated:NO];
      [[CCDirector sharedDirector] replaceScene:[CCTransitionFade transitionWithDuration:0.5 scene:[HelloWorldLayer scene]]];
}];

CCMenuItem *itemMain = [CCMenuItemFont itemWithString:@"go Title" block:^(id sender) {

[table setContentOffset:table.contentOffset animated:NO];

[[CCDirector sharedDirector] replaceScene:[CCTransitionFade transitionWithDuration:0.5 scene:[HelloWorldLayer scene]]];

}];

メニューアイテムがタップされた際、惰性のスクロールが停止され、即シーン切り替えが始まるようになりました。

ソースコード

全ソースコードは、こちらに置いてあります。
testUITableView (GitHub : narudesign-sekig)

Pocket

Check