Tag Archives: 이미지

[iPhone] UITabBarController에 아이콘 이미지 넣기

UITabBarController에 아이콘 이미지를 넣기 전까지는 어떻게 들어갈지 상상하기 힘듭니다.

그리고 보고 나면 왜 다른 어플들의 모습이 다 비슷비슷한지 다시 한번 느끼게 되는 결과를 얻게 됩니다.

[code]- (void)applicationDidFinishLaunching:(UIApplication *)application {
   
    UITabBarController *tabBarController = [[UITabBarController alloc] init];
    UIViewController *leftViewController = [[UIViewController alloc] init];
    UIViewController *rightViewController = [[UIViewController alloc] init];
   
    leftViewController.tabBarItem.title = @”LEFT”;
    rightViewController.tabBarItem.title = @”RIGHT”;
   
    leftViewController.tabBarItem.image = [UIImage imageNamed:@”test_a_01.png”];
    rightViewController.tabBarItem.image = [UIImage imageNamed:@”test_a_01.png”];
   
    NSArray *tabBarItems = [NSArray arrayWithObjects:leftViewController, rightViewController, nil];
   
    [tabBarController setViewControllers:tabBarItems];
   
    [window addSubview:tabBarController.view];
    [tabBarController.view release];
   
    [window makeKeyAndVisible];
}[/code]

위에서 사용하는 이미지는 다음과 같이 단순한 흰색의 이미지입니다. 알아보기 쉽게 하기 위해 배경에 회색을 깔았습니다.
사용자 삽입 이미지위에서 사용한 A 그림은 실제로는 배경이 투명한 이미지입니다. 그렇다면 실제로 완성된 탭바를 보도록 할까요.
사용자 삽입 이미지예상하신대로인가요? UITabBarController에서는 내가 넣은 이미지의 마스크(Mask)만을 사용하는 것을 알 수 있습니다.

선택된 이미지는 광택처리가 된(?) 하늘색 이미지로 바뀌며(자세히 보시면 그림자까지 들어가 있습니다) 비선택된 이미지는 회색으로 처리 되어있습니다.

이제 탭바를 쓴 앱스들의 아이콘이 모두 동일한 이유를 아시겠나요? 실제로 내가 원하는 이미지를 사용할 수 있도록 할수 있는 방법이 있습니다.

drawRect를 재구현 한다거나, 하지만 쉽고 간편하게 이런것을 구현할 수 있다는 점은 그냥 사용하게 만드는 매력을 가지고 있는 것 같습니다.
1108195223.zip

[iPhone] 배경 이미지를 사용하여 UIButton 만들기

배경 이미지를 사용하여 버튼의 터치 전/후 모습을 만드는 예제입니다. 간단하게 다음의 소스를 보시죠.

[code]- (void)applicationDidFinishLaunching:(UIApplication *)application {
    // 버튼에 사용할 이미지를 읽어들인다
    UIImage *normalImage = [UIImage imageNamed:@”test_btn_01.png”];
    UIImage *touchImage = [UIImage imageNamed:@”test_btn_02.png”];
   
    // 버튼 생성
    CGRect buttonRect = CGRectMake(30.0f, 50.0f, 83.0f, 23.0f);
    UIButton *button = [[UIButton alloc] initWithFrame:buttonRect];

    // 버튼의 배경 이미지 설정
    [button setBackgroundImage:normalImage forState:UIControlStateNormal];
    [button setBackgroundImage:touchImage forState:UIControlStateHighlighted];
   
    // 버튼의 문자 설정
    [button setTitle:@”Click Me” forState:UIControlStateNormal];
    [button setTitle:@”Thanks” forState:UIControlStateHighlighted];
   
    [button setFont:[UIFont boldSystemFontOfSize:12.0f]];
   
    // 버튼을 window에 붙인다
    [window addSubview:button];
    [button release];
   
    // 버튼의 투명영역이 제대로 적용되었는지 확인을 위해 배경색을 회색으로 변경
    [window setBackgroundColor:[UIColor grayColor]];
    [window makeKeyAndVisible];
}[/code]

forState를 보시면 아시겠지만 일반상태는 UIControlStateNormal이고 눌렸을때의 상태는 UIControlStateHighlighted입니다.

버튼의 모서리 부분이 투명처리 된 PNG를 사용했습니다, 예제를 통해 별다른 처리 없이 투명처리가 잘 되는 것을 알 수 있습니다.

사용자 삽입 이미지

터치된 상태


바로 실행해 볼 수 있는 소스를 그냥 첨부하였습니다.
1381365972.zip