iOS 7带有图片和标题的BarButtonItem

Question

我正在尝试弄清楚如何实现这样的效果：

这是一个工具栏，我想保留按钮标题文本，而不必创建带有图标和文本的整个图像。如何在左侧添加图标到UIBarButtonItem，同时保持文本的设置：

UIBarButtonItem *customBarButtonItem = [[UIBarButtonItem alloc] initWithTitle:@"Button" style:UIBarButtonItemStyleBordered target:nil action:nil];

编辑

以下是我使用下面的代码所实现的内容：

    UIButton *customButton = [UIButton buttonWithType:UIButtonTypeCustom];
    [customButton setImage:[UIImage imageNamed:@"Test"] forState:UIControlStateNormal];
    [customButton setTitle:@"Button" forState:UIControlStateNormal];
    customButton.titleEdgeInsets = UIEdgeInsetsMake(0, 5, 0, 0);
    [customButton sizeToFit];
    UIBarButtonItem *customBarButtonItem = [[UIBarButtonItem alloc] initWithCustomView:customButton];

这里有两个问题：第一个是 UIButton 的大小，第二个是，正如您从 gif 中看到的那样，当我在按钮内轻敲并松开轻敲时，按钮的动画效果不正确。有什么想法吗？

- Fred Collins

---

你不能只是使用 ASCII 的“向上箭头”字符吗？ - Undo

@Undo，那只是一个示例图标。 - Fred Collins

可能是重复的问题：如何在 UIBarButtonItem 中同时使用图像和文本 - Sruit A.Suk

Answer 1

您可以将UIButton作为自定义视图嵌入到UIBarButtonItem中。使用-setImage:forState:和-setTitle:forState:，您可以随意创建您的UIButton，包括使用图像和文本。

UIButton* customButton = [UIButton buttonWithType:UIButtonTypeCustom];
[customButton setImage:[UIImage imageNamed:@"image"] forState:UIControlStateNormal];
[customButton setTitle:@"Button" forState:UIControlStateNormal];
[customButton sizeToFit];
UIBarButtonItem* customBarButtonItem = [[UIBarButtonItem alloc] initWithCustomView:customButton];
self.navigationItem.leftBarButtonItem = customBarButtonItem; // or self.navigationItem.rightBarButtonItem

请注意，在执行此操作时，您需要将IBA动作方法附加到customButton，而不是customBarButtonItem。

有关更多信息，请参见initWithCustomView:文档。

您还可以通过将UIButton拖动到导航栏的左/右栏按钮插槽中，在界面构建器中完成所有这些操作。

- Greg

---

@FredCollins，当您点击它时，它应该会淡出（我刚刚测试过）。您需要设置状态下的标题颜色等，就像处理其他按钮一样。 - Greg

它会淡化文本但不会淡化图标图像。对你有效吗？ - Fred Collins

我添加了一个示例，演示如何创建自定义按钮而无需显式设置框架。 - Greg

是的，它正在为我淡化图标图像。我已经更新了我的答案，并附上了我正在使用的代码。 - Greg

你尝试过使用 setTitleColor:forState: 吗？可以为普通状态设置一种颜色，为高亮状态设置另一种颜色。 - Greg

Answer 2

我对在Stack Overflow上找到的所有解决方案都不满意，因为我喜欢UIBarButtonItenm如何转换图像，以便它们可以正确显示并且可以用色调颜色更改。所以我发现了这个解决方案，可以使用很少的代码来美观地显示，其效果类似于Facebook和其他当前应用程序中的工具栏...

当您更改UIBArButtonItem中包含的视图的色调颜色时，图像和标题的颜色会相应地更改，非常酷，我根本不需要创建特殊的图像。

每个按钮都会调用此代码，例如比赛按钮，并将按钮设置为引用输出...

- (void)selectButton:(UIButton *)sender { 
    _competitionButton.superview.tintColor = [UIColor lightGrayColor];
    _usersButton.superview.tintColor = [UIColor lightGrayColor]; 
    _managementButton.superview.tintColor = [UIColor lightGrayColor];    
    sender.superview.tintColor = [UIColor whiteColor]; 
}

- (IBAction)onCompetitionButtonClick:(UIButton *)sender {
    [self selectButton:sender];
    [_scrollView scrollToPage:0 of:3];
}

在类似“竞争”这样的按钮中，只有标题，在工具栏按钮项中有图像... 这就是我设置的方式，它可以正常工作，可能还有其他可能性。

- Renetik

---

人们可能是盲目的... 对我来说仍然是非常有用的解决方案，我只是考虑以编程方式实现它... - Renetik

我必须承认，我有点难以想象如何将这个故事板解决方案直接转换成代码。我只需要代码...（记录一下，我没有对你的答案进行投票。）到目前为止，我发现的其他解决方案也不令我满意。真是太疯狂了，很难创建一个既有图标又有标签的UIBarButtonItem... :-( - Erik van der Neut

在代码中模仿了这个结构，但是色调颜色仍然只应用于图像（位于子工具栏内的子栏按钮项中），而不是文本标签（即我正在创建的栏按钮项旁边的按钮标签...太令人困惑了....） - Erik van der Neut

按钮比赛有 touch up inside 选择器和引用 outlet，所有其他按钮用户和管理都是如此。然后只有这一个相同的方法从每个 selectButton 调用。我已编辑答案并提供了代码，还有分页逻辑...但那是另外一个故事...在应用程序中这完美无缺，没有问题。 - Renetik

Answer 3

我已经成功地通过编程完成了我的解决方案...一些用户抱怨它不起作用...那么如何创建带有图像和项目的UTToolbar，以便您可以通过色调更改按钮的颜色，并且它会神奇地改变图像以及标题标签？我的UI编辑器解决方案肯定有效...在这段代码中可以澄清事情，您也可以通过编程实现...

- (void)loadToolbar {
    NSMutableArray *items = NSMutableArray.new;
    [items add:[UIBarButtonItem createWithItem:UIBarButtonSystemItemFlexibleSpace :nil :nil]];
    for (uint pageIndex = 0; pageIndex < _controllers.count; ++pageIndex) {
        UIView *itemView = [UIView.alloc initWithFrame:CGRectMake(0, 0, 100, 44)];
        itemView.backgroundColor = [UIColor clearColor];
        itemView.tintColor = [UIColor orangeColor];
        [itemView addSubview:[self createToolbarForItemView:pageIndex]];
        [itemView addSubview:[self createButtonForItemView:pageIndex]];
        UIBarButtonItem *item = [UIBarButtonItem.alloc initWithCustomView:itemView];
        item.style = UIBarButtonItemStylePlain;
        [items add:item];
        [items add:[UIBarButtonItem createWithItem:UIBarButtonSystemItemFlexibleSpace :nil :nil]];
    }
    [_toolbar setItems:items];
}

- (UIButton *)createButtonForItemView:(uint)pageIndex {
    UIButton *itemButton = [UIButton buttonWithType:UIButtonTypeSystem];
    itemButton.frame = CGRectMake(0, 0, 100, 44);
    itemButton.titleLabel.font = [UIFont systemFontOfSize:11];
    itemButton.contentEdgeInsets = UIEdgeInsetsMake(30, 0, 0, 0);
    itemButton.text = [_controllers[pageIndex] tabTitle];
    itemButton.touchUp = ^(UIButton *sender) {
        for (UIButton *button in _buttons) button.superview.tintColor = UI.toolBarInactiveButtonTextColor;
        sender.superview.tintColor = UI.toolBarActiveButtonTextColor;
        [self showPage:pageIndex];
    };
    [_buttons add:itemButton];
    return itemButton;
}

- (UIToolbar *)createToolbarForItemView:(uint)pageIndex {
    UIToolbar *itemToolbar = [UIToolbar.alloc initWithFrame:CGRectMake(0, 0, 100, 44)];
    itemToolbar.tintColor = nil;
    itemToolbar.barStyle = _toolbar.barStyle;
    itemToolbar.translucent = _toolbar.translucent;
    UIBarButtonItem *imageItem = [_controllers[pageIndex] tabImageItem];
    imageItem.style = UIBarButtonItemStylePlain;
    imageItem.tintColor = nil;
    imageItem.imageInsets = UIEdgeInsetsMake(-10, 0, 0, 0);
    itemToolbar.items = @[
            [UIBarButtonItem createWithItem:UIBarButtonSystemItemFlexibleSpace :nil :nil],
            imageItem,
            [UIBarButtonItem createWithItem:UIBarButtonSystemItemFlexibleSpace :nil :nil]
    ];
    return itemToolbar;
}

- Renetik

---

该位置将标签放置在按钮下方吗？ - Trip

是的，就像我在第一次回答中所展示的那样... 你可以通过调整itemButton.contentEdgeInsets = UIEdgeInsetsMake(30, 0, 0, 0);来控制位置。 - Renetik

Answer 4

我按照以下方式解决了这个问题：

[Button **setTitleColor**:[UIColor colorWithRed:129/255.0f green:124/255.0f blue:110/255.0f alpha:1.0f] forState:**UIControlStateHighlighted**];

- User123456