web-dev-qa-db-ja.com

カスタムナビゲーションバー

ドリブルをクロールしていたところ、付属のデザインが見つかりました。このようにカスタムナビゲーションバーを作成する方法を知りました。ナビゲーションバーを一度作成して、すべてのビューコントローラーで暗黙的に再利用する方法を意味します。

私はある種のルートビューコントローラーを持ち、他のビューコントローラーを継承することを考えていましたが、これを行う方法がわかりません。

どんなアイデアやリンクも届きます！

乾杯。

シリル

Nav bar image

iphoneiosuser-interfaceuinavigationcontrollernavigationcontroller
32
Cyril

IOS5のおかげで、サブクラス化したり、カテゴリを作成したりすることなく、UINavigationBarの外観をカスタマイズできるようになりました。

次のコードブロック（applicationDidFinishLoading：メソッドに配置）は、アプリケーション全体のUINavigationBarを、指定した画像に変更します。

注、これはiOS5でのみ機能します

[[UINavigationBar appearance] setBackgroundImage:[UIImage imageNamed:@"nav bar.png"] forBarMetrics:UIBarMetricsDefault];

ただし、viewDidLoadで次のコードを使用して、現在のビューコントローラーに応じて単一のUINavigationBarの外観を変更することもできます。

[self.navigationController.navigationBar setBackgroundImage:[UIImage imageNamed:@"nav bar.png"] forBarMetrics:UIBarMetricsDefault];

上記のコードは、iOS5のおかげでUINavigationBarの外観をカスタマイズする新しい方法についてのみ説明しています。ただし、ボタンの実装方法については説明していません。

ただし、ボタンの追加はまったく別のゲームです。このため、UINavigationBarをサブクラス化してから、必要に応じてボタンを追加することをお勧めします。おそらく、特定のビューで実行される標準のUINavigationBarだけでなくカスタムのUIBarButtonItemsを使用することもできます。

例えば：

UIView *rightButton = [[[UIView alloc] initWithFrame:CGRectMake(0.0f, 0.0f, 30.0f, 30.0f)] autorelease];
[rightButton addSubview:[UIImage imageNamed:@"rightButtonImage.png"]];

UIBarButtonItem *rightButtonItem = [[[UIBarButtonItem alloc] initWithCustomView:rightButton] autorelease];
[rightButtonItem setAction:@selector(rightButtonAction:)];

私はそのコードをテストしていないので、コピー/貼り付けソリューションではありませんが、「カスタム」に見えるUIBarButtonItemsを実現するために何を実行する必要があるかがわかります。

幸運を！

8
Sebastien Peek

古いiOSバージョンでは、UINavigationBarをサブクラス化する必要があります。

@interface CustomNavigationBar : UINavigationBar
@end

@implementation CustomNavigationBar

- (id)initWithCoder:(NSCoder *)aDecoder {
    self = [super initWithCoder:aDecoder];
    if (self) {
        self.opaque = YES;
        self.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:@"CustomBackground"]];
    }
    return self;
}

- (void)drawRect:(CGRect)rect {
    // Skip standard bar drawing
}

@end

ビューコントローラーでカスタムナビゲーションバーを使用するには、XIBで標準クラス名をCustomNavigationBarに変更する必要があります。

また、プログラムでカスタムナビゲーションバーを設定することもできます。

UIViewController *tempController = [[[UIViewController alloc] init] autorelease];
UINavigationController *navigationController = [[[UINavigationController alloc] initWithRootViewController:tempController] autorelease];

NSData *archive = [NSKeyedArchiver archivedDataWithRootObject:navigationController];
NSKeyedUnarchiver *unarchiver = [[[NSKeyedUnarchiver alloc] initForReadingWithData:archive] autorelease];
[unarchiver setClass:[CustomNavigationBar class] forClassName:@"UINavigationBar"];
UINavigationController *customNavigationController = [unarchiver decodeObjectForKey:@"root"];

UIViewController *contentController = [[[ContentViewController alloc] init] autorelease];
customNavigationController.viewControllers = [NSArray arrayWithObject:contentController];

customNavigationControllerにカスタムナビゲーションバーが追加されました。

6
Vadim

navigationBarのカスタム背景を設定する

UIImage *navBackground =[[UIImage imageNamed:@"navbarBackground"] 
                 resizableImageWithCapInsets:UIEdgeInsetsMake(0, 0, 0, 0)];
[[UINavigationBar appearance] setBackgroundImage:navBackground forBarMetrics:UIBarMetricsDefault];

次に、View Controllerで、left、rightBarButtons、titleのカスタムビューを設定します。

self.navigationItem.titleView = customTitleView;
self.navigationItem.leftBarButtonItem = customBarButton;
self.navigationItem.rightBarButtonItem = customBarButton2;
3
agilityvision

独自のUINavigationBarサブクラスを作成し、navigationControllerが必要な場所で使用する必要があります。

このカスタムクラスでは、背景、ボタン、テキストなどを描画します。

更新

実際、この例をよく見ると、UIToolBarのようです。 popViewController:などのボタンにナビゲーションメソッドを割り当てることができます。「情報の確認」と進行状況インジケーターには、ラベルと画像を使用できます。右ボタンは、単なるグラフィックです。

もちろん、提供した例は単なる概念であり、実際のアプリではありません。しかし、いくらかの創造性、数時間のコーディング、さらに数時間のグラフィックデザインにより、これと同じインターフェイスを実現できます。

1
WrightsCS

Categoryを使用して、デリゲートファイル（.m）に以下のコードを追加します

@implementation UINavigationBar (UINavigationBarCategory)

- (void)drawRect:(CGRect)rect
{
    UIImage *navBg = [UIImage imageNamed:@"NavBar.png"];
    [navBg drawInRect:CGRectMake(0, 0, 320, 44)];
}
@end

編集：

Categoryを使用するのは良い方法ではありません。Categoryを使用せずにデモを作成しました。 ここ をクリックしてください。

0
xda1001

IOSでの最近のプロジェクトの1つについて多くの調査を行った後、UINavigationControllerを使用せずにナビゲーションバーのみをカスタマイズするためにサブクラスを使用することにしました。

import UIKit

class CustomNavigationBar: UINavigationBar {
    override func awakeFromNib() {
        super.awakeFromNib()
        self.setBackgroundImageOfNavBar(imagenName: "navbar.jpg")
        self.setShadowImageOfNavBar(imagenName: "")
        self.setTitleAttribute()
        self.setBarAsTranslucent()
    }
    func setBackgroundImageOfNavBar(imagenName:String){
        //pass the image name and set the image here
         self.setBackgroundImage(UIImage(named: imagenName), for: .default)
        //if you want white backgroung just remove the image
       // self.setBackgroundImage(UIImage(), for: .default)
        //if you want to set backgroung color
        self.backgroundColor = UIColor.clear
    }

    func setShadowImageOfNavBar(imagenName:String){
        //pass the image name and set the image here
        // self.shadowImage = UIImage(named: imagenName)
        //if you want white backgroung just remove the image
        self.shadowImage = UIImage()
    }
    func setTitleAttribute(){
        //add NSAttributedStringKey as you want to customize title Color and font provide your app font family name open below commented code
        //        let textAttributes = [NSAttributedStringKey.foregroundColor:UIColor.black,NSAttributedStringKey.font: UIFont(name: "Enter Your App Font Name", size: 18)!]

        //set only title color of navigation bar by below code
        let textAttributes = [NSAttributedStringKey.foregroundColor:#colorLiteral(red: 0.8784313725, green: 0.1882352941, blue: 0.3254901961, alpha: 1)]
        self.titleTextAttributes = textAttributes
    }
    func setBarAsTranslucent(){
        self.isTranslucent = false
    }
}

私は共有しています 多くのカスタム設定を行うリンク 背景画像、テキストシャドウなどの追加を含みます。

0
Sanjay-Dev

ストックUINavigationControllerを使用して、UINavigationBarを非表示にすることができます。

次に、すべてのナビゲーション要素を持つUIViewControllerの独自のサブクラスを作成し、次にコンテンツが移動するフレックスサイズのビューを作成します。すべてのクラスをこの要素のサブクラスにして、ビューに描画します。ボタンは単に[self.navigationController popViewControllerAnimated:YES]を呼び出す必要があり、ビューのUILabelはそのテキストをself.titleに設定するだけです。

0
Tim