自定义导航栏样式 - iOS

Custom nav bar styling - iOS

提问by phil swenson

Possible Duplicate:
How to add background image on iphone Navigation bar ?

可能重复：
如何在 iphone 导航栏上添加背景图像？

iOS - How did the NY Times do this custom top navigation bar styling?

iOS - 《纽约时报》是如何制作这种自定义顶部导航栏样式的？

And for that matter, the bottom one?

就此而言，最底层的？

采纳答案by ludwigschubert

EDIT: This is outdated; for iOS5 there's a muchbetter answer below, by @Jenox.

编辑：这已经过时了；对于iOS5的有一个很大低于更好的答案，通过@Jenox。

Completely custom styling for Navigation Bars is surprisingly difficult. The best writeup I know of is this one by Sebastian Celis: http://sebastiancelis.com/2009/12/21/adding-background-image-uinavigationbar/

完全自定义导航栏样式非常困难。我所知道的最好的文章是 Sebastian Celis 的这篇文章：http: //sebastianlis.com/2009/12/21/adding-background-image-uinavigationbar/

This doesn't override drawRect, and includes a good explanation why that's a good thing. Also note you don't have to follow his tutorial. You can download the complete code here: https://github.com/scelis/ExampleNavBarBackground

这不会覆盖 drawRect，并包含一个很好的解释为什么这是一件好事。另请注意，您不必遵循他的教程。你可以在这里下载完整的代码：https: //github.com/scelis/ExampleNavBarBackground

回答by Christian Schnorr

@ludwigschubert's solution does however notwork on iOS 5. Neither does overriding -drawRect:, because it isn't even called.
As of iOS 5, a navigation bar consist of a UINavigationBarBackgroundand a UINavigationItemView. There are two other ways of getting it work.

@ ludwigschubert的解决方案也不过不是在iOS 5的工作同样没有覆盖-drawRect:的，因为它甚至没有叫。
从 iOS 5 开始，导航栏由 aUINavigationBarBackground和UINavigationItemView. 还有另外两种方法可以让它工作。

---

---

1. Insert your custom image view at index 1instead of 0. This makes it appear above the native background image while staying below the buttons.

2. Make use of iOS 5's UIAppearanceprotocol. You can either set the background image for all

1. 在索引 1而不是 0处插入自定义图像视图。这使它出现在原生背景图像上方，同时保持在按钮下方。

2. 利用 iOS 5 的UIAppearance协议。您可以为所有人设置背景图像

[[UINavigationBar appearance] setBackgroundImage:myImage forBarMetrics:UIBarMetricsDefault]

[[UINavigationBar appearance] setBackgroundImage:myImage forBarMetrics:UIBarMetricsDefault]

or for just one navigation bar:

或仅用于一个导航栏：

[navigationController.navigationBar setBackgroundImage:myImage forBarMetrics:UIBarMetricsDefault]

[navigationController.navigationBar setBackgroundImage:myImage forBarMetrics:UIBarMetricsDefault]

Make sure to provide two images (UIBarMetricsDefault & UIBarMetricsLandscapePhone)when developing an iPhone app for both portrait and landscape.

在为纵向和横向开发 iPhone 应用程序时，请确保提供两个图像（UIBarMetricsDefault 和 UIBarMetricsLandscapePhone）。

回答by bhavinb

Just to add to the answer given by @Jenox, if you want to support both iOS 4.xx and iOS 5.xx devices (i.e. your DeploymentTarget is 4.xx), you must be careful in wrapping the call to the appearance proxy by checking at runtime if the 'appearance' selector is present or not.

只是添加到@Jenox 给出的答案中，如果您想同时支持 iOS 4.xx 和 iOS 5.xx 设备（即您的 DeploymentTarget 是 4.xx），则必须小心将调用包装到外观代理在运行时检查“外观”选择器是否存在。

You can do so by:

你可以这样做：

//Customize the look of the UINavBar for iOS5 devices
if ([[UINavigationBar class]respondsToSelector:@selector(appearance)]) {
    [[UINavigationBar appearance] setBackgroundImage:[UIImage imageNamed:@"NavigationBar.png"] forBarMetrics:UIBarMetricsDefault];
}

You should also leave the iOS 4.xx workaround that you may have implemented. If you have implemented the 'drawRect' workaround for iOS 4.xx devices, as mentioned by @ludwigschubert, you should leave that in:

您还应该保留您可能已实施的 iOS 4.xx 解决方法。如果您已经为 iOS 4.xx 设备实现了“drawRect”解决方法，如@ludwigschubert 所述，您应该将其保留在：

@implementation UINavigationBar (BackgroundImage)
//This overridden implementation will patch up the NavBar with a custom Image instead of the title
- (void)drawRect:(CGRect)rect {
     UIImage *image = [UIImage imageNamed: @"NavigationBar.png"];
     [image drawInRect:CGRectMake(0, 0, self.frame.size.width, self.frame.size.height)];
}
@end

This will get the NavBar look the same in both iOS 4 and iOS 5 devices.

这将使 NavBar 在 iOS 4 和 iOS 5 设备中看起来相同。

回答by chazzwozzer

Copy this into viewDidLoad. It will check for iOS 5 and use the preferred method, otherwise it will add a subview to the navBar for iOS versions < 5.0. This will work provided that your custom background image has no transparencies.

将此复制到 viewDidLoad。它将检查 iOS 5 并使用首选方法，否则它将为 iOS 版本 < 5.0 的导航栏添加一个子视图。如果您的自定义背景图像没有透明胶片，这将起作用。

float version = [[[UIDevice currentDevice] systemVersion] floatValue];
NSLog(@"%f",version);
UIImage *backgroundImage = [UIImage imageNamed:@"myBackgroundImage.png"];
if (version >= 5.0) {
    [self.navigationController.navigationBar setBackgroundImage:backgroundImage forBarMetrics:UIBarMetricsDefault];
}
else
{
    [self.navigationController.navigationBar insertSubview:[[[UIImageView alloc] initWithImage:backgroundImage] autorelease] atIndex:1];
}

回答by Nikita Pestrov

You can just create a category and create a custom method to add any view you want - images,buttons,sliders. Foe example, here is the code that i use - it adds custom backgroundimage,backButton and Label.

您只需创建一个类别并创建一个自定义方法来添加您想要的任何视图 - 图像、按钮、滑块。例如，这是我使用的代码 - 它添加了自定义背景图像、backButton 和标签。

@interface UINavigationBar (NavigationBar)
-(void)setBarForCard;
@end


@implementation UINavigationBar (NavigationBar)

-(void)setBarForCard
{

    UIImageView *aTabBarBackground = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"BarImage"]];
    aTabBarBackground.frame = CGRectMake(0,0,self.frame.size.width,44);
    [self addSubview:aTabBarBackground];
    [self sendSubviewToBack:aTabBarBackground];
    [aTabBarBackground release];

    UIButton *backBtn = [UIButton buttonWithType:UIButtonTypeCustom];
    backBtn.frame =CGRectMake(10, 8, 60, 30);
    [backBtn addTarget:self action:@selector(back:)forControlEvents:UIControlEventTouchUpInside];
    [backBtn setImage:[UIImage imageNamed: @"Back"] forState:UIControlStateNormal];
    [self addSubview:backBtn];

    UILabel *calendar = [[UILabel alloc]init];
    calendar.frame = CGRectMake(105, 13, 109, 21);
    calendar.text = @"Calendar"
    calendar.textColor = [UIColor whiteColor];
    calendar.textAlignment = UITextAlignmentCenter;
    calendar.shadowColor = [UIColor grayColor];
    calendar.shadowOffset = CGSizeMake(0, -1);
    calendar.font = [UIFont fontWithName:@"HelveticaNeue-Bold" size:20];
    calendar.backgroundColor = [UIColor clearColor];    
    [self addSubview:calendar];


}

And then, in any view controller, you can change your navigationbar by calling [self.navigationController.navigationBar setBarForCard];

然后，在任何视图控制器中，您都可以通过调用来更改导航栏 [self.navigationController.navigationBar setBarForCard];

This works both in IOS 4and IOS 5

这适用于IOS 4和IOS 5

回答by iOS Monster

This is a better way for iOS 5

这是 iOS 5 更好的方法

if ([self.navigationController.navigationBar respondsToSelector:@selector(setBackgroundImage:forBarMetrics:)] ) {
 UIImage *image = [UIImage imageNamed:@"navBarImg.png"];
 [self.navigationController.navigationBar setBackgroundImage:image forBarMetrics:UIBarMetricsDefault];
}

回答by saadnib

you can change the tint color of navigation bar to change its color and also you can use an image in navigation bar view. For bottom bar i think they are using a view with three custom buttons on it.

您可以更改导航栏的色调颜色以更改其颜色，也可以在导航栏视图中使用图像。对于底部栏，我认为他们正在使用带有三个自定义按钮的视图。