2011年3月2日水曜日

iPhone tabBarをtweetアプリのようにカスタマイズする方法



TwitterのアプリのようにtabBarのカスタマイズの仕方。


やろうと思えば自作で作ることも可能ですが、画像をつくるのが面倒なので、


もともとのUITabBarControllerをカスタマイズして作ることにした。


まずはアプリケーションdelegateクラスに、uitabBarControllerをOutletで宣言。


MainWindow.xibにインターフェースビルダーでUITabControllerを配置し、


先ほど宣言したOutletをつなぎ、delegateもつないでおく。


そしたら、アプリケーションdelegateクラスの.mファイルに下記を追加



- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {

    CGRect frame = CGRectMake(0, 0, self.tabBarController.view.frame.size.width, self.tabBarController.view.frame.size.height);

self.tabBarController.view.frame = CGRectMake(0, 19, frame.size.width, frame.size.height+9);
self.tabBarController.tabBar.frame = CGRectMake(0, frame.size.height - tabBarHeight-19, frame.size.width, tabBarHeight);
// Change position tabBarItem icon.
tabBarController.selectedIndex = 0;
[self  addTabBarArrow];

        [window addSubview:view];
        [window makeKeyAndVisible];

}

#pragma mark -
#pragma mark Create custom tabBar
- (void) addTabBarArrow {
UIImage* tabBarArrowImage = [UIImage imageNamed:@"control.png"];
tabBarArrow = [[[UIImageView alloc] initWithImage:tabBarArrowImage] autorelease];
// To get the vertical location we start at the bottom of the window, go up by height of the tab bar, go up again by the height of arrow and then come back down 2 pixels so the arrow is slightly on top of the tab bar.
CGFloat verticalLocation = self.window.frame.size.height - tabBarController.tabBar.frame.size.height - tabBarArrowImage.size.height -5;
tabBarArrow.frame = CGRectMake([self horizontalLocationFor:0], verticalLocation, tabBarArrowImage.size.width, tabBarArrowImage.size.height);
[self.tabBarController.view addSubview:tabBarArrow];
}

- (CGFloat) horizontalLocationFor:(NSUInteger)tabIndex {
// A single tab item's width is the entire width of the tab bar divided by number of items
CGFloat tabItemWidth = tabBarController.tabBar.frame.size.width / tabBarController.tabBar.items.count;
// A half width is tabItemWidth divided by 2 minus half the width of the arrow
CGFloat halfTabItemWidth = (tabItemWidth / 2.0) - (tabBarArrow.frame.size.width / 2.0);
// The horizontal location is the index times the width plus a half width
return (tabIndex * tabItemWidth) + halfTabItemWidth;
}

// When change tab, will call.
- (void)tabBarController:(UITabBarController *)theTabBarController didSelectViewController:(UIViewController *)viewController {

[self.tabBarController.view bringSubviewToFront:tabBarArrow];
 
[UIView beginAnimations:nil context:nil];
[UIView setAnimationDuration:0.2];
CGRect frame = tabBarArrow.frame;
frame.origin.x = [self horizontalLocationFor:tabBarController.selectedIndex];
tabBarArrow.frame = frame;
[UIView commitAnimations];
 
}



こんな感じで、addTabBarArrowメソッドで、画像を追加し、表示する位置をしていする
最後の
- (void)tabBarController:(UITabBarController *)theTabBarController didSelectViewController:(UIViewController *)viewController {
このメソッドは、タブが切り替えられたときに、呼ばれるメソッド
これは、先ほどのインターフェースビルダーでdelegateをつないでおかないと、呼ばれないので要注意。

あと、tabBarControllerのサイズを小さくすると、tabBarの中のそれぞれのビューと
タブ自体のビューがずれるので、調整してください。

いじょー

0 件のコメント:

コメントを投稿