You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何将UIBarButtonItem的点击区域扩展至导航栏最左侧

实现方案

有两种常用方案可以满足需求,不需要移动原有按钮图标的位置,仅向左扩大点击响应区域:

方案1:调整按钮尺寸与内边距(无侵入,无需自定义子类)

你可以直接修改原有按钮的创建逻辑,把按钮宽度调大,同时通过imageEdgeInsets把图标向右偏移,保证图标最终显示位置和原来完全一致,左边多出来的区域就会变成可点击区域,修改后的代码如下:

// 原来的size是40x40,现在宽度增加20(可按需调整扩大的数值)
CGSize size = CGSizeMake(60, 40);
UIImage *image = [mysdk.icon.backArrow make];
UIButton *back = [self.class buttonForBarItemByImage:image size:size];
back.backgroundColor = [UIColor grayColor];
// 新增:设置图片内边距,向右偏移20,保证图标位置和原来40宽度时完全一致
back.imageEdgeInsets = UIEdgeInsetsMake(0, 20, 0, 0);
UIBarButtonItem *backArrow = [[UIBarButtonItem alloc] initWithCustomView:back];
[back addTarget:backArrow action:@selector(backArrow_onClick) forControlEvents:UIControlEventTouchUpInside];

+ (UIButton *) buttonForBarItemByImage:(UIImage *)image size:(CGSize)size {
    UIButton *back = [UIButton buttonWithType:UIButtonTypeCustom];
    [back setImage:image forState:UIControlStateNormal];
    back.frame = CGRectMake(0, 0, size.width, size.height);
    return back;
}

方案2:自定义UIButton子类,重写点击响应判定逻辑

如果不想修改按钮原有尺寸,可以自定义UIButton子类,重写pointInside:withEvent:方法,手动扩大左侧的点击响应范围:

  1. 首先实现自定义按钮类
// CustomBackButton.h
@interface CustomBackButton : UIButton
/// 左侧额外扩大的点击区域数值,默认20
@property (nonatomic, assign) CGFloat leftExpandOffset;
@end

// CustomBackButton.m
@implementation CustomBackButton

- (BOOL)pointInside:(CGPoint)point withEvent:(UIEvent *)event {
    CGFloat expandLeft = self.leftExpandOffset ?: 20;
    // 仅向左扩大点击区域,上下右三个方向保持原有范围
    CGRect respondBounds = CGRectMake(-expandLeft, 0, self.bounds.size.width + expandLeft, self.bounds.size.height);
    return CGRectContainsPoint(respondBounds, point);
}

@end
  1. 替换原有按钮创建逻辑即可
+ (UIButton *) buttonForBarItemByImage:(UIImage *)image size:(CGSize)size {
    // 替换为自定义子类
    CustomBackButton *back = [CustomBackButton buttonWithType:UIButtonTypeCustom];
    back.leftExpandOffset = 20; // 按需调整扩大的宽度
    [back setImage:image forState:UIControlStateNormal];
    back.frame = CGRectMake(0, 0, size.width, size.height);
    return back;
}

原有效果参考图:
按钮位置示例图

内容的提问来源于stack exchange,提问作者stefanosn

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.09.24 18:15:08