如何调整 UIToolBar 左右内边距

Question

我创建一个带有代码的 UIToolbar 和另一个带有界面构建器的 UIToolbar。但是，发现两个工具栏有不同的左右填充，如下所示：

来自界面生成器：

来自代码：

UIImage *buttonImage = [[UIImage imageNamed:@"button.png"] stretchableImageWithLeftCapWidth:10 topCapHeight:0];
UIButton *btnTest = [UIButton buttonWithType:UIButtonTypeCustom];
[btnTest setBackgroundImage:buttonImage forState:UIControlStateNormal];
[btnTest setTitle:@"Back" forState:UIControlStateNormal];   
[btnTest.titleLabel setFont:[UIFont boldSystemFontOfSize:13]];  
[btnTest setBackgroundImage:[imgToolbarButton stretchableImageWithLeftCapWidth:5 topCapHeight:0]  forState:UIControlStateNormal];
[btnTest addTarget:self action:@selector(clearDateEdit:) forControlEvents:UIControlEventTouchUpInside];
btnTest.frame = CGRectMake(0.0, 0.0, 50, 30);
UIBarButtonItem *btnTestItem = [[UIBarButtonItem alloc] initWithCustomView:btnTest];
[self.toolbar setItems:[NSArray arrayWithObjects:btnTestItem,nil]];
[btnTestItem release];

我的问题是如何通过代码调整UIToolbar的左右填充？

更新

我发现这个对齐问题只发生在 UIBarButtonItem 与 UIButton 的 customView 中，UIBarButtonItem 的对齐很好。知道是什么原因导致或解决此问题。

我现在能想到的唯一解决方案就是手动设置框架。

Answer 1

在我的情况下，我需要减少 leftBarButtonItem 的左侧填充并在整个区域保持触摸。

class FilterButton: Button {

override init() {
    super.init()
    setImage(UIImage(named: "filter"), for: .normal)
    backgroundColor = UIColor.App.ultraLightGray
    layer.cornerRadius = 10
    
    snp.makeConstraints {
        $0.size.equalTo(36)
    }
}

override var alignmentRectInsets: UIEdgeInsets {
    return UIEdgeInsets(top: 0, left: 4, bottom: 0, right: -4)
}
}


let filterButton = FilterButton()
filterButton.addTarget(self, action: #selector(filterTapped(_:)), for: .touchUpInside)
let filterBarButton = UIBarButtonItem(customView: filterButton)
let spacer = UIBarButtonItem(barButtonSystemItem: .fixedSpace, target: nil, action: nil)
    
navigationItem.setLeftBarButtonItems([spacer, filterBarButton], animated: false)

Answer 2

我遇到了同样的问题，你可以用 UIBarButtonSystemItemFixedSpace 做一个巧妙的技巧，在你的第一个按钮之前和最后一个按钮之后添加一个负宽度，它会将按钮移动到边缘。

例如，要去掉右侧边距，请将以下 FixedSpace 栏项添加为最后一项：

iOS 11 更新至 13

• 斯威夫特

  let negativeSeperator = UIBarButtonItem(barButtonSystemItem: .fixedSpace, target: nil, action: nil)
  negativeSeperator.width = 12
  

  在 Swift 版本中宽度必须为正

---

• 对象

  UIBarButtonItem *negativeSeparator = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemFixedSpace target:nil action:nil];
  negativeSeparator.width = -12;
  

左右边距为12px。

iOS7 更新 - iPhone 上的边距为 16 像素，iPad 上的边距为 20 像素！

Answer 3

只需向UIToolbar 的前导和尾随约束添加负常量。这样，工具栏在您的视图之外开始和结束，因此具有较少的填充。

Answer 4

这是一个很好的问题，即使提供了解决方案 - 它也无法解决 iOS11 上的问题。

工作解决方案

如果你创建一个UIButton的新扩展：

class BarButton: UIButton {

    override var alignmentRectInsets: UIEdgeInsets {
        return UIEdgeInsetsMake(0, 16, 0, 16)
    }

}

那么当你在你的布局中使用它时：

lazy var btnLogin: BarButton = {
    let btn = BarButton(type: .custom)
    // Add your button settings

    btn.widthAnchor.constraint(equalToConstant: self.frame.size.width).isActive = true
    btn.heightAnchor.constraint(equalToConstant: 50).isActive = true
    btn.translatesAutoresizingMaskIntoConstraints = false
    return btn
}()

这解决了一个非常烦人的问题，如果您有任何问题，请大声疾呼。

Answer 5

iOS 11 之前

您有三种可能的解决方案：

• 第一个是使用固定宽度为负的空间项 UIBarButtonItem(barButtonSystemItem: .fixedSpace ...)
• 另一个是在自定义视图上覆盖alignmentRectInsets
• 最后一个，如果你使用 UIButton 作为你项目的自定义视图，你可以覆盖 contentEdgeInsets 和 hitTest(_:with:)

当然，第一个解决方案似乎比其他解决方案更好

UIBarButtonItem *negativeSeparator = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemFixedSpace target:nil action:nil];
negativeSeparator.width = -12;

如果你使用swift，代码会是这样的

var negativeSeparator = UIBarButtonItem(barButtonSystemItem: .fixedSpace, target: nil, action: nil)
negativeSeparator.width = -12

iOS 11 之后（包含 iOS 11）

很遗憾，所有的解决方案都不能在 iOS 11 中使用

• 第一个解决方案：设置负宽度不再有效
• 第二种解决方案：覆盖alignmentRectInsets会导致部分item不再接收触摸
• 最后一个解决方案：我认为覆盖 hitTest(_:with:) 不是一个好主意，请不要这样做！

您也可以在Developer Forums 上看到一些建议，但是当您查看所有评论后，您会发现有关此主题的建议是创建自定义 UINavigationBar 子类并做一些复杂的事情。

我的天啊，我想做的只是改变填充，而不是导航栏！

幸运的是，我们可以在 iOS 11 中使用一个技巧来做到这一点！

我们开始：

1。创建自定义按钮

• 将 translatesAutoresizingMaskIntoConstraints 设置为 false
• 覆盖alignmentRectInsets
  • 右侧的项目使用 UIEdgeInsets(top: 0, left: -8, bottom: 0, right: 8)
  • 左侧项目使用 UIEdgeInsets(top: 0, left: 8, bottom: 0, right: -8)

    如果不知道alignmentRectInsets，可以先阅读this blog

快捷版

var customButton = UIButton(type: .custom)
customButton.overrideAlignmentRectInsets = UIEdgeInsets(top: 0, left: x, bottom: 0, right: -x) // you should do this in your own custom class
customButton.translatesAutoresizingMaskIntoConstraints = false;

objective-c 版本

UIButton *customButton = [UIButton buttonWithType:UIButtonTypeCustom];
customButton.overrideAlignmentRectInsets = UIEdgeInsetsMake(0, x, 0, -x); // you should do this in your own custom class
customButton.translatesAutoresizingMaskIntoConstraints = NO;

2。使用您的自定义按钮创建一个项目

快捷版

var item = UIBarButtonItem(customView: customButton)

objective-c 版本

UIBarButtonItem *item = [[UIBarButtonItem alloc] initWithCustomView:customButton]

3。创建一个宽度为 positive

的 fixedSpace 类型 UIBarButtonItem

设置一个正值，而不是负值

快捷版

var positiveSeparator = UIBarButtonItem(barButtonSystemItem:.fixedSpace, target: nil, action: nil)
positiveSeparator.width = 8

objective-c 版本

UIBarButtonItem *positiveSeparator = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemFixedSpace target:nil action:nil];
positiveSeparator.width = 8;

4。将数组设置为 leftitems 或 rightitems

fixedSpace 类型的 UIBarButton 项必须是数组中的第一个元素。

快捷版

self.navigationItem.leftBarButtonItems = [positiveSeparator, item, ...]

objective-c 版本

self.navigationItem.leftBarButtonItems = @{positiveSeparator, item, ...}

干得好

完成所有步骤后，您会看到内边距变小并且输入区域似乎正确！

如果您发现有问题，请告诉我！ 我会尽力回答你的问题！

注意

在 iOS 11 之前，你应该关心设备的屏幕宽度；如果屏幕是5.5英寸，负片是-12pt，其他屏幕是-8pt。

如果你在 iOS 11 上使用我的解决方案，你不需要关心设备屏幕，只需设置 8pt， 您应该关心项目在导航栏中的位置，左侧或右侧，这将影响您自定义视图的对齐矩形插入

想要更多的点击区域

如果你想保证你的点击区域大于 44 * 44 ，你可以覆盖下面的方法

- (BOOL)pointInside:(CGPoint)point withEvent:(UIEvent *)event{
    CGSize acturalSize = self.frame.size;
    CGSize minimumSize = kBarButtonMinimumTapAreaSize;
    CGFloat verticalMargin = acturalSize.height - minimumSize.height >= 0 ? 0 : ((minimumSize.height - acturalSize.height ) / 2);
    CGFloat horizontalMargin = acturalSize.width - minimumSize.width >= 0 ? 0 : ((minimumSize.width - acturalSize.width ) / 2);
    CGRect newArea = CGRectMake(self.bounds.origin.x - horizontalMargin, self.bounds.origin.y - verticalMargin, self.bounds.size.width + 2 * horizontalMargin, self.bounds.size.height + 2 * verticalMargin);
    return CGRectContainsPoint(newArea, point);
}

Answer 6

我认为一个棘手的方法是使用 Aspects（或方法调配），如下所示：

[UINavigationBar aspect_hookSelector:@selector(layoutSubviews) withOptions:AspectPositionAfter usingBlock:^(id<AspectInfo> info){
        UINavigationBar *bar = info.instance;

        //[bar layoutSubviews];

        if ([bar isKindOfClass:[UINavigationBar class]]) {
            if (@available(iOS 11, *)) {
                bar.layoutMargins = UIEdgeInsetsZero;

                for (UIView *subview in bar.subviews) {
                    if ([NSStringFromClass([subview class]) containsString:@"ContentView"]) {
                        UIEdgeInsets oEdges = subview.layoutMargins;
                        subview.layoutMargins = UIEdgeInsetsMake(0, 0, 0, oEdges.right);
                    }
                }
            }
        }
    } error:nil];

Answer 7

我在尝试将工具栏作为 UIButton 的子视图居中时偶然发现了这一点。由于工具栏需要小宽度，因此最好的解决方案是在每一侧设置一个灵活的按钮：

UIBarButtonItem flexibleButtonItemLeft = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemFlexibleSpace target:nil action:nil];

UIBarButtonItem centeredButtonItem = ...

UIBarButtonItem flexibleButtonItemRight = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemFlexibleSpace target:nil action:nil];

UIToolbar toolbar = ...

toolbar.items = @[flexibleButtonItemLeft, centeredButtonItem, flexibleButtonItemRight];

Answer 8

如果你想使用自定义视图（initWithCustomView），你可以改变你的工具栏的偏移和宽度

[myToolBar setFrame:CGRectMake(-10, 0, [UIScreen mainScreen].bounds.size.width+10, 44)];

Answer 9

我遇到了同样的问题。最后，我通过继承 UIToolbar 并覆盖布局子视图方法解决了这个问题。

- (void)layoutSubviews {

  [super layoutSubviews];

  if (leftItem_ && leftItem_.customView
      && [leftItem_.customView isKindOfClass:[UIButton class]]) {
    CGRect newFrame = leftItem_.customView.frame;
    newFrame.origin.x = 0;   // reset the original point x to 0; default is 12, wired number
    leftItem_.customView.frame = newFrame;    
  }

  if (rightItem_ && rightItem_.customView
      && [rightItem_.customView isKindOfClass:[UIButton class]]) {
    CGRect newFrame = rightItem_.customView.frame;
    newFrame.origin.x = self.frame.size.width - CGRectGetWidth(newFrame);
    rightItem_.customView.frame = newFrame;
  }

}

Answer 10

最后，为了为 UIBarButtonItem 自定义背景图片并适应对齐，我放弃了 UIBarButtonItem 并手动添加 UIButton。

UIImage *buttonImage = [[UIImage imageNamed:@"button.png"] stretchableImageWithLeftCapWidth:10 topCapHeight:0];
UIButton *btnTest = [UIButton buttonWithType:UIButtonTypeCustom];
[btnTest setBackgroundImage:buttonImage forState:UIControlStateNormal];
[btnTest setTitle:@"Back" forState:UIControlStateNormal];   
[btnTest.titleLabel setFont:[UIFont boldSystemFontOfSize:13]];  
[btnTest setBackgroundImage:[imgToolbarButton stretchableImageWithLeftCapWidth:5 topCapHeight:0]  forState:UIControlStateNormal];
[btnTest addTarget:self action:@selector(clearDateEdit:) forControlEvents:UIControlEventTouchUpInside];
btnTest.frame = CGRectMake(0.0, 0.0, 50, 30);
[self.toolbar addSubview:btnTest];
[btnTestItem release];

Answer 11

使用此按钮

UIBarButtonItem *spaceItem = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemFlexibleSpace
                                                                           target:nil
                                                                           action:nil];