Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>I just went through the process of figuring this out. Basically, you need to create custom stretchable images and use them as the button's background to get rid of the shine. Replacing the back buttons in a UINavigationController is a bit tougher. For that I used a UINavigationControllerDelegate to replace the default back button with my custom button.</p> <p>Here's some code:</p> <ol> <li><p>Create a category on UIBarButtonItem that creates your custom button. Here's mine. I use this category to customize both regular bar buttons and back buttons:</p> <pre><code>@interface UIBarButtonItem (UIBarButtonItem_customBackground) + (id) customBarButtonWithTitle:(NSString *)title target:(id)target selector:(SEL)selector; + (id) customBackButtonWithTitle:(NSString *)title target:(id)target selector:(SEL)selector; @end @implementation UIBarButtonItem (UIBarButtonItem_customBackground) + (id) customButtonWithImageNamed:(NSString *)imageName selectedImageNamed:(NSString *)selectedImageName leftCapWidth:(CGFloat)leftCapWidth edgeInsets:(UIEdgeInsets)edgeInsets title:(NSString *)title target:(id)target selector:(SEL)selector { UIButton* customButton = [UIButton buttonWithType:UIButtonTypeCustom]; [customButton addTarget:target action:selector forControlEvents:UIControlEventTouchUpInside]; customButton.titleLabel.font = [UIFont boldSystemFontOfSize:12.0f]; customButton.titleLabel.shadowColor = [UIColor colorWithRed:0.0f/255.0f green:0.0f/255.0f blue:0.0f/255.0f alpha:0.25f]; customButton.titleLabel.shadowOffset = CGSizeMake(0.0f, -1.0f); customButton.titleLabel.lineBreakMode = UILineBreakModeTailTruncation; customButton.titleEdgeInsets = edgeInsets; UIImage* navButtonBackgroundImage = [[UIImage imageNamed:imageName] stretchableImageWithLeftCapWidth:leftCapWidth topCapHeight:0.0f]; UIImage* navButtonPressedBackgroundImage = [[UIImage imageNamed:selectedImageName] stretchableImageWithLeftCapWidth:leftCapWidth topCapHeight:0.0f]; [customButton setBackgroundImage:navButtonBackgroundImage forState:UIControlStateNormal]; [customButton setTitle:title forState:UIControlStateNormal]; [customButton setBackgroundImage:navButtonPressedBackgroundImage forState:UIControlStateHighlighted]; [customButton setBackgroundImage:navButtonPressedBackgroundImage forState:UIControlStateSelected]; CGSize size = CGSizeMake(30.0f, 30.0f); if (title != nil) { size = [[NSString stringWithString:title] sizeWithFont:customButton.titleLabel.font]; } customButton.frame = CGRectMake(0.0f, 0.0f, size.width + 20.0f, 30.0f); customButton.layer.shouldRasterize = YES; customButton.layer.rasterizationScale = [[UIScreen mainScreen] scale]; return [[[UIBarButtonItem alloc] initWithCustomView:customButton] autorelease]; } + (id) customBarButtonWithTitle:(NSString *)title target:(id)target selector:(SEL)selector { return [self customButtonWithImageNamed:@"navButtonBG.png" selectedImageNamed:@"navButtonPressedBG.png" leftCapWidth:6.0f edgeInsets:UIEdgeInsetsMake(0.0f, 5.0f, 0.0f, 5.0f) title:title target:target selector:selector]; } + (id) customBackButtonWithTitle:(NSString *)title target:(id)target selector:(SEL)selector { return [self customButtonWithImageNamed:@"backButtonBG.png" selectedImageNamed:@"backButtonPressedBG.png" leftCapWidth:12.0f edgeInsets:UIEdgeInsetsMake(0.0f, 11.0f, 0.0f, 5.0f) title:title target:target selector:selector]; } @end </code></pre></li> <li><p>Add the button to your UINavigationBar</p> <pre><code>UIBarButtonItem* logoutButton = [UIBarButtonItem customBarButtonWithTitle:@"Logout" target:self selector:@selector(logout)]; self.navigationItem.rightBarButtonItem = logoutButton; </code></pre></li> <li><p>If you also want to replace the UINavigationController's back buttons, setup a UINavigationControllerDelegate and implement the willShowViewController method like so:</p> <pre><code>- (void)navigationController:(UINavigationController *)navigationController willShowViewController:(UIViewController *)viewController animated:(BOOL)animated { if([navigationController.viewControllers count ] &gt; 1) { UIViewController* backViewController = [navigationController.viewControllers objectAtIndex:(navigationController.viewControllers.count - 2)]; NSString* backText = backViewController.title; UIBarButtonItem* newBackButton = [UIBarButtonItem customBackButtonWithTitle:backText target:navigationController selector:@selector(popViewControllerAnimated:)]; viewController.navigationItem.leftBarButtonItem = newBackButton; viewController.navigationItem.hidesBackButton = YES; } } </code></pre></li> <li><p>Here are the stretchable images I'm using:</p> <ul> <li>Back button: <img src="https://i.stack.imgur.com/sC1KF.png" alt="back button"> Pressed: <img src="https://i.stack.imgur.com/OrZB2.png" alt="enter image description here"></li> <li>Regular button: <img src="https://i.stack.imgur.com/cZxtR.png" alt="enter image description here"> Pressed: <img src="https://i.stack.imgur.com/bHGHD.png" alt="enter image description here"></li> </ul></li> </ol>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload