Question

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

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

任何想法或链接都将适用！

干杯。

西里尔

Nav bar image

Answer 1

感谢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，但可以使用特定视图的自定义UIBarButtonItem。

例如：

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需要做些什么。

祝你好运！

Answer 2

在较旧的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有自定义导航栏。

Answer 3

为导航栏设置自定义背景

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

然后在View Controller中设置左，右栏栏和标题的自定义视图。

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

Answer 4

您需要创建自己的UINavigationBar子类，并在需要navigationController的地方使用。

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

更新

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

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

Answer 5

使用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的情况下编写了一个演示，点击here。

Answer 6

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

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

Answer 7

在对我最近在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
    }
}

我分享了a link which does a lot of custom stuff，包括添加背景图片，文本阴影等。

自定义导航栏

7 个答案:

更新