我怎样才能拥有一个同时包含图像和文本的 UIBarButtonItem？

Posted 2023-03-08

【中文标题】我怎样才能拥有一个同时包含图像和文本的 UIBarButtonItem？

【英文标题】：How can I have a UIBarButtonItem with both image and text?

【发布时间】：2010-10-11 01:35:28

【问题描述】：

当我尝试为 UIBarButtonItem 使用图像时，没有显示文本。有没有办法同时显示文本和图像？

【参考方案1】：

您可以使用包含图像和文本的自定义视图来初始化 UIBarButtonItem。这是一个使用 UIButton 的示例。

UIImage *chatImage = [UIImage imageNamed:@"08-chat.png"];

UIButton *chatButton = [UIButton buttonWithType:UIButtonTypeCustom];
[chatButton setBackgroundImage:chatImage forState:UIControlStateNormal];
[chatButton setTitle:@"Chat" forState:UIControlStateNormal];
chatButton.frame = (CGRect) 
    .size.width = 100,
    .size.height = 30,
;

UIBarButtonItem *barButton= [[[UIBarButtonItem alloc] initWithCustomView:chatButton] autorelease];
self.toolbar.items = [NSArray arrayWithObject:barButton];

【讨论】：

对于最后一行，我收到一条错误消息，提示“请求成员'工具栏'不是结构或联合。我该如何使用 self.navigationItem.rightBarButtonItem？

在这种情况下，将最后一行替换为self.navigationItem.rightBarButtonItem = barButton;。或者你可以使用这个方法：developer.apple.com/library/ios/documentation/uikit/reference/….

[self.navigationItem setRightBarButtonItem:barButton animated:YES];

不需要使用背景图片 - 只需设置 UIButton 的标题和图片，图片会自动出现在文本的左侧。

Bill：如何只设置标题和图片？UIImage *image = [[UIImage imageNamed:@"Game.png"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal]; UIBarButtonItem *button = [[UIBarButtonItem alloc] initWithImage:image style:UIBarButtonItemStylePlain target:self action:@selector(refreshPropertyList:)]; button.title=@"3333"; 不行。

【参考方案2】：

我建议一种使用 Storyboard 的方法：

拖放到 ToolBar 常用的 UIView。它会自动包装到 Bar Button Item。在“尺寸检查器”中调整视图宽度。将 View 的背景颜色更改为清除颜色。

将 UIButton 和 UILabel 放在视图中。您可以使用约束来调整它们的位置。您也可以将它们放在视图之外，例如，略高或略低（就像我的图片一样）。为 UIButton 放置默认和突出显示的图像。

复制栏按钮项目并调整其他按钮。添加灵活空间。

创建网点。

完成:)。当你运行应用程序时，你会得到这样的工具栏：

附： Here 你可以阅读如何使用 .xib 创建 UIToolbar 子类

【讨论】：

不错的解决方案。我制作了两个项目 UIButtons 并将它们放在垂直堆栈视图中。

【参考方案3】：

UIButton *button =  [UIButton buttonWithType:UIButtonTypeCustom];
[button setImage:[UIImage imageNamed:@"image.png"] forState:UIControlStateNormal];
[button addTarget:target action:@selector(buttonAction:)forControlEvents:UIControlEventTouchUpInside];
[button setFrame:CGRectMake(0, 0, 53, 31)];
UILabel *label = [[UILabel alloc]initWithFrame:CGRectMake(3, 5, 50, 20)];
[label setFont:[UIFont fontWithName:@"Arial-BoldMT" size:13]];
[label setText:title];
label.textAlignment = UITextAlignmentCenter;
[label setTextColor:[UIColor whiteColor]];
[label setBackgroundColor:[UIColor clearColor]];
[button addSubview:label];
UIBarButtonItem *barButton = [[UIBarButtonItem alloc] initWithCustomView:button];
self.navigationItem.leftBarButtonItem = barButton;

【参考方案4】：

带有目标的 Swift 4.2

extension UIBarButtonItem 
    convenience init(image :UIImage, title :String, target: Any?, action: Selector?) 
        let button = UIButton(type: .custom)
        button.setImage(image, for: .normal)
        button.setTitle(title, for: .normal)
        button.frame = CGRect(x: 0, y: 0, width: image.size.width, height: image.size.height)

        if let target = target, let action = action 
            button.addTarget(target, action: action, for: .touchUpInside)
        

        self.init(customView: button)
    

【讨论】：

它有效。知道在按钮按下和到达指定动作之间的怀孕停顿来自哪里吗？

@AntonTropashko 问题是（1）自定义视图使其变慢，（2）这不是自定义后退按钮的正确方法。

添加这一行去掉左边的空格：button.imageEdgeInsets = UIEdgeInsets(top: 0, left: -13.0, bottom: 0, right: 0)

【参考方案5】：

Kris Markel 的回答是一个好的开始（仅

我创建了一个类别，它将创建一个外观和行为类似于普通 iOS7 后退按钮的 UIBarButtonItem (leftBarButtonItem)。看看：https://github.com/Zero3nna/UIBarButtonItem-DefaultBackButton

【参考方案6】：

Swift 更新为 UIBarButtonItem 提供了一个包含图像和文本的自定义视图。

var chatImage: UIImage  = UIImage(named: "YourImageName")
var rightButton : UIButton = UIButton(type: UIButtonType.custom)
rightButton.setBackgroundImage(rightImage, for: .normal)
rightButton.setTitle(title, for: .normal)
rightButton.frame.size = CGSize(width: 100, height: 30)

let menuUIBarButtonItem = UIBarButtonItem(customView: rightButton)