ios 自定义导航栏

Custom navigation bar

提问by Cyril

I was crawling Dribble and found the attached design. I was wondering how to do a custom navigation bar like this. I mean how create the navigation bar once and reuse it implicitly for every view controllers.

我正在爬行 Dribble 并找到了附加的设计。我想知道如何做这样的自定义导航栏。我的意思是如何创建一次导航栏并为每个视图控制器隐式地重用它。

I was thinking about having a kind of root view controller and inherit for other view controllers, but I don't know how to do this.

我正在考虑拥有一种根视图控制器并为其他视图控制器继承，但我不知道如何做到这一点。

Any idea or link will be appreachated!

任何想法或链接将被appreachated！

Cheers.

干杯。

Cyril

西里尔

回答by Sebastien Peek

Thanks to iOS5 you are now able to customise the appearance of a UINavigationBar without having to subclass or create a category.

感谢 iOS5，您现在可以自定义 UINavigationBar 的外观，而无需创建子类或创建类别。

The following code block (put it in your applicationDidFinishLoading: method) will change the UINavigationBar for the whole application to whatever image you give it.

以下代码块（将其放入您的 applicationDidFinishLoading: 方法中）会将整个应用程序的 UINavigationBar 更改为您提供的任何图像。

Note, this will ONLY work in iOS5

请注意，这仅适用于 iOS5

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

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

However, you are also able to change the appearance of a single UINavigationBar depending on what view controller you're in by using the following code in viewDidLoad.

但是，您还可以通过在 viewDidLoad 中使用以下代码，根据您所在的视图控制器更改单个 UINavigationBar 的外观。

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

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

The above code is solely discussing the new ways to customise the UINavigationBar appearance thanks to iOS5. However, it does not discuss the way that the buttons have been implemented.

上面的代码仅讨论了 iOS5 带来的自定义 UINavigationBar 外观的新方法。但是，它没有讨论按钮的实现方式。

However, adding the buttons is a different game altogether. For this, I would recommend subclassing UINavigationBar, and then adding in the buttons where needed through that. You could probably even get away with just a standard UINavigationBarbut custom UIBarButtonItems that run off a particular view.

但是，添加按钮是完全不同的游戏。为此，我建议子类化UINavigationBar，然后通过它在需要的地方添加按钮。您甚至可以只使用一个标准UINavigationBar但自定义的UIBarButtonItems 来运行特定视图。

For example:

例如：

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

I haven't tested that code so it isn't a copy/paste solution, but it gives you an idea of what needs to be done to accomplish "custom" looking UIBarButtonItems.

我尚未测试该代码，因此它不是复制/粘贴解决方案，但它让您了解需要完成哪些操作才能完成“自定义”外观的 UIBarButtonItems。

Good luck!

祝你好运！

回答by Vadim

In older iOS versions you have to subclass UINavigationBar i.e.:

在较旧的 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

To use a custom navigation bar in your view controller, you should change a standard class name to CustomNavigationBarin XIB.

要在视图控制器中使用自定义导航栏，您应该将标准类名更改为CustomNavigationBarin XIB。

Also, you can set the custom navigation bar programmatically:

此外，您可以以编程方式设置自定义导航栏：

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

Now customNavigationControllerhas the custom navigation bar.

现在customNavigationController有自定义导航栏。

回答by agilityvision

set a custom background for the NavigationBar

为 NavigationBar 设置自定义背景

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

then in your View Controller set custom views for left, rightBarButtons and title.

然后在您的视图控制器中为 left、rightBarButtons 和 title 设置自定义视图。

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

回答by WrightsCS

You would need to make your own UINavigationBarsubclass, and use in places where you would need a navigationController.

您需要创建自己的UINavigationBar子类，并在需要导航控制器的地方使用。

In this custom class is where you will draw the background, buttons, text, etc.

在这个自定义类中，您将绘制背景、按钮、文本等。

---

---

Update

更新

Actually, taking a closer look at this example, it appears to be a UIToolBar. You can assign navigation methods to the buttons like popViewController:etc. For the "Confirm Information" and progress indicator, you can use a label and an image. For the right button, its just a graphic.

实际上，仔细看看这个例子，它似乎是一个UIToolBar. 您可以为按钮popViewController:等分配导航方法。对于“确认信息”和进度指示器，您可以使用标签和图像。对于右键，它只是一个图形。

Of course, the example you provided is simply a concept, and not an actual app. But with some creativity, a few hours of coding and a few more hours of graphics design, you can achieve this same interface.

当然，您提供的示例只是一个概念，而不是实际的应用程序。但是通过一些创造力、几个小时的编码和几个小时的图形设计，您可以实现相同的界面。

回答by Tim

You can use the stock UINavigationController and hide the UINavigationBar.

您可以使用库存的 UINavigationController 并隐藏 UINavigationBar。

Then, make your own subclass of UIViewController which has all of the navigation elements, and then a flexing size view where the contents go. Make all of your classes subclass this element and draw into the view. The button simply has to call [self.navigationController popViewControllerAnimated:YES]and the UILabel at view just has to set its text to self.title.

然后，创建您自己的 UIViewController 子类，其中包含所有导航元素，然后是内容所在的可伸缩大小视图。使您的所有类都成为该元素的子类并绘制到视图中。按钮只需调用[self.navigationController popViewControllerAnimated:YES]，视图中的 UILabel 只需将其文本设置为self.title.

回答by xda1001

Using Category, add code below in your delegate file (.m)

使用Category，在您的委托文件 (.m) 中添加以下代码

@implementation UINavigationBar (UINavigationBarCategory)

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

Edit:

编辑：

Using Categoryis not a good way, I wrote a demo without using Category, click here.

使用Category不是一个好方法，我写了一个没有使用的演示Category，点击这里。

回答by Sanjay-Dev

After a lot of research for one of my recent project in IOS .I decided to use subclass for customizing only navigation bar without the using UINavigationController.

在对我最近在 IOS 中的一个项目进行了大量研究之后，我决定使用子类仅自定义导航栏而不使用 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
    }
}

I have shared a link which does a lot of custom stuffincluding adding background images ,text shadow etc.

我分享了一个链接，它做了很多自定义的东西，包括添加背景图像、文本阴影等。