如何在UIToolbar中添加无间隙的等宽UIButtons?
嘿,我来帮你搞定这个UIToolbar上按钮无间隙等宽的需求!你当前按toolbar宽度均分按钮的思路是对的,但问题出在UIButton默认的内边距和UIBarButtonItem之间的默认间距上,咱们一步步调整:
步骤1:优化按钮的内边距
UIButton默认会给标题/图标留一些内边距,这会导致按钮看起来比预期窄,或者出现莫名间隙。创建按钮时,把这些内边距彻底清零:
- (UIButton *)createMenuButton:(NSString *)title width:(CGFloat)width height:(CGFloat)height { UIButton *btn = [UIButton buttonWithType:UIButtonTypeSystem]; [btn setTitle:title forState:UIControlStateNormal]; btn.frame = CGRectMake(0, 0, width, height); // 关键:清除所有内边距,让按钮内容填满整个frame btn.contentEdgeInsets = UIEdgeInsetsZero; btn.titleEdgeInsets = UIEdgeInsetsZero; btn.imageEdgeInsets = UIEdgeInsetsZero; // 强制内容居中,避免内边距调整导致偏移 btn.contentHorizontalAlignment = UIControlContentHorizontalAlignmentCenter; btn.contentVerticalAlignment = UIControlContentVerticalAlignmentCenter; return btn; }
步骤2:消除UIBarButtonItem之间的间距
UIToolbar的UIBarButtonItem默认会在item之间添加小间距,这里提供两种靠谱的解决方案:
方案A:用自定义容器View包装所有按钮
把四个按钮统一放到一个和toolbar同高的UIView里,再把这个View作为单个UIBarButtonItem的customView,彻底规避item之间的默认间距:
CGFloat toolbarWidth = self.toolbarMapMenu.frame.size.width; CGFloat toolbarHeight = self.toolbarMapMenu.frame.size.height; CGFloat buttonWidth = toolbarWidth / 4.0; UIButton *btn0 = [self createMenuButton:@"a" width:buttonWidth height:toolbarHeight]; UIButton *btn1 = [self createMenuButton:@"b" width:buttonWidth height:toolbarHeight]; UIButton *btn2 = [self createMenuButton:@"c" width:buttonWidth height:toolbarHeight]; UIButton *btn3 = [self createMenuButton:@"d" width:buttonWidth height:toolbarHeight]; // 创建容器View,尺寸和toolbar完全一致 UIView *buttonContainer = [[UIView alloc] initWithFrame:CGRectMake(0, 0, toolbarWidth, toolbarHeight)]; // 逐个添加按钮到容器,精准设置x坐标 btn0.frame = CGRectMake(0, 0, buttonWidth, toolbarHeight); [buttonContainer addSubview:btn0]; btn1.frame = CGRectMake(buttonWidth, 0, buttonWidth, toolbarHeight); [buttonContainer addSubview:btn1]; btn2.frame = CGRectMake(buttonWidth * 2, 0, buttonWidth, toolbarHeight); [buttonContainer addSubview:btn2]; btn3.frame = CGRectMake(buttonWidth * 3, 0, buttonWidth, toolbarHeight); [buttonContainer addSubview:btn3]; // 把容器作为customView添加到toolbar UIBarButtonItem *containerItem = [[UIBarButtonItem alloc] initWithCustomView:buttonContainer]; self.toolbarMapMenu.items = @[containerItem];
方案B:手动设置item宽度并插入0间距的Fixed Space
如果不想用容器,也可以给每个UIBarButtonItem设置宽度,并且在item之间插入宽度为0的固定间距来抵消默认间隙:
CGFloat width = self.toolbarMapMenu.frame.size.width / 4.0; CGFloat height = self.toolbarMapMenu.frame.size.height; UIButton *btn0 = [self createMenuButton:@"a" width:width height:height]; UIButton *btn1 = [self createMenuButton:@"b" width:width height:height]; UIButton *btn2 = [self createMenuButton:@"c" width:width height:height]; UIButton *btn3 = [self createMenuButton:@"d" width:width height:height]; UIBarButtonItem *it0 = [[UIBarButtonItem alloc] initWithCustomView:btn0]; UIBarButtonItem *it1 = [[UIBarButtonItem alloc] initWithCustomView:btn1]; UIBarButtonItem *it2 = [[UIBarButtonItem alloc] initWithCustomView:btn2]; UIBarButtonItem *it3 = [[UIBarButtonItem alloc] initWithCustomView:btn3]; // 关键:设置每个item的宽度和按钮一致 it0.width = width; it1.width = width; it2.width = width; it3.width = width; // 创建0宽度的固定间距item,用来抵消默认间隙 UIBarButtonItem *zeroSpace = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemFixedSpace target:nil action:nil]; zeroSpace.width = 0; // 组装items:按钮 + 0间距 + 按钮... self.toolbarMapMenu.items = @[it0, zeroSpace, it1, zeroSpace, it2, zeroSpace, it3];
额外提醒:适配尺寸变化
如果toolbar的宽度会动态变化(比如设备旋转),建议在viewWillLayoutSubviews方法里重新计算按钮宽度并更新布局,避免按钮错位或间隙重现。
内容的提问来源于stack exchange,提问作者Martin Perry
相关产品推荐
相关产品推荐

