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

如何让UIToolbar的Items均匀分布且按钮点击范围合理?

解决UIToolbar自定义按钮点击范围小且均匀分布的问题

原代码存在两处问题:一是笔误self.toolbar = boolbar;应改为self.toolbar = toolbar;;二是使用UIBarButtonSystemItemFlexibleSpace仅能添加弹性间距,但自定义按钮尺寸仅由标题决定,导致点击范围狭窄,且无法均匀占据Toolbar宽度。

以下提供两种可行解决方案:

方案一:固定宽度容器均分(适合固定布局)

通过给每个UIBarButtonItem设置固定宽度的容器视图,让按钮填充整个容器,既保证均匀分布,又扩大点击范围:

UIToolbar *toolbar = [[UIToolbar alloc] initWithFrame:CGRectMake(0, 200, UIScreen.mainScreen.bounds.size.width, 44)];
self.toolbar = toolbar; // 修正原代码笔误
[self.view addSubview:toolbar];

NSMutableArray *arrayM = [NSMutableArray array];
NSArray *titles = @[@"title0", @"title1", @"title2", @"title3"];
CGFloat toolbarWidth = toolbar.bounds.size.width;
CGFloat itemWidth = toolbarWidth / titles.count; // 计算每个容器的宽度

for (int i = 0; i < titles.count; i++) {
    UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
    button.backgroundColor = [UIColor colorWithRed:arc4random_uniform(256)/255.0 green:arc4random_uniform(256)/255.0 blue:arc4random_uniform(256)/255.0 alpha:1.0];
    [button setTitle:titles[i] forState:UIControlStateNormal];
    [button setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
    button.titleLabel.textAlignment = NSTextAlignmentCenter;
    button.contentEdgeInsets = UIEdgeInsetsMake(8, 16, 8, 16); // 可选,调整标题边距
    
    // 创建容器视图作为UIBarButtonItem的自定义视图
    UIView *itemView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, itemWidth, toolbar.bounds.size.height)];
    [itemView addSubview:button];
    
    // 约束按钮填充整个容器
    [button.translatesAutoresizingMaskIntoConstraints setValue:NO];
    [NSLayoutConstraint activateConstraints:@[
        [button.topAnchor constraintEqualToAnchor:itemView.topAnchor],
        [button.bottomAnchor constraintEqualToAnchor:itemView.bottomAnchor],
        [button.leadingAnchor constraintEqualToAnchor:itemView.leadingAnchor],
        [button.trailingAnchor constraintEqualToAnchor:itemView.trailingAnchor]
    ]];
    
    UIBarButtonItem *item = [[UIBarButtonItem alloc] initWithCustomView:itemView];
    [arrayM addObject:item];
}

toolbar.items = arrayM;

方案二:AutoLayout自动均分(适合自适应布局)

通过AutoLayout约束让所有按钮宽度相等,首尾按钮贴紧Toolbar边缘,自动适配屏幕尺寸(含横竖屏切换):

UIToolbar *toolbar = [[UIToolbar alloc] initWithFrame:CGRectMake(0, 200, UIScreen.mainScreen.bounds.size.width, 44)];
self.toolbar = toolbar;
[self.view addSubview:toolbar];

NSMutableArray *arrayM = [NSMutableArray array];
NSArray *titles = @[@"title0", @"title1", @"title2", @"title3"];
NSMutableArray *buttonItems = [NSMutableArray array];

for (int i = 0; i < titles.count; i++) {
    UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
    button.backgroundColor = [UIColor colorWithRed:arc4random_uniform(256)/255.0 green:arc4random_uniform(256)/255.0 blue:arc4random_uniform(256)/255.0 alpha:1.0];
    [button setTitle:titles[i] forState:UIControlStateNormal];
    [button setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
    button.titleLabel.textAlignment = NSTextAlignmentCenter;
    
    UIBarButtonItem *item = [[UIBarButtonItem alloc] initWithCustomView:button];
    [buttonItems addObject:item];
    [arrayM addObject:item];
}

// 约束所有按钮宽度相等
for (NSInteger i = 1; i < buttonItems.count; i++) {
    UIBarButtonItem *prevItem = buttonItems[i-1];
    UIBarButtonItem *currItem = buttonItems[i];
    [NSLayoutConstraint activateConstraints:@[
        [prevItem.customView.widthAnchor constraintEqualToAnchor:currItem.customView.widthAnchor]
    ]];
}

// 首尾按钮贴紧Toolbar边缘
UIBarButtonItem *firstItem = buttonItems.firstObject;
UIBarButtonItem *lastItem = buttonItems.lastObject;
[NSLayoutConstraint activateConstraints:@[
    [firstItem.customView.leadingAnchor constraintEqualToAnchor:toolbar.leadingAnchor],
    [lastItem.customView.trailingAnchor constraintEqualToAnchor:toolbar.trailingAnchor]
]];

// 按钮上下贴紧Toolbar
for (UIBarButtonItem *item in buttonItems) {
    [NSLayoutConstraint activateConstraints:@[
        [item.customView.topAnchor constraintEqualToAnchor:toolbar.topAnchor],
        [item.customView.bottomAnchor constraintEqualToAnchor:toolbar.bottomAnchor]
    ]];
}

toolbar.items = arrayM;

两种方案均能让按钮均匀分布在Toolbar上,且点击范围覆盖整个分配区域,无需设置固定标题尺寸。

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

相关产品推荐
方舟 Agent Plan

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

最近更新时间:2026.07.29 02:57:57