自定义导航栏样式 - iOS

时间:2011-04-07 04:03:50

标签: objective-c cocoa-touch ios uinavigationbar

  

可能重复:
  How to add background image on iphone Navigation bar ?

iOS - 纽约时报如何做这个自定义顶部导航栏样式?

就此而言,最底层的一个?

ny-times

7 个答案:

答案 0 :(得分:143)

@ ludwigschubert的解决方案然而在iOS 5上工作。也没有覆盖-drawRect:,因为它甚至没有被调用。
从iOS 5开始,导航栏由UINavigationBarBackgroundUINavigationItemView组成。还有其他两种方法可以让它发挥作用。


  1. 将自定义图像视图插入索引1 而不是0.这使得它在按住按钮下方时显示在原生背景图像上方。

  2. 使用iOS 5的 UIAppearance协议。您可以为所有

  3. 设置背景图像

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

    或只有一个导航栏:

    [navigationController.navigationBar setBackgroundImage:myImage forBarMetrics:UIBarMetricsDefault]

    在开发纵向和横向的iPhone应用时,请确保提供两个(UIBarMetricsDefault& UIBarMetricsLandscapePhone)图像。

答案 1 :(得分:31)

编辑:这已经过时了;对于iOS5,@ Jenox有一个much better answer below

导航条的完全自定义样式非常困难。 我所知道的最好的文章是塞巴斯蒂安·塞利斯的这篇文章: http://sebastiancelis.com/2009/12/21/adding-background-image-uinavigationbar/

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

答案 2 :(得分:24)

只是为了添加@Jenox给出的答案,如果你想同时支持iOS 4.xx和iOS 5.xx设备(即你的DeploymentTarget是4.xx),你必须小心将调用包装到外观代理通过在运行时检查“外观”选择器是否存在。

您可以通过以下方式实现:

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

您还应该保留您可能实施的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

这将使iOS 4和iOS 5设备中的NavBar外观相同。

答案 3 :(得分:4)

将其复制到viewDidLoad中。它将检查iOS 5并使用首选方法,否则它将为navBar for 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];
}

答案 4 :(得分:2)

您可以创建一个类别并创建一个自定义方法来添加您想要的任何视图 - 图像,按钮,滑块。 例如,这里是我使用的代码 - 它添加了自定义backgroundimage,backButton和Label。

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


}

然后,在任何视图控制器中,您都可以通过调用[self.navigationController.navigationBar setBarForCard];

来更改导航栏

这适用于 IOS 4 IOS 5

答案 5 :(得分:1)

这是iOS 5的更好方法

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

答案 6 :(得分:0)

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