ios - ナビゲーション バーのアルファ値を変更する

Question

これは可能ですか？

ビュー コントローラー (アニメーション) のナビゲーション バーのアルファ値を変更したいのですが、変更するself.navigationController.navigationBar.alpha = 0.0;と、画面のナビゲーション バーが占めていた部分が完全に消えてブラック ボックスが残ります。のように（私はそれがself.viewの背景の色であることを望みます）。

Answer 1

私はコリンの答えを支持するので、アルファを含む UINavigationBar の外観をカスタマイズするための追加のヒントを提供したいと思います。

秘訣は、NavigationBar にUIAppearanceを使用することです。これにより、UIImage を NavigationBar のbackgroundImageに割り当てることができます。これらの UIImages をプログラムで生成し、その UIColors に使用して、必要に応じて色のアルファ プロパティを設定できます。私は自分のアプリケーションの 1 つでこれを実行しましたが、期待どおりに動作します。

ここで、いくつかのコード スニペットを示します。

1. たとえば、..AppDelegate.m の didFinishLaunchingWithOptions に次の行を追加します。

   //create background images for the navigation bar
   UIImage *gradientImage44 = nil; //replace "nil" with your method to programmatically create a UIImage object with transparent colors for portrait orientation
   UIImage *gradientImage32 = nil; //replace "nil" with your method to programmatically create a UIImage object with transparent colors for landscape orientation
   
   //customize the appearance of UINavigationBar
   [[UINavigationBar appearance] setBackgroundImage:gradientImage44 forBarMetrics:UIBarMetricsDefault];
   [[UINavigationBar appearance] setBackgroundImage:gradientImage32 forBarMetrics:UIBarMetricsLandscapePhone];
   [[UINavigationBar appearance] setBarStyle:UIBarStyleDefault];
   

2. プログラムで UIImage オブジェクトを作成する便利なメソッドを実装します。たとえば、UIImage の新しいカテゴリを作成します。

   //UIImage+initWithColor.h
   //
   #import <UIKit/UIKit.h>
   
   @interface UIImage (initWithColor)
   
   //programmatically create an UIImage with 1 pixel of a given color
   + (UIImage *)imageWithColor:(UIColor *)color;
   
   //implement additional methods here to create images with gradients etc.
   //[..]
   
   @end
   
   //UIImage+initWithColor.m
   //
   #import "UIImage+initWithColor.h"
   #import <QuartzCore/QuartzCore.h>
   
   @implementation UIImage (initWithColor)
   
   + (UIImage *)imageWithColor:(UIColor *)color
   {
       CGRect rect = CGRectMake(0, 0, 1, 1);
   
       // create a 1 by 1 pixel context 
       UIGraphicsBeginImageContextWithOptions(rect.size, NO, 0);
       [color setFill];
       UIRectFill(rect);
   
       UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
       UIGraphicsEndImageContext();
   
       return image;
   }
   

3. 1 でイメージの作成をやり直します (AppDelegate.m の #import "UIImage+initWithColor.h" と "nil" を置き換えます):

これが注目のスポットです。色のアルファ プロパティを変更することで、NavigationBar の不透明度レベルにも影響を与えています。

            UIImage *gradientImage44 = [UIImage imageWithColor:[UIColor colorWithRed:1.0 green:0.0 blue:1.0 alpha:0.2]];
            UIImage *gradientImage32 = [UIImage imageWithColor:[UIColor colorWithRed:1.0 green:0.0 blue:1.0 alpha:0.2]];

小さなデモ プロジェクトを作成し、2 つのスクリーンショットを追加します。ビュー自体には黄色の backgroundColor があります。NavigationBar の backgroundImages は赤色です。スクリーンショット 1 は、alpha = 0.2 の値を持つ NavigationBar を示しています。スクリーンショット 2 は、alpha = 0.8 の値を持つ NavigationBar を示しています。

Answer 2

これを行う最も簡単な方法は、navigationBar バックグラウンド ビューのアルファ コンポーネントを変更することです。これは、現時点 (iOS9) では最初の navigationBar サブビューです。ただし、今後のリリースでサブビュー階層が Apple によって変更されるかどうかはわからないため、注意が必要です。

let navigationBackgroundView = self.navigationController?.navigationBar.subviews.first
navigationBackgroundView?.alpha = 0.7

Answer 3

navigationBarアニメーション化された方法でを取り除きたい場合は、次のようにします。

[self.navigationController setNavigationBarHidden:YES animated:YES];

alphaアニメーションを制御し、 を に設定する必要がある場合は、以下をお0.0読みください。

表示されている「ブラック ボックス」は、下にあるビューまたはウィンドウからのものです。「ブラックボックス」の代わりにビューの色だけが必要な場合は、次のようにします。

self.navigationController.view.backgroundColor = self.view.backgroundColor;

[UIView animateWithDuration:1.0 delay:1.0 options:0 animations:^{
    self.navigationController.navigationBar.alpha = 0.0;
} completion:NULL];

実際のビューを以前の場所にしたい場合は、ビューnavigationBarの を増やす必要がありheightます。

[UIView animateWithDuration:1.0 delay:1.0 options:0 animations:^{
    self.navigationController.navigationBar.alpha = 0.0;

    CGFloat navigationBarHeight = self.navigationController.navigationBar.frame.size.height;

    CGRect frame = self.view.frame;
    frame.origin.y -= navigationBarHeight;
    frame.size.height += navigationBarHeight;
    self.view.frame = frame;
} completion:NULL];

Answer 4

の barStyle に部分的に依存するいくつかのオプションがありますUINavigationBar。主なことは、説明している効果を得るためにアルファ プロパティを必ずしもアニメーション化する必要はないということです。

UIBarStyleDefaultまたはUIBarStyleBlackOpaqueオプション Aは、UINavigationBar 半透明プロパティを YES に設定してから、アルファをアニメーション化することです。

            navigationBar.translucent = YES; // ideally set this early, in the nib/storyboard, or viewDidLoad

...

            [UIView animateWithDuration: 1.0
                             animations: ^{

                                 // toggle:
                                 navigationBar.alpha = navigationBar.alpha == 0 ? 1.0 : 0.0;

                             }];

このシナリオでは、アルファが 1.0 であっても、ビューはナビゲーション バーの後ろに配置されます。このシナリオの欠点は、1.0 アルファを使用しても、UINavigationBar の背後にあるビューの背景色の色合いが見える可能性があることです。また、すべてのサブビューを上から 44 ポイント下に配置する必要があります。

UIBarStyleDefaultまたはUIBarStyleBlackOpaqueオプション Bは、クロス ディゾルブ トランジション アニメーションでナビゲーション バーを非表示にすることです。これにより、 のスーパービューが表示されUINavigationBarます。を使用している場合、ビューUINavigationControllerの黒い背景がUINavigationController表示されますが、ビューに合わせてビューの背景色を設定して、UINavigationController必要な効果を得ることができます。

    UINavigationBar* navigationBar = self.navigationController.navigationBar;

    self.navigationController.view.backgroundColor = self.view.backgroundColor;
    [UIView transitionWithView: navigationBar
                      duration: 1.0
                       options: UIViewAnimationOptionTransitionCrossDissolve
                    animations: ^{
                        // toggle:
                        navigationBar.hidden = !navigationBar.hidden;
                    }
                    completion: nil];

このソリューションで注意すべきことの 1 つはUINavigationController、UINavigationBar. サブビューが左上に固定されている場合、サブビューが 44 ピクセル上にシフトする可能性があることを除いて、これは問題ありません。これを回避するには、代わりにサブビューをビューの下部に固定することを検討してください (スプリングまたはレイアウト制約のいずれかを使用)。

UIBarStyleDefaultまたはUIBarStyleBlackOpaqueオプション CUINavigationBarは、再びクロス ディゾルブ トランジション アニメーションを使用して、別のビューでを覆い隠すことです。

        UINavigationBar* navigationBar = self.navigationController.navigationBar;

        [UIView transitionWithView: navigationBar
                          duration: 1.0
                           options: UIViewAnimationOptionTransitionCrossDissolve | UIViewAnimationOptionAllowAnimatedContent
                        animations: ^{

                            // toggle:
                            const int tag = 1111; 
                            UIView* navOverlayView = [navigationBar viewWithTag: tag];
                            if ( navOverlayView == nil )
                            {
                                navOverlayView = [[UIView alloc] initWithFrame: CGRectInset( navigationBar.bounds, 0, -3 ) ];
                                navOverlayView.backgroundColor = self.view.backgroundColor;
                                navOverlayView.tag = tag;
                                [navigationBar addSubview: navOverlayView];
                            }
                            else
                            {
                                [navOverlayView removeFromSuperview];
                            }
                        }
                        completion: nil];

UIBarStyleBlackTranslucentUINavigationBar :は既に半透明であり、ビューは既にその背後にあるため、このオプションが最も簡単です。単純にアルファをアニメーション化します:

    [UIView animateWithDuration: 1.0
                     animations: ^{

                         // toggle:
                         navigationBar.alpha = navigationBar.alpha == 0 ? 1.0 : 0.0;

                     }];