Osiągnięcie jasnych, żywych kolorów dla przezroczystego paska UINavigationBar iOS 7

Zachowanie tintColor dla barów zmieniło się w systemie iOS 7.0. Nie ma już wpływu na tło paska i zachowuje się zgodnie z opisem właściwości tintColor dodanej do UIView. Aby odcień tła paska, użyj -barintcolor.Możesz użyć poniższego kodu, aby aplikacja działała zarówno z ios6, jak i ios7.

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

IS_IOS7 jest makrem zdefiniowanym w pliku pch w następujący sposób.

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

Nie wymyśliłem tego rozwiązania, ale wydaje się, że działa dość dobrze. Właśnie dodałem go do viewDidLoad na mojej podklasie UINavigationController.

Źródło: 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];

Jednym ze sposobów low-fi byłoby prawdopodobnie przypięcie UIView, czyli wysokości paska nawigacyjnego do górnej części widoku za paskiem. Ustaw ten widok w tym samym kolorze co pasek nawigacyjny, ale baw się alfą, aż uzyskasz pożądane efekty:

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 behind

(zmieniono kolor z niższych przykładów na przezroczystość podkreślenia. Przezroczystość / rozmycie jest bardziej zauważalne podczas ruchu.)

Podklasowanie UINavigationBar i umieszczenie tego samego widoku nad tło, ale za wszystkim innym prawdopodobnie osiągnie podobne wyniki, będąc mniej chwiejnym.

Innym rozwiązaniem jakie widziałem jest gra z alfą z UINavigationBar:

self.navigationController.navigationBar.alpha = 0.5f;

Edit: właściwie, po przetestowaniu wydaje się, że to nie zapewnia zamierzonego zachowania (lub żadnego zachowania):

.8 Alfa

Unadjusted alpha

Oczywiście, będziesz chciał to zrobić tylko na urządzeniach z systemem iOS 7. Więc, dodaj kilka sprawdzania wersji przed zaimplementowaniem któregokolwiek z nich.

Zamiast tworzyć obiekt UIColor w formacie RGB, Użyj HSB i zwiększ parametr nasycenia. (Podziękowania dla sama Soffesa który opisuje tę metodę tutaj )

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

Uwaga: To rozwiązanie to kompromis i nie działa dobrze w przypadku kolorów o wysokim nasyceniu.

Aby wybrać kolor HSB z projektu, możesz użyć narzędzia ColorSnapper , które pozwala po prostu skopiować Format UICOLOR HSB.

Możesz także użyj kategorii Uicolor (GitHub Link ) z David Keegan , aby zmodyfikować istniejące kolory.

Problem został naprawiony przez Apple w nowym wydaniu 7.0.3.

Użyłem rozwiązania @aprato, ale znalazłem kilka narożnych przypadków, w których nowe warstwy z nowych VC (np. UINavigationItemButtonViews, UINavigationItemViews, itd.) zostanie automatycznie wstawiony w miejsce poniżej extraColorLayer (co spowoduje, że elementy tytułu lub przycisku zostaną zmienione przez extraColorLayer i tym samym będą słabsze w kolorze niż normalnie). Więc dostosowałem rozwiązanie @aprato, aby zmusić extraColorLayer do pozostania na pozycji indeksu 1. Na pozycji indeksu 1, extraColorLayer pozostaje tuż nad _UINavigationBarBackground, ale pod wszystkim else.

Oto moja Implementacja klasy:

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

Poprawiłem Twój kod w moim forku: https://github.com/allenhsu/CRNavigationController

Z moją modyfikacją, kolor wyniku na ekranie (wybrany na białym tle) będzie dokładnie taką samą wartością przekazaną do setBarTintColor. Myślę, że to niesamowite rozwiązanie.

Żaden z tych hacków nie jest wymagany :). Simply set:

self.navigationController.navigationBar.translucent = NO;

W systemie iOS 7 domyślna przezroczystość została zachowana.

W powiązanej notce możesz łatwo ustawić kolor tekstu tytułowego (z cieniem) za pomocą:

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

Natknąłem się na to pytanie podczas próby ustawienia jednolicie kolorowego paska nawigacyjnego z wyłączoną przezroczystością na iOS 7.

Po kilku eksperymentach z barintcolor zorientowałem się, że bardzo łatwym sposobem na posiadanie nieprzezroczystego paska nawigacyjnego jest wykonanie pojedynczego piksela obrazu o pożądanym kolorze, zrobienie z niego rozciągliwego obrazu i ustawienie go na tle paska nawigacyjnego.

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

Trzy linie kodu, bardzo proste i działa zarówno na iOS 6 jak i iOS 7 (barintcolor nie jest obsługiwany w systemie iOS 6).

Istnieje świetny zamiennik kontrolera Dropin uinavigationcontroller dostępny na stoisku Simona dostępny na GitHub tutaj GitHub - C360navigationbar

Jeśli obsługujesz iOS6 wstecz, sprawdź kontroler widoku głównego jako taki:

PatientListTableViewController * frontViewController = [[PatientListTableViewController alloc] 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;

Jak wspomniano powyżej @bernhard możliwe jest Nasycenie koloru paska, aby uzyskać pożądany wygląd paska nawigacyjnego.

Napisałem Narzędzie BarTintColorOptimizer do tego rodzaju regulacji. Optymalizuje przezroczysty kolor barów, aby rzeczywisty kolor paska pasował do pożądanego koloru w systemie iOS 7.x i Później. Spójrz na ta odpowiedź Po szczegóły.

Szczerze mówiąc, powyższe odpowiedzi mogą być słuszne, ale podążanie za sztuczką działało dla mnie z łatwością.

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

Oto obrazy używane dla self.imageRed i self.imageBlack.

> czarny obrazek jest w tym nawiasie nie będzie widoczny ponieważ jest przezroczysty:)

> w nawiasach znajduje się czerwony obrazek.

Czy istnieje sposób na użycie @aprato solution bez podklasowania UINavigationBar.

W moim projekcie moim głównym widokiem jest kontroler UIViewController.

Problem polega na tym, że navigationController jest właściwością readonly, czy istnieje sposób użycia klasy you W moim projekcie, ponieważ nie mogę użyć: [[UINavigationController alloc] initWithNavigationBarClass:

Thanks

Łatwym sposobem na uzyskanie pożądanego koloru jest użycie

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

Tak długo, jak Twój obraz ma Alfę, przezroczystość będzie działać i możesz ustawić Alfę, zmieniając obraz. Zostało to właśnie dodane w iOS7. Szerokość i wysokość obrazu wynoszą 640x88px dla pionu (dodaj 20 do 88, jeśli chcesz, aby znajdował się pod paskiem stanu).