iOS 7: Custom Back Indicator Image Position

I'm having trouble setting properly a custom back indicator image. The indicator is not centered!

Here is a pic:

I'm setting the indicator image in didFinishLaunchingWithOptions: method...

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {

   UIImage *image = [UIImage imageNamed:@"Back"];
   [UINavigationBar appearance].backIndicatorImage = image;
   [UINavigationBar appearance].backIndicatorTransitionMaskImage = image;

   return YES;
}

How can I center it?

p.s I've already read this Custom back indicator image in iOS 7 not vertically centered, but actually it didn't work for me.

That happens because you are just changing the image source of the Back Indicator in your UINavigationView, and not the frame as well. See, when the UINavigationView is created, the Back Indicator's frame is set to hold the size of the default iOS 7 back button image. The default back button image is bigger than yours, and that's why it looks not aligned.

To fix that you have to reset the Back Indicator's Frame to hold the size of your image. Another option is to create a UIButton with the right frame size and image and assign to a UIBarButtonItem. Then you can replace the backBarButtonItem from your UINavigationItem with the new UIBarButtonItem you created.

iOS 7: Custom Back Indicator Image Position, I'm having trouble setting properly a custom back indicator image. The indicator is not centered! Here is a pic: Screenshot showing� 1- How to override images and use my custom arrow and indicator image? 2- How to make the views fill all the screen so that I can swipe from anywhere? 3- How to make the arrows allows appear as they disappear when I removed ToFadeDuration property? 4- How to position the arrows not on the center of the screen?

 UIEdgeInsets insets = UIEdgeInsetsMake(0, 0, 2, 0);
 UIImage *backArrowImage = [[UIImage imageNamed:@"Back"] imageWithAlignmentRectInsets:insets];

 [[UINavigationBar appearance] setBackIndicatorImage:backArrowImage];
 [[UINavigationBar appearance] setBackIndicatorTransitionMaskImage:backArrowImage];

How to change a back button image, Learn how to change a UINavigationBar back button indicator. backIndicatorImage = UIImage(named: "custom-back") iOS 13 #. In iOS 13, there are changes in navigation bar. Navigation bar can be categories By default, our image will position 8 points from the left edge, 11 points from the bottom� Adaptivity and Layout. People generally want to be able to use their favorite apps on all of their devices and in any context. In an iOS app, you can configure interface elements and layouts to automatically change shape and size on different devices, during multitasking on iPad, in split view, when the screen rotates, and more.

This is how I dealt with the problem using Appearance API and is working great. When changing backButtonBackgroundImage image is automatically stretched across barButtonItem so we must resize it back to original using resizableImageWithCapInsets:. To position it inside barButtonItem we then use imageWithAlignmentRectInsets to add caps around it. Then just assign it using setBackButtonBackgroundImage:forState:barMetrics.

Just play with the numbers and you will find the right position.

int imageSize = 24;
UIImage *barBackBtnImg = [[[UIImage imageNamed:@"backButton"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, imageSize, 0, 0)] imageWithAlignmentRectInsets:UIEdgeInsetsMake(0, -10, 0, -10)];
[[UIBarButtonItem appearance] setBackButtonBackgroundImage:barBackBtnImg forState:UIControlStateNormal barMetrics:UIBarMetricsDefault];

iOS 7: Custom Back Indicator Image Position, iOS 7: Custom Back Indicator Image Position. 由匿名(未验证) 提交于2019-12-03 01:17:01. 可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如� If you replace the system-provided back button chevron with a custom image, supply a custom mask image too. iOS uses this mask to animate the button title during transitions. Don’t include multisegment breadcrumb paths. The back button always performs a single action—returning to the previous screen.

This solution worked for me in Swift 2.1. iOS 9.2.1. (XCode 7.2) on iPhone in portrait Mode. I have tested it on the simulators iPhone 5 and 6+ and it also worked.

import UIKit

class EVEMainNaviVC: UINavigationController
{
    override func viewWillAppear(animated: Bool)
    {
        super.viewWillAppear(animated)
    }

override func viewDidLoad()
{
    super.viewDidLoad()
    self.view.backgroundColor = APP_BACKGROUND_COLOR
    self.setupAppNaviagtionBar()
}


private func setupAppNaviagtionBar()
{
    dispatch_async(dispatch_get_main_queue())
    { () -> Void in
        self.navigationBar.setHeight(55.0)
        self.navigationBar.translucent        = false
        self.navigationBar.alpha              = 1.0
        self.navigationBar.barTintColor       = UIColor.whiteColor()
        let newBackButtonImageInset                         = UIEdgeInsetsMake(0, 0, -6, 0)
        let newBackButtonImage                              = UIImage(named: "back")?.imageWithAlignmentRectInsets(newBackButtonImageInset)
        self.navigationBar.backIndicatorImage               = newBackButtonImage
        self.navigationBar.backIndicatorTransitionMaskImage = newBackButtonImage
        self.navigationBar.tintColor = CUSTOM_BUTTON_COLOR
    }
}
}

Custom Back Indicator Image for Navigation Bar Swift, iOS 7: Custom Back Indicator Image Position, The default back button image is bigger than yours, and that's why it looks not aligned. iOS 9.2.1. navigationBar. Still: This displays the chosen still image as your wallpaper. Perspective: Your still image will change perspective slightly as you move the screen. (If you're prone to motion sickness, don't use this setting.) Live Photo: If you've chosen a Live Photo image, this option will let you animate the image after a firm press (iPhone 6s or later).

I found the simplest solution I have ever seen. Just three things.

  1. Override UINavigationBar and use it in your UINavigationController

    let navigationController = UINavigationController(navigationBarClass: NavigationBar.self, toolbarClass: nil)
    navigationController.viewControllers = [viewController]
    
  2. Setup your indicator images:

    backIndicatorImage = #imageLiteral(resourceName: "back")
    backIndicatorTransitionMaskImage = #imageLiteral(resourceName: "back")
    
  3. Implement layoutSubviews in your custom UINavigationBar class.

    override func layoutSubviews() {
        super.layoutSubviews()
    
        subviews.forEach { (view) in
            if let imageView = view as? UIImageView {
                if imageView.image == backIndicatorImage || imageView.image == backIndicatorTransitionMaskImage {
                    view.frame.origin.y = floor((frame.height - view.frame.height) / 2.0)
                }
            }
        }
    }
    

That is all. :)

How to horizontally position the backIndicatorImage in - iOS, I use this code to add the insets to the backIndicator image for the navigaiton bar. If this is not possible, do I need to go back to adding custom back button ? Maintains the swipe to go back built in gesture recognizers for iOS 7+. func� For instance, line 1 of the above code instructs iOS that the left 13 pixels and the right 6 pixels of the back button image are not scaled or resized. After making the code change, compile and run the app again. You should now have the custom back and edit buttons.

Navigation Bars - Bars - iOS - Human Interface Guidelines, If you replace the system-provided back button chevron with a custom image, supply a custom mask image too. iOS uses this mask to animate the button title� TOKYO, JAPAN - SEPTEMBER 20: An Apple Inc. iPhone 5S sits on display at Apple Store in Ginza district on September 20, 2013 in Tokyo, Japan. The company launched the new iPhone 5C model that will run iOS 7 is made from hard-coated polycarbonate and comes in various colors and the iPhone 5S that features fingerprint recognition security.

backIndicatorImage, iOS 7.0+; Mac Catalyst 13.0+ If you want to customize the back indicator image, you must also set var backIndicatorTransitionMaskImage: UIImage? Images via wonderhowto.com. That's not good enough for me. Thankfully, I hadn't updated to iOS 7.1 yet because it would break my jailbreak, and then I wouldn't be able to get rid of that obtrusive sucker for good. If you still have iOS 7.0, then jailbreak and follow along with me to see how to move it to a less distracting place.

iOS 7 Programming Tips: Customize Navigation Bar and Status Bar, Using background image in navigation bar; Customizing the color of back button; Changing the font of navigation bar title; Adding multiple bar� That's it! The keyboard you chose should now appear throughout iOS in place of the built-in one that comes standard. Simply start using it. How to install a third party keyboard on iPhone and iPad. Apple gives you the ability to use custom third party keyboards on your iPhone or iPad.

Comments
  • Thanks man for the useful explanation! But how can I reset the back indicator's frame?
  • Actually, you would have to create a new UIBarButtonItem with your UIButton that has the new frame and image and assign to your UINavigationItem. Although, you can do something a little more fast and easy. Make your back button's image the same size of the default iOS 7 back button's image. You don't need to actually stretch your buttons, just create a image with the same size of the iOS default back button, and put your button in the center of it. This way your button's image will have spaces on top and bottom that will make it the same size of the default button. Just some photoshop work =)
  • Or, if you still want to create a a custom UIBarButtonItem, here is a good example: appgroup.co.uk/adding-a-uibarbuttonitem-with-a-custom-image
  • The easier the better. So I used Sketch App to make the image fits the back indicator view's size. It works perfectly!
  • I have found that 23px is vertically finy iOS9.2
  • This technique works, but strangely I needed to add an inset to the bottom, to move the image down.
  • This seems to work for vertical positioning, but not horizontal positioning. How do I adjust the horizontal positioning?
  • In Swift it works for horizontal, tho I'm setting the mask and backArrowImage first not sure if it has meaning. let backArrow: UIImage = UIImage.whiteBackArrow.withRenderingMode(.alwaysOriginal).withAlignmentRectInsets(.init(top: 0, left: -10, bottom: 0, right: 0))
  • This is when setting the back button on an actual navigation bar instance. The problem described in the question arises when trying to achieve the same using UINavigationBar apparance to set this up globally.
  • Question was about appearance, not about using custom classes