Helle, lebendige Farben für eine durchscheinende UINavigationBar für iOS 7

iOS 7.1 UPDATE : Die Problemumgehung zum Ändern des Alphakanals in der UINavigationBar wurde in diesem Update anscheinend ignoriert. Im Moment scheint die beste Lösung darin zu bestehen, einfach damit umzugehen und zu hoffen, dass jede Farbe, die Sie wählen, einen durchscheinenden Effekt erzielen kann. Ich suche immer noch nach Möglichkeiten, dies zu umgehen.

iOS 7.0.3 UPDATE : Die von uns erstellte GitHub-Bibliothek wurde aktualisiert, um dieses Problem bei Verwendung von iOS 7.0.3 geringfügig zu umgehen. Leider gibt es keine Zauberformel, die beide in iOS 7.0.2 und früheren Versionen und iOS 7.0.3 erstellten Farben unterstützt. Scheint, als hätte Apple die Sättigung verbessert, jedoch auf Kosten der Opazität (da die unscharfe Transluzenz von der Opazität abhängt). Ich arbeite zusammen mit einigen anderen daran, eine viel bessere Lösung dafür zu finden.

Ich bin sicher, dass viele Leute bereits auf das Problem gestoßen sind, bei dem iOS 7 dazu neigt, die Farbe einer durchscheinenden UINavigationBar zu entsättigen.

Mein Ziel ist es, eine UINavigationBar mit dieser Farbtonfarbe zu erzielen, die jedoch durchscheinend ist:

Mit der Transluzenz bekomme ich das jedoch. Die Hintergrundansicht ist weiß, was meiner Ansicht nach diese Ansicht etwas heller macht:

Gibt es eine Möglichkeit, die ursprüngliche Farbe zu erhalten, während die Transluzenz erhalten bleibt? Ich habe festgestellt, dass Facebook in der Lage war, die Leiste in ihrer satten blauen Farbe anzuzeigen, wie hier angezeigt:

..so ich weiß, dass es einen Weg geben muss. Hintergrundansichten machen hier natürlich einen Unterschied, aber der größte Teil ihres Inhalts ist auch grau / weiß. Es scheint, dass Sie unabhängig von der eingebrachten Balkentönungsfarbe keine lebendigen Farben unter Transluzenz erhalten können.

Mit Lösung aktualisiert.

Hier ist die Lösung, die ich gefunden habe. Ich nahm die Lösung von Aprato und fasste den Brauch dann UINavigationBarin einer UINavigationControllerUnterklasse zusammen. Ich habe ein Repository erstellt, in dem diese Implementierung zusammen mit einer Beispiel-App aufgeführt ist .

////////////////////////////
// CRNavigationBar.m
////////////////////////////

#import "CRNavigationBar.h"

@interface CRNavigationBar ()
@property (nonatomic, strong) CALayer *colorLayer;
@end

@implementation CRNavigationBar

static CGFloat const kDefaultColorLayerOpacity = 0.5f;
static CGFloat const kSpaceToCoverStatusBars = 20.0f;

- (void)setBarTintColor:(UIColor *)barTintColor {
    [super setBarTintColor:barTintColor];
    if (self.colorLayer == nil) {
        self.colorLayer = [CALayer layer];
        self.colorLayer.opacity = kDefaultColorLayerOpacity;
        [self.layer addSublayer:self.colorLayer];
    }
    self.colorLayer.backgroundColor = barTintColor.CGColor;
}

- (void)layoutSubviews {
    [super layoutSubviews];
    if (self.colorLayer != nil) {
        self.colorLayer.frame = CGRectMake(0, 0 - kSpaceToCoverStatusBars, CGRectGetWidth(self.bounds), CGRectGetHeight(self.bounds) + kSpaceToCoverStatusBars);

        [self.layer insertSublayer:self.colorLayer atIndex:1];
    }
}

@end

////////////////////////////
// CRNavigationController.m
////////////////////////////

#import "CRNavigationController.h"
#import "CRNavigationBar.h"

@interface CRNavigationController ()

@end

@implementation CRNavigationController

- (id)init {
    self = [super initWithNavigationBarClass:[CRNavigationBar class] toolbarClass:nil];
    if(self) {
        // Custom initialization here, if needed.    
    }
    return self;
}

- (id)initWithRootViewController:(UIViewController *)rootViewController {
    self = [super initWithNavigationBarClass:[CRNavigationBar class] toolbarClass:nil];
    if(self) {
        self.viewControllers = @[rootViewController];
    }

    return self;
}

@end

iOS 7.0.3 UPDATE: Wie Sie oben sehen, hat 7.0.3 die Dinge geändert. Ich habe meinen Kern aktualisiert. Hoffentlich verschwindet dies einfach, wenn Leute ein Upgrade durchführen.

Ursprüngliche Antwort: Am Ende hatte ich einen Hack, der die beiden anderen Antworten kombinierte. Ich unterteile UINavigationBar und füge auf der Rückseite eine Ebene mit zusätzlichem Platz hinzu, um abzudecken, ob eine der verschiedenen Höhenstatusleisten aktiv ist. Die Ebene wird in Layout-Unteransichten angepasst und die Farbe ändert sich, wenn Sie barTintColor festlegen.

Inhalt: https://gist.github.com/aprato/6631390

setBarTintColor

  [super setBarTintColor:barTintColor];
  if (self.extraColorLayer == nil) {
    self.extraColorLayer = [CALayer layer];
    self.extraColorLayer.opacity = self.extraColorLayerOpacity;
    [self.layer addSublayer:self.extraColorLayer];
  }
  self.extraColorLayer.backgroundColor = barTintColor.CGColor;

layoutSubviews

  [super layoutSubviews];
  if (self.extraColorLayer != nil) {
    [self.extraColorLayer removeFromSuperlayer];
    self.extraColorLayer.opacity = self.extraColorLayerOpacity;
    [self.layer insertSublayer:self.extraColorLayer atIndex:1];
    CGFloat spaceAboveBar = self.frame.origin.y;
    self.extraColorLayer.frame = CGRectMake(0, 0 - spaceAboveBar, CGRectGetWidth(self.bounds), CGRectGetHeight(self.bounds) + spaceAboveBar);
  }

Das Verhalten von tintColor für Balken hat sich unter iOS 7.0 geändert. Dies wirkt sich nicht mehr auf den Hintergrund der Leiste aus und verhält sich wie für die zu UIView hinzugefügte Eigenschaft tintColor beschrieben. Verwenden Sie -barTintColor, um den Hintergrund der Leiste zu tönen. Sie können den folgenden Code verwenden, damit die App sowohl mit ios6 als auch mit ios7 funktioniert.

if(IS_IOS7)
{
    self.navigationController.navigationBar.barTintColor = [UIColor blackColor];
    self.navigationController.navigationBar.translucent = NO;
}
else
{
    self.navigationController.navigationBar.tintColor = [UIColor blackColor];
}

IS_IOS7 ist ein Makro, das in der pch-Datei wie folgt definiert ist.

#define IS_IOS7 ([[UIDevice currentDevice].systemVersion floatValue] >= 7.0)

Ich habe diese Lösung nicht gefunden, aber sie scheint ziemlich gut zu funktionieren. Ich habe es gerade zu viewDidLoad in meiner Unterklasse von UINavigationController hinzugefügt.

Quelle: https://gist.github.com/alanzeino/6619253

// cheers to @stroughtonsmith for helping out with this one

UIColor *barColour = [UIColor colorWithRed:0.13f green:0.14f blue:0.15f alpha:1.00f];
UIView *colourView = [[UIView alloc] initWithFrame:CGRectMake(0.f, -20.f, 320.f, 64.f)];
colourView.opaque = NO;
colourView.alpha = .7f;
colourView.backgroundColor = barColour;
self.navigationBar.barTintColor = barColour;
[self.navigationBar.layer insertSublayer:colourView.layer atIndex:1];

Ein Low-Fi-Weg wäre wahrscheinlich das Anheften von a UIView, dh der Höhe der Navigationsleiste, an den oberen Rand der Ansicht hinter der Leiste. Stellen Sie sicher, dass diese Ansicht dieselbe Farbe wie die Navigationsleiste hat, spielen Sie jedoch mit dem Alpha, bis Sie die gewünschten Effekte erzielen:

UIView *backgroundView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, CGRectGetWidth(self.navigationController.navigationBar.frame), 64)];
    backgroundView.backgroundColor = [UIColor colorWithRed:0.0 green:0.0 blue:1 alpha:.5];

[self.navigationController.view insertSubview:backgroundView belowSubview:self.navigationController.navigationBar];

UIView dahinter

(Die Farbe wurde von den unteren Beispielen geändert, um die Transparenz hervorzuheben. Transparenz / Unschärfe macht sich während der Bewegung stärker bemerkbar.)

Wenn Sie die UINavigationBarAnsicht unterordnen und dieselbe Ansicht über dem Hintergrund, aber hinter allem anderen platzieren, werden Sie wahrscheinlich ähnliche Ergebnisse erzielen, während Sie weniger hackig sind.

Eine andere Lösung, die ich gesehen habe, ist das Spielen mit dem Alpha von UINavigationBar:

self.navigationController.navigationBar.alpha = 0.5f;

Bearbeiten: Nach dem Testen scheint dies tatsächlich nicht das beabsichtigte Verhalten (oder irgendein Verhalten) zu liefern:

.8 Alpha

Unangepasstes Alpha

Natürlich möchten Sie dies nur auf iOS 7-Geräten tun. Fügen Sie also eine Versionsprüfung hinzu, bevor Sie eine dieser Funktionen implementieren.

Verwenden Sie HSB und erhöhen Sie den Sättigungsparameter, anstatt Ihr UIColor-Objekt im RGB- Format zu erstellen . ( Dank an Sam Soffes , der diese Methode hier beschreibt )

navigationBar.barTintColor = [UIColor colorWithHue:0.555f saturation:1.f brightness:0.855f alpha:1.f];

Hinweis: Diese Lösung ist ein Kompromiss und funktioniert nicht gut für Farben mit hoher Sättigung.

Um die HSB-Farbe aus Ihrem Design auszuwählen , können Sie ein Tool wie ColorSnapper verwenden , mit dem Sie einfach das UIColor HSB-Format kopieren können.

Sie können auch die UIColor-Kategorie ( GitHub Link ) von David Keegan ausprobieren , um vorhandene Farben zu ändern.

Das Problem wurde jetzt von Apple in der neuen Version 7.0.3 behoben.

Früher habe ich @ aprato Lösung fand aber ein paar Ecke Fällen , in denen die neuen Schichten von neuen VCs (zB. UINavigationItemButtonViews, UINavigationItemViewsUsw.) würde automatisch in eine Position unterhalb der eingefügt werden extraColorLayer(die diese Titel Taste oder verursachen würde Elemente durch die betroffen zu sein extraColorLayerund damit schwächer in der Farbe als sie normalerweise wären). Also habe ich die Lösung von @ aprato angepasst, um zu erzwingen, dass die extraColorLayeran der Indexposition 1 extraColorLayerbleibt. An der Indexposition 1 bleibt die direkt über _UINavigationBarBackground, aber unter allem anderen.

Hier ist meine Klassenimplementierung:

- (void)setBarTintColor:(UIColor *)barTintColor
{
    [super setBarTintColor:barTintColor];
    if (self.extraColorLayer == nil)
    {
        self.extraColorLayer = [CALayer layer];
        self.extraColorLayer.opacity = kDefaultColorLayerOpacity;
        [self.layer insertSublayer:self.extraColorLayer atIndex:1]; // This way the text comes out clear
    }
    self.extraColorLayer.backgroundColor = barTintColor.CGColor;
}

- (void)layoutSubviews
{
    [super layoutSubviews];
    if (self.extraColorLayer != nil)
    {
        self.extraColorLayer.frame = CGRectMake(0, 0 - kSpaceToCoverStatusBars, CGRectGetWidth(self.bounds), CGRectGetHeight(self.bounds) + kSpaceToCoverStatusBars);
    }
}

- (void)insertSubview:(UIView *)view aboveSubview:(UIView *)siblingSubview
{
    [super insertSubview:view aboveSubview:siblingSubview];
    [self.extraColorLayer removeFromSuperlayer];
    [self.layer insertSublayer:self.extraColorLayer atIndex:1]; // This way the text comes out clear
}

- (void)insertSubview:(UIView *)view atIndex:(NSInteger)index
{
    [super insertSubview:view atIndex:index];
    [self.extraColorLayer removeFromSuperlayer];
    [self.layer insertSublayer:self.extraColorLayer atIndex:1]; // This way the text comes out clear
}

- (void)insertSubview:(UIView *)view belowSubview:(UIView *)siblingSubview
{
    [super insertSubview:view belowSubview:siblingSubview];
    [self.extraColorLayer removeFromSuperlayer];
    [self.layer insertSublayer:self.extraColorLayer atIndex:1]; // This way the text comes out clear
}

Ich habe Ihren Code in meiner Gabel verbessert: https://github.com/allenhsu/CRNavigationController

Bei meiner Änderung entspricht die Ergebnisfarbe auf dem Bildschirm (ausgewählt auf weißem Hintergrund) genau dem Wert, der übergeben wurde setBarTintColor. Ich denke, es ist eine erstaunliche Lösung.

Keiner dieser Hacks ist erforderlich :). Einfach einstellen:

self.navigationController.navigationBar.translucent = NO;

Für iOS 7 wurde die Standardtransluzenz auf TRUE gehalten.

In einem verwandten Hinweis können Sie Ihre Titeltextfarbe (mit Schatten) einfach einstellen über:

NSShadow *titleShadow = [[NSShadow alloc] init];
titleShadow.shadowOffset = CGSizeMake(0.0f, -1.0f);
titleShadow.shadowColor = [UIColor blackColor];
NSDictionary *navbarTitleTextAttributes = @{NSForegroundColorAttributeName: [UIColor whiteColor],
                                            NSShadowAttributeName: titleShadow};
[[UINavigationBar appearance] setTitleTextAttributes:navbarTitleTextAttributes];

Ich bin auf diese Frage / Antwort gestoßen, als ich versucht habe, eine einheitlich gefärbte Navigationsleiste mit Transparenz einzurichten, die unter iOS 7 deaktiviert ist.

Nachdem ich eine Weile mit barTintColor experimentiert hatte, stellte ich fest, dass eine sehr undurchsichtige Möglichkeit, eine undurchsichtige Navigationsleiste zu erstellen, darin besteht, ein einzelnes Pixelbild der gewünschten Farbe zu erstellen, ein dehnbares Bild daraus zu erstellen und es auf das Hintergrundbild der Navigationsleiste zu setzen .

UIImage *singlePixelImage = [UIImage imageNamed:@"singlePixel.png"];
UIImage *resizableImage = [singlePixelImage resizableImageWithCapInsets:UIEdgeInsetsZero];
[navigationBar setBackgroundImage:resizableImage forBarMetrics:UIBarMetricsDefault]; 

Drei Codezeilen, sehr einfach und funktionieren sowohl unter iOS 6 als auch unter iOS 7 (barTintColor wird unter iOS 6 nicht unterstützt).

Es gibt einen großartigen Dropin UINavigationController-Ersatz von Simon Booth, erhältlich bei GitHub Here GitHub - C360NavigationBar

Wenn Sie iOS6 rückwärts unterstützen, überprüfen Sie den Root-View-Controller als solchen:

PatientListTableViewController * frontViewController = [[PatientListTableViewController zuweisen] init];

    UINavigationController *navViewController = [[UINavigationController alloc] initWithNavigationBarClass:[C360NavigationBar class] toolbarClass:nil];
if ([navViewController.view respondsToSelector:@selector(setTintColor:)]) {
    //iOS7
    [navViewController.view setTintColor:self.navBarTintColor];
    [[C360NavigationBar appearance] setItemTintColor:self.navBarItemTintColor];
} else {
    //iOS6
    [[UIApplication sharedApplication] setStatusBarStyle:UIStatusBarStyleBlackOpaque animated:NO];
    navViewController.navigationBar.tintColor = self.navBarTintColor;
}
[navViewController pushViewController:frontViewController animated:NO];

self.window.rootViewController = navViewController;

Wie oben erwähnt, ist es möglich, die Farbtönung des Balkens zu sättigen, um das gewünschte Erscheinungsbild der Navigationsleiste zu erhalten.

Ich habe ein BarTintColorOptimizer-Dienstprogramm für diese Art der Anpassung geschrieben. Es optimiert die durchscheinende Farbtönung des Balkens, damit die tatsächliche Farbe des Balkens mit der gewünschten Farbe in iOS 7.x und höher übereinstimmt. Schauen Sie sich diese Antwort für Details an.

Ehrlich gesagt mögen die obigen Antworten richtig sein, aber der folgende Trick hat für mich sehr einfach funktioniert.

// this is complete 100% transparent image
self.imageBlack = [[UIImage imageNamed:@"0102_BlackNavBG"] 
           resizableImageWithCapInsets:UIEdgeInsetsMake(0, 2, 0, 2)  
                          resizingMode:UIImageResizingModeStretch];

// this is non-transparent but iOS7 
// will by default make it transparent (if translucent is set to YES)
self.imageRed = [[UIImage imageNamed:@"0102_RedNavBG"] 
         resizableImageWithCapInsets:UIEdgeInsetsMake(0, 2, 0, 2)  
                        resizingMode:UIImageResizingModeStretch];

// some navigation controller
[nvCtrLeft.navigationBar setBackgroundImage:self.imageRed 
                              forBarMetrics:UIBarMetricsDefault];

// some another navigation controller
[nvCtrCenter.navigationBar setBackgroundImage:self.imageRed 
                                forBarMetrics:UIBarMetricsDefault];

Hier sind die Bilder für self.imageRedund self.imageBlack.

< > schwarzes Bild in diesen Klammern ist nicht sichtbar, da es transparent ist :)

< > rotes Bild steht in diesen Klammern.

Gibt es eine Möglichkeit, die @ aprato-Lösung zu verwenden, ohne UINavigationBar zu unterklassifizieren?

In meinem Projekt ist meine Hauptansicht ein UIViewController.

Das Problem ist, dass der Navigationscontroller eine schreibgeschützte Eigenschaft ist. Gibt es eine Möglichkeit, Ihre Klasse mit meinem Projekt zu verwenden, da ich Folgendes nicht verwenden kann: [[UINavigationController alloc] initWithNavigationBarClass:

Vielen Dank

Eine einfache Möglichkeit, die gewünschte Farbe zu erhalten, ist die Verwendung

    [<NAVIGATION_BAR> setBackgroundImage:<UIIMAGE> forBarPosition:<UIBARPOSITION> barMetrics:<UIBARMETRICS>];

Solange Ihr Bild Alpha enthält, funktioniert die Transluzenz und Sie können das Alpha durch Ändern des Bildes einstellen. Dies wurde gerade in iOS7 hinzugefügt. Die Breite und Höhe des Bildes beträgt 640 x 88 Pixel für die Vertikale (addieren Sie 20 zu 88, wenn Sie möchten, dass es sich unter der Statusleiste befindet).