web-dev-qa-db-ja.com

UITabBarの色合い/背景色の変更

UINavigationBarとUISearchBarの両方には、tintColorプロパティがあり、これらの両方のアイテムの色合い（驚くべきことですが）を変更できます。アプリケーションのUITabBarにも同じことをしたいのですが、デフォルトの黒色から変更する方法を見つけました。何か案は？

iosiphoneuitabbarcontrolleruitabbar
86
pixel

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
47
coneybeare

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;
104
imnk

最終回答の補遺があります。基本的なスキームは正しいものの、部分的に透明な色を使用するトリックは改善できます。デフォルトのグラデーションが透けて見えるようにするためだけのものだと思います。また、少なくともOS 3では、TabBarの高さは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];

}
34
pabugeater

AddSubviewを使用すると、ボタンのクリック可能性が失われるため、代わりに

[[self tabBar] addSubview:v];

つかいます：

[[self tabBar] insertSubview:v atIndex:0];
27
Marcin Zbijowski

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];

バースタイルは、ビューコンテンツとタブバーの間に微妙な区切り記号を置きます。

7
capikaw

これを行う簡単な方法はありません。基本的にUITabBarをサブクラス化し、カスタム描画を実装して必要なことを行う必要があります。効果のためにはかなりの作業ですが、それだけの価値があるかもしれません。バグをAppleでファイリングして、将来のiPhone SDKに追加することをお勧めします。

7
Louis Gerbarg

これは完璧なソリューションです。これは、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];
}
7
Gaurav

[[self tabBar] insertSubview:v atIndex:0];は私にとって完璧に機能します。

5
jimmy

私にとっては、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"];

これを試して！！！

5
Muhammad Rizwan
 [[UITabBar appearance] setTintColor:[UIColor redColor]];
 [[UITabBar appearance] setBarTintColor:[UIColor yellowColor]];
3
Hsm

背景色のみ

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]];
2
Vaibhav Gaikwad
[v setBackgroundColor ColorwithRed: Green: Blue: ];
1
jlthero

既存の回答にはいくつかの良いアイデアがあり、多くはわずかに異なる動作をし、選択するものはターゲットとするデバイスと達成することを目指している外観の種類にも依存します。 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を作成し、それをUIImageにレンダリングすることですQuartzCoreの助け。ビューのコンテンツで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）のselectedおよびunselectedイメージにテキストを追加するだけです。

1
SaltyNuts

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
odemolliens

もう1つの解決策（ハック）は、tabBarControllerのアルファを0.01に設定して、実質的に見えなくてもクリック可能にすることです。次に、メインウィンドウのペン先の下部にあるImageViewコントロールを、アルファ化されたtabBarCOntrollerの下のカスタムタブバー画像で設定します。次に、tabbarcontrollerがビューを切り替えるときに、画像を交換し、色を変更するか、ハイライトします。

ただし、「...詳細」を失い、機能をカスタマイズします。

0
user855723
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
user1049755

こんにちはiOS SDK 4を使用しています。たった2行のコードでこの問題を解決できました。次のようになります。

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

お役に立てれば！

0
Jorge Vicente Mendoza

AppDelegateの外観を使用したSwift 3は、次のことを行います。

UITabBar.appearance().barTintColor = your_color

0
Bobj-C