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


87

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


これらは素晴らしい答えです。自動回転を許可している場合は、サブビューのautoresizingMaskを設定してマージンとサイズを柔軟に設定すると、新しい背景がタブバーでサイズ変更されません。
pmdj

回答:


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
これは、タブバーの上に半透明の茶色の四角形を配置するだけの、奇妙な解決策です。問題は、背景だけでなく、すべてのボタンが茶色になっていることです。しかし、これはこれまで誰もが提示してきた最良のオプションのようです。
ジョナ

これはプライベートAPIですか?アプリでこれを使用した場合、拒否されますか?
フランク

そこにはプライベートコールがないようです
Anthony Main

tabbarプロパティは、以前はアクセスできませんでした。
corybeare 2010年

これにより、「選択したアイテム」の強調表示ではなく、タブバーの背景が変更されます。これは、私がより興味を持っているものです
smdvlpr

105

iOS 5では、ほとんどのUI要素の外観をカスタマイズするための新しい外観メソッドがいくつか追加されています。

外観プロキシを使用して、アプリ内のUITabBarのすべてのインスタンスをターゲットにできます。

iOS 5 + 6の場合:

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

iOS 7以降の場合、以下を使用してください。

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

外観プロキシを使用すると、アプリ全体のタブバーインスタンスが変更されます。特定のインスタンスについては、そのクラスの新しいプロパティの1つを使用します。

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

3
いいえ。:私が指摘したように、彼らは、iOS 5のためにあなたが常に特定の条件付きコンパイル文とバージョンターゲットにすることができますcocoawithlove.com/2010/07/...
imnkを

ありがとう、それは役に立ちました:)そのようなことがあるとは決して知りませんでした。
Veeru

iOS 7では、背景色を変更したい場合は、[UITabBarの外観] setBarTintColorを使用します
Zeezer

34

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

}

1
背景画像できれいにしたい場合は、こちらをご覧ください:duivesteyn.net/2010/01/16/iphone-custom-tabbar-background-image
oberbaum

1
私はそれが必要だと思います:[[self tabBar] insertSubview:v atIndex:0];
Vibhor Goyal

答えは古いですが、それでうまくいきました。色ではなくカスタム画像が必要だったので、バーの
RaphaelDDL

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

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


5

私にとっては、次のようにタブバーの色を変更するのは非常に簡単です:-

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


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

これを試して!!!


うまくいきました!uの+1。
YSRファン2017

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

2

背景色のみ

Tabbarcontroller.tabBar.barTintColor=[UIColor redcolour];

またはこれはアプリデリゲートで

[[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)];
}

どこselectedunselectedしているUIImageお好みのオブジェクト。それらをフラットカラーにしたい場合、私が見つけた最も簡単な解決策はUIView、目的のを作成してから、QuartzCoreをbackgroundColor使用してにレンダリングすることUIImageです。ビューのコンテンツ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明確に設定し、テキストをselectedunselected(2)の画像に追加します。



0

別の解決策(これはハックです)は、tabBarControllerのアルファを0.01に設定して、実質的に非表示でありながらクリック可能にすることです。次に、アルファ付きのtabBarCOntrollerの下にカスタムタブバーイメージを配置して、MainWindow nibの下部にImageViewコントロールを設定します。次に、イメージを交換し、tabbarcontrollerがビューを切り替えるときに色またはハイライトを変更します。

ただし、「... more」が失われ、機能がカスタマイズされます。


0

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

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.