BLOG main image
분류 전체보기 (50)
아이폰 개발 이야기 (12)
스마트폰용 홈페이지 (3)
웹표준 개발 (8)
HTML5 (2)
Objective-C (2)
뉴미디어 기획 이야기 (10)
뉴미디어 뉴스 (12)
81,453 Visitors up to today!
Today 80 hit, Yesterday 88 hit
2010/06/25 15:32


요즘 잘나가는 앱들을 살펴보면  이쁜 배경에 이쁜 버튼 ..
정말 우리 나라 사람들은 디자인을 참 중요히 여기는 것 같습니다.

저만 해도 같은 기능이라도 기본 베이직 스킨보다는 이쁜 배경을 가진 앱을 더 선호하게 되더라고요.

그래서 오늘은
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로 지정이 됩니다.


사용자 삽입 이미지


그럼 실행해 볼까요?

사용자 삽입 이미지


참 쉽죠잉~~

소스파일 첨부합니다 ^^


저작자 표시 비영리 동일 조건 변경 허락
Trackback Address :: http://web2log.com/trackback/55 관련글 쓰기
Tracked from SuNoo.net | 2011/10/17 14:18 | DEL
여차저차 하여, 텝바 App 구현 하는 방법은 습득했다. 그러나.. 그렇게 하고 나면... 기본적으로 검은 배경에 흰 아이콘, 선택시 파란색으로 나타나기에, 너무 네이티브하게 제공된 느낌이 강해..
ryu | 2010/07/02 22:59 | PERMALINK | EDIT/DEL | REPLY
정말 쉽고 친절하게 설명 해주셔서 너무 감사합니다~!!
web2log | 2010/07/05 10:44 | PERMALINK | EDIT/DEL
도움이 되셨다니 다행입니다. 방문 감사드립니다.
박세진 | 2010/08/03 20:09 | PERMALINK | EDIT/DEL | REPLY
이야 예전에 구글링 할때는 외국사이트 밖에 없었는데

이렇게 좋은 한글 사이트가 있네요.

친절한 설명 감사합니다.
web2log | 2010/08/20 15:54 | PERMALINK | EDIT/DEL
방문 감사드립니다.
항해사 | 2010/08/18 18:10 | PERMALINK | EDIT/DEL | REPLY
좋은 정보 감사합니다 .

구현을 해 보았는데 메뉴를 3-4번 정도 바꾸면 어플이 죽어 버리는 현상이 발생 하더군요
혹시 그런 경험은 없으신지요 ?
해준아빠 | 2010/08/30 10:10 | PERMALINK | EDIT/DEL | REPLY
좋은 내용 감사합니다.
.zip 파일 받아서, 실행해 (ios4) 버튼 몇번 클릭하면

#18 0x0000240c in -[TabBarAppDelegate tabBarController:didSelectViewController:] (self=0x115890, _cmd=0x332eafc0, tabBarController=0x13f150, viewController=0x13f310) at /Users/YoungHoShin/Downloads/TabBar/Classes/TabBarAppDelegate.m:56
56 [tabBarBg setBackgroundColor:color];

이부분에서 죽었습니다.
저도 확인해 보겠지만. 우선 올려 봅니다.
이방인 | 2010/09/05 14:35 | PERMALINK | EDIT/DEL | REPLY
죽는 이유는 간단합니다.
메모리 문제 입니다.

코드 2줄만 제거 하면 됩니다.
기본적인 메모리 관리를 못한 것입니다.
ds1adr | 2010/11/21 16:17 | PERMALINK | EDIT/DEL | REPLY
앗 대박... ㅠ.ㅠ 몰라서 탭바를 흉내내서 탭바처럼 구현하곤 했었는데... ㅠ.ㅠ
감사합니다...

아. 그리고 죽는다는 분들은
[tabBarBackgroundImage release]; 만 제거 하시면 될 겁니다. ^^
alloc -> init로 생성한게 아니라서요. ^^
진s | 2011/02/09 19:03 | PERMALINK | EDIT/DEL | REPLY
감사합니다~ ㅎ_ㅎ.. 이 소스를 참고로 탭바 말고 버튼을 통한 것도 해봐야겠네요 ㅇ_ㅇ~
overthe | 2011/03/08 03:34 | PERMALINK | EDIT/DEL | REPLY
커스텀 탭바의 경우 private 함수를 이용해서 구현하면 리젝을 당한다고 하던데.... 위의 예제는 괜찮은지요.
호리에상 | 2011/10/13 11:55 | PERMALINK | EDIT/DEL | REPLY
위의 내용처럼 값을 처리 했는데
핑크색 위에 회색이 덧 씌어져 나오네요.....
회색부분은 탭바의 클릭시 나오는 화면인거 같습니다.
Denny | 2011/10/17 13:56 | PERMALINK | EDIT/DEL | REPLY
우와~! 찾고 있던 예제입니다^^ 퍼가욤!!ㅋ
Name
Password
Homepage
Secret
prev"" #1 ... #6 #7 #8 #9 #10 #11 #12 #13 #14 ... #50 next