요즘 잘나가는 앱들을 살펴보면 이쁜 배경에 이쁜 버튼 ..
정말 우리 나라 사람들은 디자인을 참 중요히 여기는 것 같습니다.
저만 해도 같은 기능이라도 기본 베이직 스킨보다는 이쁜 배경을 가진 앱을 더 선호하게 되더라고요.
그래서 오늘은 Tab Bar 를 커스텀 구현하는 내용을 포스팅 하도록 하겠습니다.
제가 지금 부터 하는 커스텀은 약간의 뺑기(?) 라고 할수 있어요. 눈 속임이랄까, 정말 탭바 버튼 하나하나에 커스텀을 하는게 아니고 배경 자체를 덮어서 오른쪽 클릭하면 배경 탭바이미지1를 보여주게하고 왼쪽 클릭하면 2 배경탭바 이미지를 보여주게하는 내용입니다.
탭바 전체를 덮어야하기 때문에 아래 와 같은 이미지 2개가 필요합니다. (버튼이 늘어날수록 물론 이미지는 더 필요하겠죠?
별로 어렵지 않습니다. 후다닥 만들어 보겠습니다.
프로젝트 새로 선택하셔서 Tab Bar Application 선택해서 적당한 프로젝트 명으로 만들어주세요. 저는 TabBar 라고 만들었어요.
그리고 탭바 배경이미지가 될 2개의 이미지를 리소스 폴더에 넣어주시고요. ( 이미지는 소스파일 참고하세요 )
그리고 소스에 아래와 같이 프로그래밍 해주세요 . 설명 참고하시면 이해 가실거예요.
TabBarAppDelegate.h
#import <UIKit/UIKit.h>
@interface TabBarAppDelegate : NSObject <UIApplicationDelegate, UITabBarControllerDelegate> {
UIWindow *window;
UITabBarController *tabBarController;
UIView *tabBarBg;
}
@property (nonatomic, retain) IBOutlet UIWindow *window;
@property (nonatomic, retain) IBOutlet UITabBarController *tabBarController;
@property (nonatomic, retain) IBOutlet UIView *tabBarBg;
@end
TabBarAppDelegate.m
#import "TabBarAppDelegate.h"
@interface UITabBarController (private)
- (UITabBar *)tabBar;
@end
@implementation TabBarAppDelegate
@synthesize window;
@synthesize tabBarController;
@synthesize tabBarBg;
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
CGRect frame = CGRectMake(0, 0, 480, 49); //탭바 아래쪽 위치 좌표
tabBarBg = [[UIView alloc] initWithFrame:frame];
UIImage *tabBarBackgroundImage = [UIImage imageNamed:@"MENU1.png"]; //이미지를 변수에 저장
UIColor *color = [[UIColor alloc] initWithPatternImage:tabBarBackgroundImage]; //변수에 저장된 이미지를 UIColor 형 타입으로 저장
[tabBarBg setBackgroundColor:color]; //위에서 선언인 UIView 에다 이미지를 올리기
[color release];
[[tabBarController tabBar ] insertSubview:tabBarBg atIndex:0]; //탭바 atIndex 0번째에 위에 이미지 올린 UIView 집어넣음
// Add the tab bar controller's current view as a subview of the window
[window addSubview:tabBarController.view];
[window makeKeyAndVisible];
return YES;
}
// 탭바 선택할 때 호출되는 곳 (이 이벤트를 쓰기 위해서는 탭바를 delegate 로 지정해야해요 이건 아래쪽에 그림과 함께 설명해드릴게요)
- (void)tabBarController:(UITabBarController *)tabBarController didSelectViewController:(UIViewController *)viewController {
NSInteger tabIndex = tabBarController.selectedIndex; //현재선택된 탭바 index를 인트형 변수에 할당
if (tabIndex == 0) { //0번째 탭이 선택되면 이미지 를 MENU1.png로 변경
UIImage *tabBarBackgroundImage = [UIImage imageNamed:@"MENU1.png"];
UIColor *color = [[UIColor alloc] initWithPatternImage:tabBarBackgroundImage];
[tabBarBg setBackgroundColor:color];
[color release];
[tabBarBackgroundImage release];
}else { //그 외 선택되면 이미지 를 MENU2.png로 변경
UIImage *tabBarBackgroundImage = [UIImage imageNamed:@"MENU2.png"];
UIColor *color = [[UIColor alloc] initWithPatternImage:tabBarBackgroundImage];
[tabBarBg setBackgroundColor:color];
[color release];
[tabBarBackgroundImage release];
}
}
- (void)dealloc {
[tabBarController release];
[tabBarBg release];
[window release];
[super dealloc];
}
@end
소스 자체는 어렵지 않죠? ^^
근데 소스 중간에 설명했듯이 didSelectViewController 이 이벤트를 사용할려면 tabBar가 gelegate로 지정되어 있어야 쓸수 있어습니다. 아래 와 같이 연결해주면 tabbar 가 gelegate로 지정이 됩니다.
그럼 실행해 볼까요?
참 쉽죠잉~~
소스파일 첨부합니다 ^^
'아이폰 개발 이야기' 카테고리의 다른 글
| 아이폰 개발, 배경이미지를 만들어봅시다! (0) | 2010/08/10 |
|---|---|
| 아이폰 개발, 좌표값과 주소 구하기 (7) | 2010/06/29 |
| 아이폰 개발시 유용한 탭바 커스텀(Custom Tab Bar) 구현하기 (12) | 2010/06/25 |
| [아이폰 컨트롤러 예제] ① 테이블뷰 (0) | 2010/05/27 |
| 아이폰 개발자 등록 방법 A TO Z (22) | 2010/05/24 |
| 아이폰 개발 문자열(NSString) 다루기 예제 (0) | 2010/05/10 |




TabBar.zip