iphone - UINavigationBar 和返回按钮的自定义

Question

我按照下面的教程自定义了 UINavigationBar。

http://foobarpig.com/iphone/uinavigationbar-with-solid-color-or-image-background.html

我在 UINavigationBar 中应用了背景图片，但是我不知道如何自定义后退按钮。目前，默认的后退按钮不适合自定义 UINavigationBar 的外观。

请教我如何更改默认后退按钮的背景颜色或图像。谢谢。

Answer 1

我编写了以下类别来自定义后退按钮:

UIBarButtonItem+StyledButton.h

@interface UIBarButtonItem (StyledButton)
+ (UIBarButtonItem *)styledBackBarButtonItemWithTarget:(id)target selector:(SEL)selector;
+ (UIBarButtonItem *)styledCancelBarButtonItemWithTarget:(id)target selector:(SEL)selector;
+ (UIBarButtonItem *)styledSubmitBarButtonItemWithTitle:(NSString *)title target:(id)target selector:(SEL)selector;
@end

UIBarButtonItem+StyledButton.m

@implementation UIBarButtonItem (StyledButton)

+ (UIBarButtonItem *)styledBackBarButtonItemWithTarget:(id)target selector:(SEL)selector;
{
   UIImage *image = [UIImage imageNamed:@"button_back"];
   image = [image stretchableImageWithLeftCapWidth:20.0f topCapHeight:20.0f];

   NSString *title = NSLocalizedString(@"Back", nil);
   UIFont *font = [UIFont boldSystemFontOfSize:12.0f];

   UIButton *button = [UIButton styledButtonWithBackgroundImage:image font:font title:title target:target selector:selector];
   button.titleLabel.textColor = [UIColor blackColor];

   CGSize textSize = [title sizeWithFont:font];
   CGFloat margin = (button.frame.size.height - textSize.height) / 2;
   CGFloat marginRight = 7.0f;
   CGFloat marginLeft = button.frame.size.width - textSize.width - marginRight;
   [button setTitleEdgeInsets:UIEdgeInsetsMake(margin, marginLeft, margin, marginRight)]; 
   [button setTitleColor:[UIColor colorWithRed:53.0f/255.0f green:77.0f/255.0f blue:99.0f/255.0f alpha:1.0f] forState:UIControlStateNormal];   

   return [[[UIBarButtonItem alloc] initWithCustomView:button] autorelease];
}

+ (UIBarButtonItem *)styledCancelBarButtonItemWithTarget:(id)target selector:(SEL)selector;
{
   UIImage *image = [UIImage imageNamed:@"button_square"];
   image = [image stretchableImageWithLeftCapWidth:20.0f topCapHeight:20.0f];

   NSString *title = NSLocalizedString(@"Cancel", nil);
   UIFont *font = [UIFont boldSystemFontOfSize:12.0f];

   UIButton *button = [UIButton styledButtonWithBackgroundImage:image font:font title:title target:target selector:selector];   
   button.titleLabel.textColor = [UIColor blackColor];   
   [button setTitleColor:[UIColor colorWithRed:53.0f/255.0f green:77.0f/255.0f blue:99.0f/255.0f alpha:1.0f] forState:UIControlStateNormal];   

   return [[[UIBarButtonItem alloc] initWithCustomView:button] autorelease];
}

+ (UIBarButtonItem *)styledSubmitBarButtonItemWithTitle:(NSString *)title target:(id)target selector:(SEL)selector;
{
   UIImage *image = [UIImage imageNamed:@"button_submit"];
   image = [image stretchableImageWithLeftCapWidth:20.0f topCapHeight:20.0f];

   UIFont *font = [UIFont boldSystemFontOfSize:12.0f];

   UIButton *button = [UIButton styledButtonWithBackgroundImage:image font:font title:title target:target selector:selector];
   button.titleLabel.textColor = [UIColor whiteColor];
   [button setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];   

   return [[[UIBarButtonItem alloc] initWithCustomView:button] autorelease];
}

UIButton+StyledButton.h

@interface UIButton (UIButton_StyledButton)
+ (UIButton *)styledButtonWithBackgroundImage:(UIImage *)image font:(UIFont *)font title:(NSString *)title target:(id)target selector:(SEL)selector;
@end

UIButton+StyledButton.m

@implementation UIButton (UIButton_StyledButton)

+ (UIButton *)styledButtonWithBackgroundImage:(UIImage *)image font:(UIFont *)font title:(NSString *)title target:(id)target selector:(SEL)selector
{
   CGSize textSize = [title sizeWithFont:font];
   CGSize buttonSize = CGSizeMake(textSize.width + 20.0f, image.size.width);

   UIButton *button = [[[UIButton alloc] initWithFrame:CGRectMake(0.0f, 0.0f, buttonSize.width, buttonSize.height)] autorelease];
   [button addTarget:target action:selector forControlEvents:UIControlEventTouchUpInside];
   [button setBackgroundImage:image forState:UIControlStateNormal];
   [button setTitle:title forState:UIControlStateNormal];
   [button.titleLabel setFont:font];

   return button;
}

@end

---

它易于使用，例如:

- (void)viewDidLoad
{
   [super viewDidLoad];

   self.navigationItem.leftBarButtonItem = [UIBarButtonItem styledBackBarButtonItemWithTarget:self selector:@selector(dismissModalViewController)];
   self.navigationItem.rightBarButtonItem = [UIBarButtonItem styledSubmitBarButtonItemWithTitle:NSLocalizedString(@"Done", nil) target:self selector:@selector(doneButtonTouched:)];
}

---

上面的代码来自一个仍在进行中的项目，所以它可以稍微清理一下，但它按预期工作。使用没有文本的图像作为按钮，并确保它们 可拉伸(stretch)(即不要使图像太小并注意渐变)。以下示例中后退按钮的图像只有 31 x 30 像素，但它被拉伸(stretch)以适合文本。

一些结果示例:

后退按钮

取消/完成按钮