web-dev-qa-db-ja.com

iOS7半透明ナビゲーションバーで適切な色を取得する

IOS 7で半透明のナビゲーションバーに適切な色を付けるにはどうすればよいですか？ナビゲーションバーは、指定された色をより明るい色に調整するだけです。色の明るさや彩度を変更しても、正しい結果が得られません。

同じトラブルを抱えている人はいますか？ Facebookを見ると、どういうわけか機能しているようです。彼らは色と半透明のナビゲーションバーを持っています。

編集：明確にするために：バーは半透明で、透明ではなく（アルファ付き）、固体ではない必要があります！ http://en.wikipedia.org/wiki/Transparency_and_translucency

編集：Apple BugReporterに投稿されました

ioscolorsuinavigationbarios7
70
stk

バーは色の値を調整します。

RGB> = 40の場合にのみ推奨される方法は、最もぼやける

この計算機を使用して、画面にレンダリングするときに色を設定することができます。barTintColorの色を設定する方法がわかります。Appleで調整すると、意図したとおりに表示されます

http://b2cloud.com.au/how-to-guides/bar-color-calculator-for-ios7-and-ios8/

編集：これらの計算は白い背景と明るい色のためのものであることに注意してください（40以上のRGB、暗い必要がある場合は、他の人が言及したように背景レイヤーを追加する必要があります-それはバーのぼかしを軽減しますが）

代替の暗いアンダーレイビュー、Facebookの濃い青色の例：（65,96,156）http：//img707.imageshack .us/img707/3151/482w.png

詳細なガイド： http://b2cloud.com.au/how-to-guides/custom-uinavigationbar-colors-in-ios7

スニペット：

@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]];
80
SomeGuy

translucentプロパティを変更するだけです

navigationBar.translucent = NO;

これは、ナビゲーションバーの透明なサブビュー/サブレイヤーの削除/作成と実質的に同じです。

14
malex

からのコードを改善しましたフォークのiOS 7半透明UINavigationBar の明るく鮮やかな色を実現： https： //github.com/allenhsu/CRNavigationController

変更すると、画面上の結果の色（白い背景で選択）はsetBarTintColorに渡される値とまったく同じになります。それは素晴らしい解決策だと思います。

4
Allen Hsu

私はこの答えが少し遅れることを知っていますが、Interface Builderを使用している場合、Interface Builderは間違った色空間を使用するように設定されているため、16進値を使用すると間違った色を取得する可能性があります。 Xcode 6.4では、カラーピッカーダイアログの右上にある小さな歯車を押すと、使用しているカラースペースを選択できます。

enter image description here

私は実際にGeneric RGBを使用すべきだったのに、鉱山はsRGB IEC6196-2.1に設定されていました。

3
Elethier

この単純なbarTintColor Calculatorを使用するだけです。

http://htmlpreview.github.io/?https://github.com/tparry/Miscellaneous/blob/master/UINavigationBar_UIColor_calculator.html

enter image description here

2
Damien Romito

色が非常に鮮やかでない場合は、アルファ付きの同等の色を計算できます。これはiOS 7.0.3以降でうまく機能します。 7.0.3より前は、自動的に0.5アルファが適用されていました。

このコードは、入力色がRGBで不透明であり、背景色が白であることを前提としています。

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

誰かがアルファを計算するよりエレガントな方法を持っているなら（私はそのdo-whileループにうんざりしています）私はそれを見たいです： https://Gist.github.com/sgtsquiggs/7206385 =

2
Matthew Crenshaw

私のために働いたシンプルで高速なソリューション。背景ではなく、ストーリーボードでバーの色合いを設定するだけです。

まず、Navigation ControllerでNavigation Barを選択します
Navigation Bar

そして、右側の属性インスペクターをクリックして、バーの色合いを設定します
Bar tint

定義済みの色を選択するか、色をクリックして別の色に設定できます。
enter image description here

1
Markymark

IOS 7.x以降で半透明のナビゲーションバーの色を正しくする別の方法を次に示します。一部の色では、半透明のバーが目的の色に一致する色で表示されるようにする最適なバーの色合いを見つけることができます。

たとえば、rgb: 65,96,156または#41609cのFacebookカラーの場合、最適な色は#21458cです。次のコードは、アプリ内のすべてのナビゲーションバーを、ネイティブのcocoa-touch APIのみでFacebookカラーに設定します。

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

この方法の唯一の制限は、すべての可能な色に対して最適化された色が見つからないことです。通常、これは暗い色では不可能です。

BarTintColorOptimizer ユーティリティを作成しました。このユーティリティをデバイスで実行して、入力した色の最適化されたバーの色を検索します。

1
IvanRublev

上記のコメントをすべて読んだと思います。カスタムの背景と半透明性を取得する場合は、navigationbarクラスをオーバーライドし、独自のlayoutsubviewsメソッドを実装する必要があります。ここにサブビューを追加するだけです。重要：NavigationBarの背景サブビューのすぐ上に追加する必要があります。すべてのサブビューの上に配置すると、ヘッダーまたはボタンが非表示になります。

また、チェックアウト この質問

1
gleb.kudr

私は周りをよく見てきましたが、これらのどれも実際にはうまくいきませんでした、解決策は次のとおりです：

1-ナビゲーションを設定しますbarTintColor（背景）。

2-シミュレータを実行してアプリを開き、Macを開いてDigital Color Meterを選択し、ドロップダウンから「Generic RGBで表示」を選択します。

enter image description here

3-このツールを使用して、ビューに設定するナビゲーションの色を選択します。

4-ストーリーボードに移動して、背景色を選択し、RGBスライダーでその色を確認し、ここに色を入力すると、ナビゲーションバーとまったく同じ色になります。

enter image description here

注：isTranslucentがオンかオフかは関係ありません。

これがお役に立てば幸いです。

0
AaoIi

濃淡の色を暗くするために、ナビゲーションバーのbackgroundColorを変更できます。

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

Color1とcolor2を試して、自分に合った結果を達成してください。他のものはフレームワークと戦っています。

0
DisableR

Swift 2.0を使用している場合、これを使用できます。これにより、ぼかしが削除され、色が適切に表示されます。

UINavigationBar.appearance().translucent = false
0
icekomo

UINavigationControllerを拡張しました。
viewDidLoadに、同じ色合いの背景を追加しました。

また、ステータスバー領域を覆うように背景フレームを設定しました。

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

私の場合、alpha 0.6で作業は完了しましたが、それで遊ぶことができます。

0
avishic

前と後の色を比較すると、色相と明るさは同じままですが、彩度が21％低下しています。

21％を追加し直すことで、カラーマッチングを大幅に改善することができました。残念なことに、最初から80を超える彩度があったため、100％を超えるとリターンが減少し、完全には一致しませんでしたが、かなり近くなりました。

彩度が80未満の色の場合は、さらに改善されるはずです。

色の彩度を調整する方法については IColorの色相、明るさ、彩度を変更するにはどうすればよいですか？

0
SuperGuyAbe
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;

必要な正確な色を得るには、barTintColorとbackgroundLayerColorをいじる必要があることに注意してください。また、もちろん、色はコンテンツビューの背景色（たとえば、白）に依存します。

0
bobics

シミュレータでアプリケーションを実行し、スポイトツールを使用してナビゲーションバーの色を選択できます。

enter image description here

0
Vladimir