【问题标题】:Customization of UINavigationBar and the back buttonUINavigationBar 和返回按钮的自定义
【发布时间】:2011-08-15 15:26:01
【问题描述】:

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

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

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

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

【问题讨论】:

    标签: iphone ios ipad


    【解决方案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:)];
    }
    


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

    一些结果示例:

    返回按钮

    取消/完成按钮

    【讨论】:

    • 出色的工作!请您与我分享图片“button_back.png”吗?我们需要设置按钮的“按下”状态吗?
    • 抱歉,我不能分享这些图片,它们是由 UX 设计师为我的雇主支付的项目设计的。默认情况下,当 UIButton 被按下时,图像会得到某种半透明的覆盖,所以我没有添加任何特定的按下状态图像,但如果你需要这种可定制性,你当然可以添加它。
    • 请注意,在 iOS 5 中,stretchableImageWithLeftCapWidth:topCapHeight: 已被弃用,您应该改用 capInsets。参考:developer.apple.com/library/ios/#documentation/uikit/reference/…
    • 这里的棘手之处在于您没有自定义backBarButtonItem,,而是设置了leftBarButtonItem。这让我大吃一惊,文档更清楚地说明了这一点:“如果您想在该项目是后面的项目时使用不同的标题,请使用 backBarButtonItem 属性。”以及进一步......“导航栏默认在左侧显示后退按钮,在中心显示标题。您可以通过指定自定义左视图、居中视图或右视图来更改此行为。”起初这并不明显。
    【解决方案2】:

    这段代码我用过几次:

    - (void)viewDidLoad {
        [super viewDidLoad];
    
        // Set the custom back button
        UIImage *buttonImage = [UIImage imageNamed:@"back_button.png"];
    
        //create the button and assign the image
        UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
        [button setImage:buttonImage forState:UIControlStateNormal];
    
        //set the frame of the button to the size of the image (see note below)
        button.frame = CGRectMake(0, 0, buttonImage.size.width, buttonImage.size.height);
    
        [button addTarget:self action:@selector(back) forControlEvents:UIControlEventTouchUpInside];
    
        //create a UIBarButtonItem with the button as a custom view
        UIBarButtonItem *customBarItem = [[UIBarButtonItem alloc] initWithCustomView:button];
        self.navigationItem.leftBarButtonItem = customBarItem;
    
     // Cleanup
     [customBarItem release];
    }
    
    -(void)back {
        // Tell the controller to go back
        [self.navigationController popViewControllerAnimated:YES];
    }
    

    来自this 网站。 希望对您有所帮助!

    【讨论】:

    • 这解决了我们的问题,谢谢!唯一的问题是您必须将此代码放入每个需要后退按钮的视图控制器中。如果有更通用的解决方案会很酷。
    【解决方案3】:

    您必须构建一个自定义 UIButton 并将其传递给 UIBarButton initWithCustomView。

    【讨论】:

      【解决方案4】:

      这就是你要做的。

      1) 在 Interface Builder 中为导航项添加自定义按钮:

      2) 在代码中执行以下操作:

      #define IS_IOS7  ([[[UIDevice currentDevice] systemVersion] compare:@"7.0" options:NSNumericSearch] != NSOrderedAscending)
      
      - (void)viewDidLayoutSubviews {
      
          [super viewDidLayoutSubviews];
      
          if (IS_IOS7) { 
      
              [self shiftView:self.navigationItem.leftBarButtonItem.customView horizontallyBy:-11];
              [self shiftView:self.navigationItem.rightBarButtonItem.customView horizontallyBy:11];
          }
      }
      
      - (void)shiftView:(UIView*)view horizontallyBy:(int)offset {
            CGRect frame = view.frame;
            frame.origin.y += offset;
            view.frame = frame;
      }
      

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2013-03-18
        • 1970-01-01
        • 2013-09-23
        相关资源
        最近更新 更多