自定义UIBarButtonItem在iOS7中对齐出现问题

Question

我遇到了很多人在创建一个UIBarButtonItem时，使用一个UIButton作为自定义视图时也遇到了同样的问题。

基本上按钮要么向左或向右偏移大约10像素。当我使用没有自定义视图的常规BarButtonItem时，不会出现这种情况。

这篇文章提供了部分解决方案：带有自定义视图的UIBarButtonItem

以下是我的代码，我通过子类化UIButton来创建它（如其他帖子中所述）

    - (UIEdgeInsets)alignmentRectInsets {
    UIEdgeInsets insets;
    if ([self isLeftButton]) {
        insets = UIEdgeInsetsMake(0, 9.0f, 0, 0);
    }
    else { // IF ITS A RIGHT BUTTON
        insets = UIEdgeInsetsMake(0, 0, 0, 9.0f);
    }
    return insets;
}


- (BOOL)isLeftButton {
    return self.frame.origin.x < (self.superview.frame.size.width / 2);
}

这个功能很好，但是当我从导航控制器中弹出视图控制器返回到主视图时，按钮的位置仍然不正确，大约持续了0.3秒钟，然后才会闪到正确的缩进位置。

这非常难看，我不知道如何停止它像这样突然移动。有什么想法吗？谢谢！

- Kyle Begeman

Answer 1

我曾经和你以及许多其他人一样遇到了同样的问题。经过长时间的尝试修复，最终我解决了它。这是你需要包含在* -Prefix.pch文件中的类别。就是这样!

UINavigationItem+iOS7Spacing.h

#import <Foundation/Foundation.h>
@interface UINavigationItem (iOS7Spacing)
@end

UINavigationItem+iOS7Spacing.m

#import "UINavigationItem+iOS7Spacing.h"
#import <objc/runtime.h>

@implementation UINavigationItem (iOS7Spacing)

- (BOOL)isIOS7
{
    return ([[[UIDevice currentDevice] systemVersion] compare:@"7" options:NSNumericSearch] != NSOrderedAscending);
}

- (UIBarButtonItem *)spacer
{
    UIBarButtonItem *space = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemFixedSpace target:nil action:nil];
    space.width = -11;
    return space;
}

- (void)mk_setLeftBarButtonItem:(UIBarButtonItem *)leftBarButtonItem
{
    if ([self isIOS7] && leftBarButtonItem) {
        [self mk_setLeftBarButtonItem:nil];
        [self mk_setLeftBarButtonItems:@[[self spacer], leftBarButtonItem]];
    } else {
        [self mk_setLeftBarButtonItem:leftBarButtonItem];
    }
}

- (void)mk_setLeftBarButtonItems:(NSArray *)leftBarButtonItems
{
    if ([self isIOS7] && leftBarButtonItems && leftBarButtonItems.count > 0) {

        NSMutableArray *items = [[NSMutableArray alloc] initWithCapacity:leftBarButtonItems.count + 1];
        [items addObject:[self spacer]];
        [items addObjectsFromArray:leftBarButtonItems];

        [self mk_setLeftBarButtonItems:items];
    } else {
        [self mk_setLeftBarButtonItems:leftBarButtonItems];
    }
}

- (void)mk_setRightBarButtonItem:(UIBarButtonItem *)rightBarButtonItem
{
    if ([self isIOS7] && rightBarButtonItem) {
        [self mk_setRightBarButtonItem:nil];
        [self mk_setRightBarButtonItems:@[[self spacer], rightBarButtonItem]];
    } else {
        [self mk_setRightBarButtonItem:rightBarButtonItem];
    }
}

- (void)mk_setRightBarButtonItems:(NSArray *)rightBarButtonItems
{
    if ([self isIOS7] && rightBarButtonItems && rightBarButtonItems.count > 0) {

        NSMutableArray *items = [[NSMutableArray alloc] initWithCapacity:rightBarButtonItems.count + 1];
        [items addObject:[self spacer]];
        [items addObjectsFromArray:rightBarButtonItems];

        [self mk_setRightBarButtonItems:items];
    } else {
        [self mk_setRightBarButtonItems:rightBarButtonItems];
    }
}

+ (void)mk_swizzle:(SEL)aSelector
{
    SEL bSelector = NSSelectorFromString([NSString stringWithFormat:@"mk_%@", NSStringFromSelector(aSelector)]);

    Method m1 = class_getInstanceMethod(self, aSelector);
    Method m2 = class_getInstanceMethod(self, bSelector);

    method_exchangeImplementations(m1, m2);
}

+ (void)load
{
    [self mk_swizzle:@selector(setLeftBarButtonItem:)];
    [self mk_swizzle:@selector(setLeftBarButtonItems:)];
    [self mk_swizzle:@selector(setRightBarButtonItem:)];
    [self mk_swizzle:@selector(setRightBarButtonItems:)];
}

@end

GitHub上的UINavigationItem+iOS7Spacing类别

- Marius Kažemėkaitis

---

我认为这是最好的解决方案，比更改UIEdegeInset更好，这没有触摸区域问题。 - Nick

你的分类功能非常好。但是我好像有一个问题。对我来说正确的间距宽度是-15，而且我还需要一个针对iOS 7之前的-4宽度间距。你有关于这4个点差异的任何想法吗？ - Bartu

我不知道为什么对你来说正确的间距是-15。我在许多项目中测试了这个类别，-11 在所有项目中都完美地工作。 - Marius Kažemėkaitis

当出现自定义视图时，你需要检查barButtonItem是否有自定义视图，因为只有当存在自定义视图时对齐会出现问题。否则，在所有情况下放置间距会导致普通的UIBarButtonItems出现偏移屏幕的情况。例如：如果([self isIOS7] && leftBarButtonItem.customView) - droussel

在许多情况下（包括UITextView），与iOS 6中的情况相比，插入物似乎都很奇怪。 - NovaJoe

Answer 2

我不是很喜欢从Marius的回答中继承UIButton或进行方法交换: https://dev59.com/bmIk5IYBdhLWcg3we-L5#19317105

我只是使用了一个简单的包装器，并将按钮的框架向负方向移动，直到找到正确的位置。按钮的点击似乎也很好（尽管如果需要，您可以扩展按钮的宽度以匹配负偏移）。

这是我用来生成新返回按钮的代码:

- (UIBarButtonItem *) newBackButton {
    // a macro for the weak strong dance
    @weakify(self);
    UIButton *backButton = [[UIButton alloc] init];
    [backButton setTitle:@"Back" forState:UIControlStateNormal];
    backButton.titleLabel.font = [UIFont systemFontOfSize:17];
    CGFloat width = [@"Back" boundingRectWithSize:CGSizeMake(CGFLOAT_MAX, CGFLOAT_MAX) options:NSStringDrawingUsesFontLeading|NSStringDrawingUsesLineFragmentOrigin attributes:@{NSFontAttributeName: [UIFont systemFontOfSize:17]} context:nil].size.width + 27;
    backButton.frame = CGRectMake(-17.5, 0, width + 17.5, 44);
    [backButton setImage:[UIImage imageNamed:@"UINavigationBarBackIndicatorDefault"] forState:UIControlStateNormal];
    [backButton setTitleEdgeInsets:UIEdgeInsetsMake(0, 14, 0, 0)];
    [backButton setTitleColor:mTCOrangeColor forState:UIControlStateNormal];
    backButton.contentEdgeInsets = UIEdgeInsetsZero;
    backButton.imageEdgeInsets = UIEdgeInsetsZero;
    [backButton addEventHandler:^(id sender) {
        // a macro for the weak strong dance
        @strongify(self);
        // do stuff here
    } forControlEvents:UIControlEventTouchUpInside];
    UIView *buttonWrapper = [[UIView alloc] initWithFrame:CGRectMake(0, 0, width, 44)];
    [buttonWrapper addSubview:backButton];
    return [[UIBarButtonItem alloc] initWithCustomView:buttonWrapper];
}

- Bob Spryn

---

这是唯一对我有效的解决方案，它也将成为每个使用UIButton作为子视图的人的解决方案（+1）。 - Yossi

Answer 3

我尚未测试过这段代码用于多个navigationBarButton项目的情况，但是在单个按钮方面似乎是起作用的。我已经重写了UINavigationBar及其layoutSubviews方法。

首先，在文件顶部定义一个水平偏移量的常量。您可以根据需要进行修改：

static CGFloat const kNavBarButtonHorizontalOffset = 10;

layoutSubviews:

- (void)layoutSubviews{

    [super layoutSubviews];

    //Do nothing on iOS6
    if ( ![[[UIDevice currentDevice] systemVersion] floatValue] >= 7.0f){return;}

    UINavigationItem * navigationItem = [self topItem];

    for(UIBarButtonItem * item in [navigationItem rightBarButtonItems]){

        UIView * subview = [item customView];
        CGFloat width = CGRectGetWidth(subview.frame);

        CGRect newRightButtonRect = CGRectMake(CGRectGetWidth(self.frame) - width - kNavBarButtonHorizontalOffset,
                                           CGRectGetMinY(subview.frame),
                                           width,
                                           CGRectGetHeight(subview.frame));
        [subview setFrame:newRightButtonRect];

    }

    for(UIBarButtonItem * item in [navigationItem leftBarButtonItems]){
        UIView * subview = [item customView];
        CGRect newRightButtonRect = CGRectMake(kNavBarButtonHorizontalOffset,
                                           CGRectGetMinY(subview.frame),
                                           CGRectGetWidth(subview.frame),
                                           CGRectGetHeight(subview.frame));

        [subview setFrame:newRightButtonRect];
    }
}

- Yunus Nedim Mehel

Answer 4

或者，您可以调整自定义视图内容的框架（左侧子视图减5，右侧子视图加5），只要您的自定义视图没有将clipsToBounds设置为YES，那么这些将被尊重。虽然不是最干净的解决方案，但我认为其他建议的解决方案可能更加hacky。

在IB中，子视图将显示截断5个点，但在模拟器中运行应用程序时，整个内容都会显示。

- Kyle Clegg