UITabBar의 색조 / 배경색 변경


87

UINavigationBar 및 UISearchBar에는 두 항목 모두의 색조 색상을 변경할 수있는 tintColor 속성이 있습니다. 내 응용 프로그램의 UITabBar에 대해 동일한 작업을 수행하고 싶지만 이제 기본 검정색에서 변경하는 방법을 찾았습니다. 어떤 아이디어?


이것들은 훌륭한 답변입니다. 자동 회전을 허용하는 경우 유연한 여백과 크기를 갖도록 하위 뷰의 자동 크기 조정 마스크를 설정하는 것이 유용합니다. 그렇지 않으면 새 배경이 탭 막대로 크기가 조정되지 않습니다.
pmdj 2010

답변:


47

UITabBarController를 서브 클래 싱하고 개인 클래스를 사용하여 작동하도록 만들 수있었습니다.

@interface UITabBarController (private)
- (UITabBar *)tabBar;
@end

@implementation CustomUITabBarController


- (void)viewDidLoad {
    [super viewDidLoad];

    CGRect frame = CGRectMake(0.0, 0.0, self.view.bounds.size.width, 48);
    UIView *v = [[UIView alloc] initWithFrame:frame];
    [v setBackgroundColor:kMainColor];
    [v setAlpha:0.5];
    [[self tabBar] addSubview:v];
    [v release];

}
@end

1
이것은 탭 막대 위에 반투명 갈색 직사각형을 배치한다는 점에서 일종의 이상한 해결책입니다. 문제는 배경뿐만 아니라 모든 버튼이 갈색으로 변한다는 것입니다. 그러나 이것은 지금까지 누구에게나 제시된 최고의 옵션 인 것 같습니다.
Jonah

이것은 개인 API입니까? 내 앱에서 이것을 사용하면 거부됩니까?
Frank

거기에 개인 전화가없는 것 같습니다
Anthony Main

액세스 할 수 없었던 탭바 속성.
coneybeare

이것은 "선택된 항목"하이라이트가 아닌 탭바 배경을 수정합니다.
제가

105

iOS 5에는 대부분의 UI 요소의 모양을 사용자 정의하기위한 몇 가지 새로운 모양 방법이 추가되었습니다.

모양 프록시를 사용하여 앱에서 UITabBar의 모든 인스턴스를 대상으로 지정할 수 있습니다.

iOS 5 + 6 :

[[UITabBar appearance] setTintColor:[UIColor redColor]];

iOS 7 이상의 경우 다음을 사용하십시오.

[[UITabBar appearance] setBarTintColor:[UIColor redColor]];

모양 프록시를 사용하면 앱 전체에서 탭 모음 인스턴스가 변경됩니다. 특정 인스턴스의 경우 해당 클래스의 새 속성 중 하나를 사용합니다.

UIColor *tintColor; // iOS 5+6
UIColor *barTintColor; // iOS 7+
UIColor *selectedImageTintColor;
UIImage *backgroundImage;
UIImage *selectionIndicatorImage;

3
아니. 내가 지적했듯이 iOS 5 용입니다. 조건부 컴파일 문을 사용하여 특정 버전을 항상 타겟팅 할 수 있습니다. cocoawithlove.com/2010/07/…
imnk

감사합니다. 도움이되었습니다. :) 그런 것이 있다는 것을 결코 몰랐습니다.
Veeru

아이폰 OS 7의 경우, 사용 [의 UITabBar 출연】 setBarTintColor, 당신은 변화의 배경 색상을 원하는 경우
Zeezer

34

최종 답변에 대한 부록이 있습니다. 필수 구성표는 정확하지만 부분적으로 투명한 색상을 사용하는 트릭을 개선 할 수 있습니다. 나는 그것이 기본 그라디언트를 보여주기위한 것이라고 가정합니다. 아, 또한 TabBar의 높이는 적어도 OS 3에서 48 픽셀이 아닌 49 픽셀입니다.

따라서 그래디언트가있는 적절한 1 x 49 이미지가있는 경우 다음을 사용해야하는 viewDidLoad 버전입니다.

- (void)viewDidLoad {

    [super viewDidLoad]; 

    CGRect frame = CGRectMake(0, 0, 480, 49);
    UIView *v = [[UIView alloc] initWithFrame:frame];
    UIImage *i = [UIImage imageNamed:@"GO-21-TabBarColorx49.png"];
    UIColor *c = [[UIColor alloc] initWithPatternImage:i];
    v.backgroundColor = c;
    [c release];
    [[self tabBar] addSubview:v];
    [v release];

}

1
배경 그림으로 예쁘게 만들고 싶다면 다음을 참조하십시오. duivesteyn.net/2010/01/16/iphone-custom-tabbar-background-image
oberbaum

1
나는 그것이 필요하다고 생각한다 : [[self tabBar] insertSubview : v atIndex : 0];
Vibhor Goyal

나는 대답이 오래되었다는 것을 알고 있지만 그것은 나를 위해 일했습니다. 색상 대신 사용자 지정 이미지가 필요했기 때문에 답변을
바에이

27

addSubview를 사용하면 버튼이 클릭 가능성을 잃게됩니다.

[[self tabBar] addSubview:v];

사용하다:

[[self tabBar] insertSubview:v atIndex:0];

7

이 작업을 수행하는 간단한 방법은 없습니다. 기본적으로 UITabBar를 하위 클래스로 만들고 원하는 작업을 수행하기 위해 사용자 정의 드로잉을 구현해야합니다. 효과를 위해 꽤 많은 작업이지만 그만한 가치가있을 수 있습니다. 향후 iPhone SDK에 추가하려면 Apple에 버그를 제출하는 것이 좋습니다.


4
선생님, 사과로 버그를 채웠습니까?
Sagar R. Kothari

7

다음은이를위한 완벽한 솔루션입니다. 이것은 iOS5 및 iOS4에서 잘 작동합니다.

//---- For providing background image to tabbar
UITabBar *tabBar = [tabBarController tabBar]; 

if ([tabBar respondsToSelector:@selector(setBackgroundImage:)]) {
    // ios 5 code here
    [tabBar setBackgroundImage:[UIImage imageNamed:@"image.png"]];
} 
else {
    // ios 4 code here
    CGRect frame = CGRectMake(0, 0, 480, 49);
    UIView *tabbg_view = [[UIView alloc] initWithFrame:frame];
    UIImage *tabbag_image = [UIImage imageNamed:@"image.png"];
    UIColor *tabbg_color = [[UIColor alloc] initWithPatternImage:tabbag_image];
    tabbg_view.backgroundColor = tabbg_color;
    [tabBar insertSubview:tabbg_view atIndex:0];
}

tabBarcontroller는 무엇입니까 UITabarDelegate를 준수하는 컨트롤러입니까 plz를 설명 할 수 있습니까?
iCoder 2012

7

iOS 7 :

[[UITabBar appearance] setBarTintColor:[UIColor colorWithRed:(38.0/255.0) green:(38.0/255.0) blue:(38.0/255.0) alpha:1.0]];

시각적 욕구에 따라 먼저 설정하는 것이 좋습니다.

[[UITabBar appearance] setBarStyle:UIBarStyleBlack];

바 스타일은보기 콘텐츠와 탭 바 사이에 미묘한 구분자를 둡니다.



5

나를 위해 Tabbar의 색상을 변경하는 것은 매우 간단합니다.

[self.TabBarController.tabBar setTintColor:[UIColor colorWithRed:0.1294 green:0.5686 blue:0.8353 alpha:1.0]];


[self.TabBarController.tabBar setTintColor:[UIColor "YOUR COLOR"];

이 시도!!!


잘 작동합니다! +1.
YSR 팬

3
 [[UITabBar appearance] setTintColor:[UIColor redColor]];
 [[UITabBar appearance] setBarTintColor:[UIColor yellowColor]];

2

배경색 만

Tabbarcontroller.tabBar.barTintColor=[UIColor redcolour];

또는 이것은 App Delegate에서

[[UITabBar appearance] setBackgroundColor:[UIColor blackColor]];

탭바의 선택 해제 아이콘 색상 변경

iOS 10의 경우 :

// this code need to be placed on home page of tabbar    
for(UITabBarItem *item in self.tabBarController.tabBar.items) {
    item.image = [item.image imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
}

iOS 10 이상 :

// this need to be in appdelegate didFinishLaunchingWithOptions
[[UITabBar appearance] setUnselectedItemTintColor:[UIColor blackColor]];

1

기존 답변에는 몇 가지 좋은 아이디어가 있으며, 대부분은 약간 다르게 작동하며, 선택하는 대상은 대상 장치와 달성하려는 모양에 따라 달라집니다. UITabBar모양을 사용자 정의 할 때 직관적이지 않은 것으로 악명 높지만 다음은 도움이 될 수있는 몇 가지 트릭입니다.

1). 더 평평한 모양을 위해 광택 오버레이를 제거하려면 다음을 수행하십시오.

tabBar.backgroundColor = [UIColor darkGrayColor]; // this will be your background
[tabBar.subviews[0] removeFromSuperview]; // this gets rid of gloss

2). 사용자 지정 이미지를 tabBar 버튼으로 설정하려면 다음과 같이하십시오.

for (UITabBarItem *item in tabBar.items){
    [item setFinishedSelectedImage:selected withFinishedUnselectedImage:unselected];
    [item setImageInsets:UIEdgeInsetsMake(6, 0, -6, 0)];
}

어디에서 selected하고 unselected있는 UIImage당신의 선택의 객체. 평평한 색상을 원하면 내가 찾은 가장 간단한 해결책 UIView은 원하는 것으로 backgroundColor만든 다음 UIImageQuartzCore의 도움 으로 a 로 렌더링 하는 것입니다. 보기의 내용 UIView을 가져 오기 위해 범주에서 다음 방법을 사용합니다 UIImage.

- (UIImage *)getImage {
    UIGraphicsBeginImageContextWithOptions(self.bounds.size, NO, [[UIScreen mainScreen]scale]);
    [[self layer] renderInContext:UIGraphicsGetCurrentContext()];
    UIImage *viewImage = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    return viewImage;
}

3) 마지막으로 버튼 제목의 스타일을 사용자 정의 할 수 있습니다. 하다:

for (UITabBarItem *item in tabBar.items){
    [item setTitleTextAttributes: [NSDictionary dictionaryWithObjectsAndKeys:
                [UIColor redColor], UITextAttributeTextColor,
                [UIColor whiteColor], UITextAttributeTextShadowColor,
                [NSValue valueWithUIOffset:UIOffsetMake(0, 1)], UITextAttributeTextShadowOffset,
                [UIFont boldSystemFontOfSize:18], UITextAttributeFont,
            nil] forState:UIControlStateNormal];
}

이렇게하면 약간의 조정이 가능하지만 여전히 매우 제한적입니다. 특히 버튼 내에서 텍스트 위치를 자유롭게 수정할 수 없으며, 선택 / 선택 취소 된 버튼에 대해 다른 색상을 가질 수 없습니다. 좀 더 구체적인 텍스트 레이아웃을 원하면 UITextAttributeTextColor명확하게 설정 하고 (2) 부분 의 selectedunselected이미지에 텍스트를 추가하십시오 .



0

또 다른 해결책 (핵)은 tabBarController의 알파를 0.01로 설정하여 사실상 보이지 않지만 여전히 클릭 할 수 있도록하는 것입니다. 그런 다음 Alpha'ed tabBarCOntroller 아래에 사용자 지정 탭 막대 이미지를 사용하여 MainWindow 펜촉의 아래쪽에 ImageView 컨트롤을 설정합니다. 그런 다음 tabbarcontroller가보기를 전환 할 때 이미지를 바꾸고 색상을 변경하거나 강조 표시합니다.

그러나 '... more'를 잃고 기능을 사용자 정의합니다.


0

안녕하세요 iOS SDK 4를 사용하고 있으며 두 줄의 코드로이 문제를 해결할 수 있었으며 다음과 같이 진행됩니다.

tBar.backgroundColor = [UIColor clearColor];
tBar.backgroundImage = [UIImage imageNamed:@"your-png-image.png"];

도움이 되었기를 바랍니다!


0
if ([tabBar respondsToSelector:@selector(setBackgroundImage:)]) {
    // ios 5 code here
    [tabBar setBackgroundImage:[UIImage imageNamed:@"image.png"]];
} 
else {
    // ios 4 code here
    CGRect frame = CGRectMake(0, 0, 480, 49);
    UIView *tabbg_view = [[UIView alloc] initWithFrame:frame];
    UIImage *tabbag_image = [UIImage imageNamed:@"image.png"];
    UIColor *tabbg_color = [[UIColor alloc] initWithPatternImage:tabbag_image];
    tabbg_view.backgroundColor = tabbg_color;
    [tabBar insertSubview:tabbg_view atIndex:0];
}

0

Swift 3.0 답변 : (Vaibhav Gaikwad에서)

탭바의 선택 해제 아이콘 색상 변경 :

if #available(iOS 10.0, *) {
        UITabBar.appearance().unselectedItemTintColor = UIColor.white
    } else {
        // Fallback on earlier versions
        for item in self.tabBar.items! {
            item.image = item.image?.withRenderingMode(UIImageRenderingMode.alwaysOriginal)
        }
}

텍스트 색상 만 변경하는 경우 :

UITabBarItem.appearance().setTitleTextAttributes([NSForegroundColorAttributeName: UIColor.white], for: .normal)

UITabBarItem.appearance().setTitleTextAttributes([NSForegroundColorAttributeName: UIColor.red, for: .selected)

0

당신의 외모를 사용하는 Swift 3 AppDelegate는 다음을 수행하십시오.

UITabBar.appearance().barTintColor = your_color

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.