Obtenez la bonne couleur dans la barre de navigation translucide iOS7
Comment puis-je obtenir la bonne couleur pour mes barres de navigation translucides sous iOS 7? La barre de navigation ajuste simplement la couleur donnée à une couleur beaucoup plus lumineuse. Changer la luminosité ou la saturation de la couleur ne donne pas non plus le bon résultat.
Quelqu'un qui a le même problème? Cela semble fonctionner d'une manière ou d'une autre, en regardant Facebook: ils ont leurs couleurs et leurs barres de navigation translucides.
Edit: Juste pour que ce soit clair: j’ai besoin que la barre soit translucide, pas transparente (avec de l’alpha), pas solide! http://en.wikipedia.org/wiki/Transparency_and_translucency
Edit: maintenant publié sur Apple BugReporter
La barre ajustera vos valeurs de couleur.
_ {La méthode préférée, pour les RVB> = 40 seulement, donnera le plus de flou}
Vous pouvez utiliser cette calculatrice et définir la couleur que vous souhaitez afficher à l'écran. Elle vous indiquera comment définir la couleur du paramètre barTintColor afin que, lorsque Apple l'ajuste, il s'affiche comme prévu.
http://b2cloud.com.au/how-to-guides/bar-color-calculator-for-ios7-and-ios8/
Edit: Notez que ces calculs sont pour un fond blanc et pour des couleurs plus claires (plus de 40 RVB, si vous avez besoin de plus sombre, vous aurez besoin d'ajouter un calque de fond comme d'autres l'ont mentionné - bien que cela réduira le flou de la barre).
Autre vue de l'assise sombre, exemple avec la couleur bleu foncé de Facebook: (65,96,156)}http://img707.imageshack.us/img707/3151/482w.png
Guide détaillé: http://b2cloud.com.au/how-to-guides/custom-uinavigationbar-colors-in-ios7
Fragment:
@interface UnderlayNavigationBar : UINavigationBar
@end
.
@interface UnderlayNavigationBar ()
{
UIView* _underlayView;
}
- (UIView*) underlayView;
@end
@implementation UnderlayNavigationBar
- (void) didAddSubview:(UIView *)subview
{
[super didAddSubview:subview];
if(subview != _underlayView)
{
UIView* underlayView = self.underlayView;
[underlayView removeFromSuperview];
[self insertSubview:underlayView atIndex:1];
}
}
- (UIView*) underlayView
{
if(_underlayView == nil)
{
const CGFloat statusBarHeight = 20; // Make this dynamic in your own code...
const CGSize selfSize = self.frame.size;
_underlayView = [[UIView alloc] initWithFrame:CGRectMake(0, -statusBarHeight, selfSize.width, selfSize.height + statusBarHeight)];
[_underlayView setAutoresizingMask:(UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight)];
[_underlayView setBackgroundColor:[UIColor colorWithRed:0.0f green:0.34f blue:0.62f alpha:1.0f]];
[_underlayView setAlpha:0.36f];
[_underlayView setUserInteractionEnabled:NO];
}
return _underlayView;
}
@end
.
UIViewController* rootViewController = ...;
UINavigationController* navigationController = [[UINavigationController alloc] initWithNavigationBarClass:[UnderlayNavigationBar class] toolbarClass:nil];
[navigationController.navigationBar setBarTintColor:[UIColor colorWithRed:0.0f green:0.0f blue:90.0f/255.0f alpha:1]];
[navigationController setViewControllers:@[rootViewController]];
Vous devez simplement changer la propriété translucent
navigationBar.translucent = NO;
En réalité, cela revient à supprimer/créer des sous-vues/sous-couches transparentes de la barre de navigation.
J'ai amélioré le code de Obtention de couleurs vives et éclatantes pour un UINavigationBar translucide iOS 7 dans mon fork: https://github.com/allenhsu/CRNavigationController
Avec ma modification, la couleur de résultat à l'écran (sélectionnée sur un fond blanc) correspondra exactement à la même valeur transmise à setBarTintColor. Je pense que c'est une solution incroyable.
Je sais que cette réponse est un peu tardive, mais si vous utilisez Interface Builder, vous risquez d'obtenir une mauvaise couleur lorsque vous utilisez une valeur hexadécimale car Interface Builder est configuré pour utiliser le mauvais espace colorimétrique. Dans Xcode 6.4, vous pouvez appuyer sur le petit engrenage en haut à droite de la boîte de dialogue du sélecteur de couleur pour choisir l’espace colorimétrique que vous utilisez:
Le mien était réglé sur sRGB IEC6196-2.1, alors que j'aurais dû utiliser Generic RGB.
Utilisez simplement cette calculatrice barTintColor simple:
Si votre couleur n'est pas exceptionnellement vive, vous pouvez calculer la couleur équivalente w/alpha. Cela fonctionne bien dans iOS 7.0.3+; avant la version 7.0.3, elle appliquait automatiquement un alpha de 0,5.
Ce code suppose que votre couleur d'entrée est RVB et opaque, et que votre couleur d'arrière-plan est blanc:
- (UIColor *) colorByInterpolatingForBarTintWithMinimumAlpha: (CGFloat) alpha
{
NSAssert(self.canProvideRGBComponents, @"Self must be a RGB color to use arithmatic operations");
NSAssert(self.alpha == 1, @"Self must be an opaque RGB color");
CGFloat r, g, b, a;
if (![self getRed:&r green:&g blue:&b alpha:&a]) return nil;
CGFloat r2,g2,b2,a2;
r2 = g2 = b2 = a2 = 1;
CGFloat red,green,blue;
alpha -= 0.01;
do {
alpha += 0.01;
red = (r - r2 + r2 * alpha) / alpha;
green = (g - g2 + g2 * alpha) / alpha;
blue = (b - b2 + b2 * alpha) / alpha;
} while (alpha < 1 && (red < 0 || green < 0 || blue < 0 || red > 1 || green > 1 || blue > 1));
UIColor *new = [UIColor colorWithRed:red green:green blue:blue alpha:alpha];
return new;
}
Si quelqu'un a un moyen plus élégant de calculer l'alpha (je craque pour cette boucle), j'aimerais le voir: https://Gist.github.com/sgtsquiggs/7206385
Une solution simple/rapide qui a fonctionné pour moi . Il suffit de définir la teinte de la barre dans le scénarimage plutôt que l'arrière-plan.
Commencez par sélectionner votre barre de navigation dans votre contrôleur de navigation.
Cliquez ensuite sur l'inspecteur d'attributs à droite, puis définissez la teinte des barres.
Vous pouvez sélectionner une couleur prédéfinie ou cliquer sur la couleur pour la changer.
Voici un autre moyen d'obtenir la bonne couleur de barre de navigation translucide dans iOS 7.x et versions ultérieures. Pour certaines couleurs, il est possible de trouver la couleur de teinte optimale qui fait apparaître la barre translucide avec une couleur qui correspond à celle souhaitée.
Par exemple, pour la couleur Facebook rgb: 65,96,156 ou #41609c, la couleur optimale est #21458c. Le code suivant définit toutes les barres de navigation de l'application comme étant de couleur Facebook avec l'API native cocoa-touch:
UIColor* barColor = [UIColor colorWithRed:0.129995 green:0.273324 blue:0.549711 alpha:1.0]; // #21458c to make bars actual color match the #41609c color.
[[UINavigationBar appearance] setBarTintColor:barColor];
La seule limite de la méthode est que la couleur optimisée ne peut pas être trouvée pour toutes les couleurs possibles. Ce n'est généralement pas possible pour les couleurs sombres.
J'ai créé un utilitaire BarTintColorOptimizer qui doit être exécuté sur le périphérique pour rechercher une couleur de barre optimisée pour toute couleur que vous entrez.
Je suppose que vous avez lu tous les commentaires ci-dessus. Si vous souhaitez obtenir un arrière-plan et une translucidité personnalisés, vous devez redéfinir la classe de navigationbar et implémenter votre propre méthode layoutsubviews. Simple ajouter une sous-vue supplémentaire ici. IMPORTANT: vous devez l’ajouter juste au-dessus de la sous-vue d’arrière-plan de la barre de navigation. Il cachera votre en-tête ou vos boutons si vous le mettez juste au-dessus de toutes les sous-vues.
Aussi, consultez cette question
j'ai beaucoup regardé autour et rien de tout cela n'a fonctionné pour moi, la solution est la suivante:
1- Définissez votre navigation barTintColor (arrière-plan).
2- Lancez le simulateur et ouvrez votre application, dans votre Mac ouvert Digital Color Meter et sélectionnez le menu déroulant "Afficher en RVB générique".
3- Utilisez cet outil pour choisir la couleur de navigation que vous allez définir pour votre vue.
4- Allez dans le scénario, puis sélectionnez la couleur d’arrière-plan et assurez-vous qu’elle se trouve sur les curseurs RVB. Si vous mettez la couleur ici, vous obtiendrez exactement la même couleur que la barre de navigation.
Remarque: Peu importe si isTranslucent est activé ou désactivé.
J'espère que cela vous aide.
Pour rendre la teinte plus sombre, vous pouvez modifier la couleur de fond de la barre de navigation:
UIColor *color1 = [UIColor colorWithRed:55.0f/256.0f green:0.0f blue:1.0f alpha:1.0f];
[navBar setBarStyle:UIBarStyleBlackTranslucent];
[navBar setBarTintColor:color1];
UIColor *color2 = [UIColor colorWithWhite:0 alpha:0.3];
[navBar setBackgroundColor:color2];
Essayez de jouer avec color1 et color2 pour obtenir le résultat qui vous convient. Tout le reste lutterait contre le cadre.
Si vous utilisez Swift 2.0, vous pouvez utiliser ceci, cela supprimera le flou et affichera correctement la couleur.
UINavigationBar.appearance().translucent = false
J'ai étendu UINavigationController,
sur son viewDidLoad, j'ai ajouté un fond avec la même couleur que la teinte.
En outre, j'ai défini le cadre d'arrière-plan pour couvrir la zone de la barre d'état:
self.navigationBar.barTintColor = navBackgroundColor;
CGRect bgFrame = self.navigationBar.bounds;
bgFrame.Origin.y -= 20.0;
bgFrame.size.height += 20.0;
UIView *backgroundView = [[UIView alloc] initWithFrame:bgFrame];
backgroundView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
backgroundView.backgroundColor = navBackgroundColor;
backgroundView.alpha = 0.6;
[self.navigationBar addSubview:backgroundView];
[self.navigationBar sendSubviewToBack:backgroundView];
Sur mon cas, alpha 0.6 a fait le travail, mais vous pouvez jouer avec.
En comparant mes couleurs antérieures et postérieures, j'ai constaté une chute de 21% de la saturation, tandis que les teintes Teinte et Luminosité sont restées les mêmes.
En ajoutant 21%, j'ai pu améliorer considérablement la correspondance des couleurs. Malheureusement, notre couleur avait une saturation supérieure à 80 pour commencer. Pousser au-dessus de 100% a eu des rendements décroissants et ne correspondait pas parfaitement, mais elle s'est beaucoup rapprochée.
Pour des couleurs avec une saturation inférieure à 80, il devrait faire encore mieux.
Pour savoir comment régler la saturation de votre couleur Comment puis-je modifier la teinte, la luminosité et la saturation d'un UIColor?
navBar.barTintColor = [UIColor orangeColor];
navBar.translucent = YES;
UIColor *backgroundLayerColor = [[UIColor redColor] colorWithAlphaComponent:0.7f];
static CGFloat kStatusBarHeight = 20;
CALayer *navBackgroundLayer = [CALayer layer];
navBackgroundLayer.backgroundColor = [backgroundLayerColor CGColor];
navBackgroundLayer.frame = CGRectMake(0, -kStatusBarHeight, navBar.frame.size.width,
kStatusBarHeight + navBar.frame.size.height);
[navBar.layer addSublayer:navBackgroundLayer];
// move the layer behind the navBar
navBackgroundLayer.zPosition = -1;
Notez que vous aurez encore besoin de muck avec le barTintColor et le backgroundLayerColor pour obtenir la couleur exacte souhaitée. De plus, bien sûr, les couleurs dépendent de la couleur d'arrière-plan de votre vue Contenu (par exemple, le blanc).
Vous pouvez exécuter l'application dans le simulateur et prendre la couleur de la barre de navigation à l'aide de l'outil Pipette.
