web-dev-qa-db-ja.com

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

これは可能ですか？

（アニメーションの）ビューコントローラーでナビゲーションバーのアルファ値を変更したいのですが、self.navigationController.navigationBar.alpha = 0.0;を実行すると、navigationBarが占めていた画面の部分が完全に消えて、黒いボックスが残ります。好きな色ではありません（self.viewの背景色にしたい）。

iosobjective-cuiviewuinavigationcontrolleruinavigationbar
14
Doug Smith

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

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

ここで私はあなたにいくつかcode snippetsを与えます：

  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つのスクリーンショットを追加しました。ビュー自体の背景色は黄色です。 NavigationBarのbackgroundImagesは赤色です。スクリーンショット1は、alpha = 0.2の値を持つNavigationBarを示しています。スクリーンショット2は、alpha = 0.8の値を持つNavigationBarを示しています。

Screenshot for NavigationBar with alpha=0.2Screenshot for NavigationBar with alpha=0.8

21
Computerspezl

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

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

Apple開発者リファレンスから直接：

「ナビゲーションバーに対して行えるカスタマイズはごくわずかです。具体的には、barStyle、tintColor、およびtranslucentプロパティを変更しても問題ありませんが、 UIView、frame、bounds、またはalphaプロパティなどのhiddenレベルのプロパティを直接直接変更しないでください。」

ただし、ナビゲーションバーの半透明プロパティを設定できます。もし、するなら [self.navigationController.navigationBar setTranslucent:YES];が問題を解決するはずです。 UIBarStyle列挙型のいずれかが必要かどうかを確認することもできます。

6
Colin

SwiftでのMickBraunの回答：

  1. AppDelegate.Swiftで、didFinishLaunchingWithOptionsに次の行を追加します。

    // create background images for the navigation bar
let gradientImage44 = UIImage.imageWithColor(UIColor(red: 1.0, green: 0.0, blue: 1.0, alpha: 0.2))
let gradientImage32 = UIImage.imageWithColor(UIColor(red: 1.0, green: 0.0, blue: 1.0, alpha: 0.2))

// customize the appearance of UINavigationBar
UINavigationBar.appearance().setBackgroundImage(gradientImage44, forBarMetrics: .Default)
UINavigationBar.appearance().setBackgroundImage(gradientImage32, forBarMetrics: .Compact)
UINavigationBar.appearance().barStyle = .Default

  2. プログラムでUIImageオブジェクトを作成するための便利なメソッドを実装します。

    class func imageWithColor(colour: UIColor) -> UIImage {
    let rect = CGRectMake(0, 0, 1, 1)

    // Create a 1 by 1 pixel content
    UIGraphicsBeginImageContextWithOptions(rect.size, false, 0.0)
    colour.setFill()
    UIRectFill(rect)

    let image = UIGraphicsGetImageFromCurrentImageContext()
    UIGraphicsEndImageContext()

    return image
}
2
Allanah Douglas

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

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

UINavigationControllerを非表示にしたためにUINavigationBarがビューフレームを更新した場合、このソリューションで注意する必要があるのはレイアウトの問題です。サブビューが左上にアンカーされている場合、サブビューが44ピクセル上にシフトする場合を除いて、これは問題ありません。これを回避するには、代わりにサブビューをビューの下部に固定することを検討してください（スプリングまたはレイアウト制約を使用）。

UIBarStyleDefaultまたはUIBarStyleBlackOpaqueオプションCは、クロスディゾルブ遷移アニメーションを使用して、UINavigationBarを別のビューで覆います。

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

IBarStyleBlackTranslucent：UINavigationBarは既に半透明であり、ビューはすでに背後にあるため、このオプションが最も簡単です。アルファをアニメーション化するだけです：

    [UIView animateWithDuration: 1.0
                     animations: ^{

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

                     }];
1
TomSwift

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

Swift

var navAlpha = // Your appropriate calculation   
self.navigationController!.navigationBar.backgroundColor =  UIColor.red.withAlphaComponent(navAlpha)
0
Deven

ナビゲーションバーの下に背景ビューを設定して、このビューを直接変更することもできます。

private lazy var backgroundView: UIView = UIView()

...

private func setupNavigationBarBackground() {
    guard let navigationBar = navigationController?.navigationBar else { return }
    navigationBar.setBackgroundImage(UIImage(), for: .default)
    navigationBar.isTranslucent = true
    view.addSubview(backgroundView)
    backgroundView.alpha = 0
    backgroundView.backgroundColor = .red
    backgroundView.translatesAutoresizingMaskIntoConstraints = false
    backgroundView.topAnchor.constraint(equalTo: topLayoutGuide.topAnchor).isActive = true
    backgroundView.bottomAnchor.constraint(equalTo: topLayoutGuide.bottomAnchor).isActive = true
    backgroundView.trailingAnchor.constraint(equalTo: view.trailingAnchor).isActive = true
    backgroundView.leadingAnchor.constraint(equalTo: view.leadingAnchor).isActive = true
}

private func changeNavigationBarAlpha(to alpha: CGFloat) {
    backgroundView.alpha = alpha
}
0
GaétanZ

これにより、必要な効果が得られます。

self.navigationController.navigationBar.alpha = 0.0;
self.navigationController.navigationBar.frame = CGRectMake(0,0,320,0);

これをアニメーションで試さなかったのですが、私のviewDidAppearで動作しますが、動作することを願っています。

0
JustAnotherCoder