如何让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
相关产品推荐
相关产品推荐

