Ändern der Farbton- / Hintergrundfarbe von UITabBar


87

Die UINavigationBar und die UISearchBar verfügen beide über eine tintColor-Eigenschaft, mit der Sie die Farbtonfarbe (überraschend, ich weiß) dieser beiden Elemente ändern können. Ich möchte das Gleiche mit der UITabBar in meiner Anwendung tun, habe aber jetzt einen Weg gefunden, sie von der Standardfarbe Schwarz zu ändern. Irgendwelche Ideen?


Das sind großartige Antworten. Wenn Sie die Autorotation zulassen, ist es hilfreich, die Autoresizing-Maske der Unteransicht so einzustellen, dass sie flexible Ränder und Größen aufweist. Andernfalls wird die Größe des neuen Hintergrunds mit der Registerkartenleiste nicht geändert.
PMDJ

Antworten:


47

Ich konnte es zum Laufen bringen, indem ich einen UITabBarController unterklassifizierte und private Klassen verwendete:

@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
Dies ist insofern eine seltsame Lösung, als nur ein halbtransparentes braunes Rechteck über der Registerkartenleiste platziert wird. Das Problem ist, dass alle Schaltflächen braun werden, nicht nur der Hintergrund. Dies scheint jedoch die beste Option zu sein, die bisher jemand vorgestellt hat.
Jonah

Ist das eine private API? Wenn ich dies in meiner App verwenden würde, würde ich abgelehnt werden?
Frank

es tut nicht alle privaten Anrufe in dort zu sein scheint
Anthony Haupt

Auf die Tabbar-Eigenschaft war früher nicht zugegriffen.
Coneybeare

Dies ändert den Hintergrund der Registerkartenleiste, nicht das Highlight "Ausgewähltes Element", an dem ich mehr interessiert wäre
smdvlpr

105

iOS 5 hat einige neue Darstellungsmethoden hinzugefügt, um das Aussehen der meisten UI-Elemente anzupassen.

Sie können jede Instanz einer UITabBar in Ihrer App mithilfe des Darstellungs-Proxys als Ziel festlegen.

Für iOS 5 + 6:

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

Verwenden Sie für iOS 7 und höher Folgendes:

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

Durch die Verwendung des Darstellungs-Proxys werden alle Registerkartenleisteninstanzen in der gesamten App geändert. Verwenden Sie für eine bestimmte Instanz eine der neuen Eigenschaften für diese Klasse:

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

3
Nee. Wie ich bereits erwähnt habe, sind sie für iOS 5. Sie können immer auf bestimmte Versionen mit bedingten Kompilierungsanweisungen abzielen
imnk

Danke, das war hilfreich :) Ich wusste nie, dass es so etwas gibt.
Veeru

Verwenden Sie für iOS 7 [UITabBar-Darstellung] setBarTintColor, wenn Sie die Hintergrundfarbe ändern möchten
Zeezer

34

Ich habe einen Nachtrag zur endgültigen Antwort. Während das wesentliche Schema korrekt ist, kann der Trick der Verwendung einer teilweise transparenten Farbe verbessert werden. Ich gehe davon aus, dass dies nur dazu dient, den Standardverlauf durchscheinen zu lassen. Außerdem beträgt die Höhe der TabBar zumindest in OS 3 49 statt 48 Pixel.

Wenn Sie also ein geeignetes 1 x 49-Bild mit einem Farbverlauf haben, sollten Sie folgende Version von viewDidLoad verwenden:

- (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
Wenn Sie es mit einem Hintergrundbild hübsch machen möchten, sehen Sie dies: duivesteyn.net/2010/01/16/iphone-custom-tabbar-background-image
oberbaum

1
Ich denke, es muss sein: [[self tabBar] insertSubview: v atIndex: 0];
Vibhor Goyal

Ich weiß, dass die Antwort alt ist, aber das hat bei mir funktioniert. Da ich ein benutzerdefiniertes Bild anstelle einer Farbe benötigte, mischte ich Ihre Antwort mit diesem einen Farbton auf Balken - UITabBar-Teil
RaphaelDDL

27

Wenn Sie nur addSubview verwenden, verlieren Ihre Schaltflächen die Klickbarkeit

[[self tabBar] addSubview:v];

verwenden:

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

7

Es gibt keine einfache Möglichkeit, dies zu tun. Grundsätzlich müssen Sie UITabBar in Unterklassen unterteilen und benutzerdefinierte Zeichnungen implementieren, um das zu tun, was Sie möchten. Es ist ziemlich viel Arbeit für den Effekt, aber es kann sich lohnen. Ich empfehle, einen Fehler bei Apple einzureichen, um ihn einem zukünftigen iPhone SDK hinzuzufügen.


4
Sir, haben Sie einen Fehler mit Apfel gefüllt?
Sagar R. Kothari

7

Das Folgende ist die perfekte Lösung dafür. Dies funktioniert gut mit mir für iOS5 und 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];
}

Was ist TabBarcontroller? Ist es Controller, der UITabarDelegate entspricht? Können Sie PLZ erklären?
Der iCoder

7

Unter iOS 7:

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

Ich empfehle auch, zuerst abhängig von Ihren visuellen Wünschen einzustellen:

[[UITabBar appearance] setBarStyle:UIBarStyleBlack];

Der Balkenstil setzt eine subtile Trennung zwischen Ihrem Ansichtsinhalt und Ihrer Registerkartenleiste.


5

[[self tabBar] insertSubview:v atIndex:0]; funktioniert perfekt für mich.


5

Für mich ist es sehr einfach, die Farbe der Tabbar wie folgt zu ändern:

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


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

Versuche dies!!!


Funktioniert gut! +1 für u.
YSR Fan

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

2

für nur Hintergrundfarbe

Tabbarcontroller.tabBar.barTintColor=[UIColor redcolour];

oder dies in App Delegate

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

zum Ändern der Farbe von nicht ausgewählten Symbolen der Registerkartenleiste

Für 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];
}

Über iOS 10:

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

1

Die vorhandenen Antworten enthalten einige gute Ideen, viele funktionieren etwas anders, und was Sie auswählen, hängt auch davon ab, auf welche Geräte Sie abzielen und welche Art von Aussehen Sie erzielen möchten. UITabBarist notorisch unintuitiv, wenn es darum geht, sein Erscheinungsbild anzupassen, aber hier sind ein paar weitere Tricks, die helfen können:

1). Wenn Sie das glänzende Overlay für einen flacheren Look entfernen möchten, gehen Sie wie folgt vor:

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

2). Um benutzerdefinierte Bilder auf die Registerkartenschaltflächen festzulegen, gehen Sie wie folgt vor:

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

Wo selectedund unselectedsind UIImageObjekte Ihrer Wahl. Wenn Sie möchten, dass sie eine flache Farbe haben, besteht die einfachste Lösung darin, eine UIViewmit der gewünschten Farbe zu erstellen backgroundColorund sie dann UIImagemit Hilfe von QuartzCore in eine zu rendern. Ich verwende die folgende Methode in einer Kategorie UIView, um eine UIImagemit dem Inhalt der Ansicht zu erhalten:

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

3) Schließlich möchten Sie möglicherweise das Design der Titel der Schaltflächen anpassen. Machen:

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

Auf diese Weise können Sie einige Anpassungen vornehmen, die jedoch immer noch recht begrenzt sind. Insbesondere können Sie die Position des Texts innerhalb der Schaltfläche nicht frei ändern und für ausgewählte / nicht ausgewählte Schaltflächen keine unterschiedlichen Farben festlegen. Wenn Sie ein spezifischeres Textlayout UITextAttributeTextColorerstellen möchten, stellen Sie einfach klar ein und fügen Sie Ihren Text in die selectedund unselectedBilder aus Teil (2) ein.



0

Eine andere Lösung (die ein Hack ist) besteht darin, das Alpha auf dem tabBarController auf 0,01 zu setzen, so dass es praktisch unsichtbar und dennoch anklickbar ist. Legen Sie dann ein ImageView-Steuerelement am unteren Rand der MainWindow-Spitze mit Ihrem benutzerdefinierten Registerkartenbild unter dem Alpha-TabBarCOntroller fest. Tauschen Sie dann die Bilder aus, ändern Sie die Farben oder die Beleuchtung, wenn der Tabbarcontroller die Ansicht wechselt.

Sie verlieren jedoch das "... mehr" und passen die Funktionalität an.


0

Hallo, ich verwende iOS SDK 4 und konnte dieses Problem mit nur zwei Codezeilen lösen

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

Hoffe das hilft!


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

Schnelle 3.0-Antwort: (von Vaibhav Gaikwad)

Zum Ändern der Farbe von nicht ausgewählten Symbolen der Registerkartenleiste:

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)
        }
}

Nur zum Ändern der Textfarbe:

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

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

0

Swift 3 mit dem Erscheinungsbild von AppDelegatetun Sie Folgendes:

UITabBar.appearance().barTintColor = your_color

Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.