objective-c 如何在 iOS7 中正确定位后退按钮

How to properly position the back button in iOS7

提问by Bernat

I used this code to use a custom image as the back button in the whole app.

我使用此代码在整个应用程序中使用自定义图像作为后退按钮。

[[UINavigationBar appearance] setBackIndicatorImage:[UIImage imageNamed:@"back"]];
[[UINavigationBar appearance] setBackIndicatorTransitionMaskImage:[UIImage imageNamed:@"back"]];

The image dimensions are 30 x 30.

图像尺寸为 30 x 30。

The code adds the image as the back button but the position is not the correct, as you can see in the following image:

该代码将图像添加为后退按钮，但位置不正确，如下图所示：

Any ideas on how to properly position the image without modifying its dimensions (at least the visual part of the image (circle + arrow))?

关于如何在不修改其尺寸的情况下正确定位图像的任何想法（至少是图像的视觉部分（圆圈 + 箭头））？

EDIT:

编辑：

I don't want to use a custom back button because that forces me to disable the swipe/back-gesture in iOS7

我不想使用自定义后退按钮，因为这迫使我在 iOS7 中禁用滑动/后退手势

回答by race_carr

EDIT
I think I might have found the trick (in iOS 7 Design Resource -- UIKit User Interface Catalog.)
Under Bar Button Items

编辑
我想我可能已经找到了技巧（在 iOS 7 设计资源 - UIKit 用户界面目录中。）
在Bar Button Items 下

Note that a bar button image will be automatically rendered as a template image within a navigation bar, unless you explicitly set its rendering mode to UIImageRenderingModeAlwaysOriginal. For more information, see Template Images.

请注意，除非您将其渲染模式明确设置为 UIImageRenderingModeAlwaysOriginal，否则栏按钮图像将自动渲染为导航栏中的模板图像。有关更多信息，请参阅模板图像。

Under Template Imagesthey have some code to specify the UIImageRenderingMode.

在模板图像下，他们有一些代码来指定 UIImageRenderingMode。

UIImage *myImage = [UIImage imageNamed:@"back"];
UIImage *backButtonImage = [myImage imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];  
// now use the new backButtomImage
[[UINavigationBar appearance] setBackIndicatorImage:backButtonImage];
[[UINavigationBar appearance] setBackIndicatorTransitionMaskImage:backButtonImage];

Try creating the UIImage with alignment insets and then set the Back Indicator image.

尝试创建带有对齐插入的 UIImage，然后设置 Back Indicator 图像。

UIEdgeInsets insets = UIEdgeInsetsMake(10, 0, 0, 0); // or (0, 0, -10.0, 0)
UIImage *alignedImage = [[UIImage imageNamed:@"back"] imageWithAlignmentRectInsets:insets];  
[[UINavigationBar appearance] setBackIndicatorImage:alignedImage];
[[UINavigationBar appearance] setBackIndicatorTransitionMaskImage:alignedImage];

You might also try adjusting the position of the UINavigationBar title text

您也可以尝试调整 UINavigationBar 标题文本的位置

[[UINavigationBar appearance] setTitleVerticalPositionAdjustment:(CGFloat)adjustment forBarMetrics:(UIBarMetrics)barMetrics];

回答by Rivera

Well just follow one of the suggestions to fix the layout and lose the iOS 7 "back gesture", and then fix it with a UIScreenEdgePanGestureRecognizer!

好吧，只需按照建议之一修复布局并丢失 iOS 7“后退手势”，然后使用UIScreenEdgePanGestureRecognizer!

A UIScreenEdgePanGestureRecognizer looks for panning (dragging) gestures that start near an edge of the screen. The system uses screen edge gestures in some cases to initiate view controller transitions. You can use this class to replicate the same gesture behavior for your own actions.

UIScreenEdgePanGestureRecognizer 查找从屏幕边缘附近开始的平移（拖动）手势。在某些情况下，系统使用屏幕边缘手势来启动视图控制器转换。您可以使用此类为您自己的操作复制相同的手势行为。

回答by Douglas

PLEASE SEE EDIT BELOW!!!

请参阅下面的编辑！！！

I created a custom back button in iOS7 not too long ago. Mine has an arrow and the word back on it. I do think pawan's suggestion is a good start. To create the back button with your custom image you can use,

不久前我在 iOS7 中创建了一个自定义后退按钮。我的有一个箭头，上面有返回的字样。我确实认为 pawan 的建议是一个好的开始。要使用您可以使用的自定义图像创建后退按钮，

UIBarButtonItem *backButton = [[UIBarButtonItem alloc] initWithTitle:@"Back" style:UIBarButtonItemStylePlain target:self action:@selector(backButtonClicked)];
[backButton setBackgroundImage:finalImage forState:UIControlStateNormal barMetrics:UIBarMetricsDefault];
[backButton setTitlePositionAdjustment:UIOffsetMake(-20, 0) forBarMetrics:UIBarMetricsDefault];

self.navigationItem.leftBarButtonItem = backButton;

My image finalImage is a composite of two different images, but you can just use your "back" image. But I think that is where the problem lies. My image was a composite, you might want to make a composite as well, but put a clear space above your back icon. I placed a clear space to the right of my icon to adjust it's spacing. Here is the code,

我的图像 finalImage 是两个不同图像的合成，但您可以只使用“背面”图像。但我认为这就是问题所在。我的图像是合成的，您可能也想合成，但在后退图标上方留出一个清晰的空间。我在我的图标右侧放置了一个清晰的空间来调整它的间距。这是代码，

UIImage *arrow = [UIImage imageNamed:@"back.png"];
UIImage *wordSpace = [UIImage imageNamed:@"whiteSpace.png"];
CGSize size = CGSizeMake(arrow.size.width + wordSpace.size.width, arrow.size.height);
UIGraphicsBeginImageContext(size);
[arrow drawInRect:CGRectMake(0, 0, arrow.size.width, size.height)];
[wordSpace drawInRect:CGRectMake(arrow.size.width, 0, wordSpace.size.width, wordSpace.size.height)];
UIImage *finalImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext(); 

The Image wordSpace is a clear png that I made in photoshop so my new back button image was not stretched. You might want to place a clear png on top, to push the icon down a little. Make the size.height of it in photoshop for what you think the adjustment should be. You might need to futz with this a bit. And make sure to change up the CGSize so that it fits your icon and the clear space.

图像 wordSpace 是我在 photoshop 中制作的清晰 png，因此我的新后退按钮图像没有被拉伸。您可能想在顶部放置一个清晰的 png，将图标向下推一点。在 Photoshop 中制作它的 size.height，以达到您认为应该进行的调整。你可能需要稍微了解一下。并确保更改 CGSize 以使其适合您的图标和空白空间。

My word back was a bit off, so I looked at

我的话有点不对，所以我看了看

[backButton setTitlePositionAdjustment:UIOffsetMake(-20, 0) forBarMetrics:UIBarMetricsDefault];

I had to play around with that line a bit to make it look as good as possible but it finally gave me what I wanted with the -20. I even adjusted the second variable which is 0 in mine, this moved the actual icon around. -5 put the icon down way to far, but its another option from the clear png.

我不得不稍微玩弄那条线以使其看起来尽可能好，但它最终给了我想要的 -20。我什至调整了我的第二个变量 0，这移动了实际的图标。-5 将图标放在远处，但它是透明 png 中的另一个选项。

Now to deal with the fact that you want it to be an actual back button. Look at the first line of code I posted. The action on the button is @selector(backButtonClicked). So all you need to do is make that method and you should be good to go!

现在处理您希望它是一个实际的后退按钮的事实。看我贴的第一行代码。按钮上的操作是@selector(backButtonClicked)。所以你需要做的就是制作那个方法，你应该很高兴！

- (void)backButtonClicked
{
  NSLog(@"going back");
  [self.navigationController popViewControllerAnimated:YES];
}

Hope this helps a bit.

希望这个对你有帮助。

EDIT*****

编辑*****

I was playing around with my code a little bit and found a better way to move the back icon. I just used a ship's wheel because I didn't have the same one that you did, but it will work the same.

我稍微玩弄我的代码并找到了一种更好的方法来移动后退图标。我只是用了一个船的轮子，因为我没有和你一样的轮子，但它的工作原理是一样的。

Since you don't really want a title you can create the button with this code,

由于您真的不想要标题，因此可以使用此代码创建按钮，

UIImage *image = [UIImage imageNamed:@"781-ships-wheel.png"];

UIBarButtonItem *backButton = [[UIBarButtonItem alloc] initWithImage:image style:UIBarButtonItemStylePlain target:self action:@selector(backButtonClicked)];

Just change the 781 stuff with your icon's name. Then you can move it around with the following,

只需使用您的图标名称更改 781 内容即可。然后你可以使用以下命令移动它，

[backButton setImageInsets:UIEdgeInsetsMake(20, 0, -20, 0)];

Take a look at this picture.

看看这张照片。

This shows the icon down considerably, but I wanted to show you the idea. The numbers for the Edge insets are Top, Left, Bottom, and Right. Don't touch the left and right if you don't need to move it that way, change the top and bottom. Notice however, that if you need to move it down by 20 points like I did, (way too much) you need to offset in the negative for the bottom, or the icon will get compressed. This is what it looks like with all zero's.

这将大大降低图标，但我想向您展示这个想法。边缘插图的数字是顶部、左侧、底部和右侧。如果不需要那样移动，请不要触摸左侧和右侧，更改顶部和底部。但是请注意，如果您需要像我一样将其向下移动 20 点，（太多）您需要在底部的负数处进行偏移，否则图标将被压缩。这就是全零的样子。

So you can pretty much move it where ever you want, but you will still have to set up the @selector(backButtonClicked) to make it work like the real back button.

所以你几乎可以将它移动到任何你想要的地方，但你仍然需要设置@selector(backButtonClicked) 让它像真正的后退按钮一样工作。

回答by fatihyildizhan

This is Swift 2version. The simplest way is like this. Put this code in AppDelegate.'

这是Swift 2版本。最简单的方法是这样的。将此代码放入AppDelegate.'

func application(application: UIApplication, didFinishLaunchingWithOptions launchOptions: [NSObject: AnyObject]?) -> Bool {
        let navigationBarAppearace = UINavigationBar.appearance()
        let image = UIImage(named: "back-btn")
        navigationBarAppearace.backIndicatorImage = image
        navigationBarAppearace.backIndicatorTransitionMaskImage = image

        return true
    }

if your back button has background colour, it may won't work correctly.

如果您的后退按钮具有背景颜色，则它可能无法正常工作。

Add your icon to asset folderfor each resolution like this:

asset folder为每个分辨率添加您的图标，如下所示：

回答by Erhan

You can try this

你可以试试这个

self.navigationItem.leftBarButtonItem.imageInsets = UIEdgeInsetsMake(0, 0, 10, 0);

回答by matt

The problem is that your image is too tall. To prove this, first try this code:

问题是你的图片太高了。为了证明这一点，首先试试这个代码：

UIGraphicsBeginImageContextWithOptions(CGSizeMake(10,20), NO, 0);
CGContextFillRect(UIGraphicsGetCurrentContext(), CGRectMake(6,0,4,20));
UIImage* im = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
self.navbar.backIndicatorImage = im;
UIGraphicsBeginImageContextWithOptions(CGSizeMake(10,20), NO, 0);
UIImage* im2 = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
self.navbar.backIndicatorTransitionMaskImage = im2;

It looks fine. Now change the 20to 30in the two CGSizeMakecalls:

看起来不错。现在将两个调用中的20to更改为：30CGSizeMake

UIGraphicsBeginImageContextWithOptions(CGSizeMake(10,30), NO, 0);
CGContextFillRect(UIGraphicsGetCurrentContext(), CGRectMake(6,0,4,20));
UIImage* im = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
self.navbar.backIndicatorImage = im;
UIGraphicsBeginImageContextWithOptions(CGSizeMake(10,30), NO, 0);
UIImage* im2 = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
self.navbar.backIndicatorTransitionMaskImage = im2;

The icon is now too high.

图标现在太高了。

So just make your image 20 pixels tall and all will be well.

所以只要让你的图像高 20 像素，一切都会好起来的。

回答by carmen_munich

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

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