自定义导航栏

Question

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

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

任何想法或链接都会被采纳！

干杯。

西里尔

Answer 1

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

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

注意，这仅适用于 iOS5

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

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

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

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

但是，添加按钮完全是另一回事。为此，我建议对 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];

然后在视图控制器中为左、右栏按钮和标题设置自定义视图。

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

Answer 4

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

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

---

更新

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

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

Answer 5

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

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

Answer 6

使用 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，点击此处。