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

Question

我使用此代码将自定义图像用作整个应用程序中的后退按钮.

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

图像尺寸为30 x 30.

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

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

编辑:

我不想使用自定义后退按钮,因为这会强制我禁用iOS7中的滑动/后退手势

Answer 1

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

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

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

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

尝试使用对齐插图创建UIImage,然后设置后退指示器图像.

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];

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

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

Answer 2

那么只需按照其中一个建议来修复布局并丢失iOS 7"后退手势",然后用一个修复它UIScreenEdgePanGestureRecognizer!

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

Answer 3

请看下面的编辑!

不久前我在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;

我的图像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(); 

图像wordSpace是我在photoshop中制作的一个清晰的png,所以我的新后退按钮图像没有被拉伸.您可能希望在顶部放置一个清晰的png,将图标向下推一点.在photoshop中制作它的大小.你认为调整应该是什么.您可能需要对此进行一些改进.并确保更改CGSize,使其适合您的图标和空白区域.

我的话回来了,所以我看了看

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

我不得不玩那条线以使它看起来尽可能好但它最终给了我想要的-20.我甚至调整了我的第二个变量0,这移动了实际的图标.-5把图标放到远处,但它的另一个选项是清晰的png.

现在来处理你希望它成为一个真正的后退按钮的事实.看看我发布的第一行代码.按钮上的操作是@selector(backButtonClicked).所以你需要做的就是制作这种方法,你应该好好去!

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

希望这个对你有帮助.

编辑*****

我正在玩我的代码一点点,并找到了一个更好的方法来移动后面的图标.我只是使用了一个轮子,因为我没有你做的那个,但是它的工作方式是一样的.

既然您不想要标题,可以使用此代码创建按钮,

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

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

只需用你的图标名称更改781内容即可.然后你可以用以下方法移动它,

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

看看这张照片.

这显示了相当大的图标,但我想向您展示这个想法.Edge插入的数字是Top,Left,Bottom和Right.如果您不需要以这种方式移动,请不要左右触摸,更改顶部和底部.但请注意,如果你需要像我一样将它向下移动20点,(太多了)你需要在底部偏移负面,否则图标将被压缩.这是所有零的看起来.

所以你可以随心所欲地移动它,但你仍然需要设置@selector(backButtonClicked)使它像真正的后退按钮一样工作.

Answer 4

这是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
    }

如果你的后退按钮有背景颜色,它可能无法正常工作.

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