可以同时具有图像和文本的 UIButton 吗？答案

【问题标题】：UIButton with both image and text possible?可以同时具有图像和文本的 UIButton 吗？
【发布时间】：2011-05-19 16:38:48
【问题描述】：

我有一个宽度为 200 高度为 270 的按钮。我想在同一个按钮上显示文本和图像。不作为该文本的背景图像。而不是这个，我想在同一个按钮上显示高度为 120 的文本和高度为 150 的图像。怎么做？

【问题讨论】：

标签： ios iphone xcode uibutton

【解决方案1】：

您可以使用此代码，它将为您服务

.h file code
IBOutlet UIButton *testBtn;

.m file code
[testBtn setImage: [UIImage imageNamed:@"Image name.png"] forState:UIControlStateNormal];
[testBtn setTitleEdgeInsets:UIEdgeInsetsMake(70.0, -150.0, 5.0, 5.0)];
[testBtn setTitle:@"Your text" forState:UIControlStateNormal];

根据需要调整按钮的坐标和大小。这是指导您的示例代码。

PS：在 nib 文件中取一个 UIButton>使其成为自定义按钮>将 IBOutlet 连接到 nib 文件中的自定义按钮。就是这样。

【讨论】：

您好，感谢您回答我的问题。我试过了。代码运行良好，但一个问题是我的图像不是固定大小。如何设置图像大小使其适合按钮大小？
这也可以直接在 NIB 文件中完成，这样您就可以预览它的外观，而无需在代码中进行试验。
对于那些需要在代码中制作按钮的人，您可以通过设置 testBtn.imageEdgeInsets = UIEdgeInsetsMake(top, left, bottom, right); 来调整图像
这对我不起作用。我不得不覆盖此处发布的 layoutSubviews：stackoverflow.com/questions/4201959/…
立即为我工作的解决方案发布在这里：stackoverflow.com/a/5358259/2207018

【解决方案2】：

下面的代码展示了使用 UIButton 类的 setImageEdgeInsets 和 setTitleEdgeInsets 属性在按钮中放置图像和文本。

UIButton *butt=[UIButton buttonWithType:UIButtonTypeCustom ];
    [butt setFrame:CGRectMake(0, 0, 100, 100)];
    [butt setBackgroundImage:[UIImage imageNamed:@"sig.png"] forState:UIControlStateNormal];
    [butt setImageEdgeInsets:UIEdgeInsetsMake(0.0, 0.0, 50.0, 0.0)];
    [butt setTitleEdgeInsets:UIEdgeInsetsMake(75.0, 0.0, 0.0, 0.0)];
    [butt setTitle:@"hello" forState:UIControlStateNormal];
    [butt setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
    [self.view addSubview:butt];

【讨论】：

这对我不起作用，直到我将 setBackgroundImage 更改为 setImage 然后效果很好。
背景图片和图片不一样
我认为问题是如何设置图像和标题，而不是如何设置背景图像和标题

【解决方案3】：

在 Swift 3 中

let button = UIButton()

//make sure the image (jpg, png) you are placing in the button
//is about the right size or it will push the label off the button

//add image
let image = UIImage(named:"my_button_image")
button.setImage(image, for: .normal)
button.imageView?.contentMode = .scaleAspectFit
button.imageEdgeInsets = UIEdgeInsets(top:0, left:-30, bottom:0, right:0) //adjust these to have fit right

//add title
button.setTitle("Fan", for: .normal)
button.titleEdgeInsets = UIEdgeInsets(top:0, left:10, bottom:0, right:0) //adjust insets to have fit how you want

//add button to your view - like in viewDidLoad or your own custom view setup
addSubview(button)

如果以编程方式设置锚点，请不要忘记设置锚点，以便在使用情节提要的情况下将其显示/附加到 Interface Builder 中的按钮引用

【讨论】：

【解决方案4】：

是的，您可以在同一个按钮中显示图像和标题，只要它们都足够小以适应。当您需要处理放置时，困难的部分就来了。

您可以使用UIButton（继承自UIControl）的contentVerticalAlignment 和contentHorizontalAlignment 属性。

您还可以使用titleEdgeInsets 和imageEdgeInsets 属性根据对齐属性将标题和图像从它们获得的位置移动。

如果您想要非常准确或自定义的放置，我建议覆盖UIButton 的titleRectForContentRect: 和imageRectForContentRect: 方法。这些允许您定义标题和图像的框架，并且在需要布置按钮时调用它们。一个警告，如果您想在titleRectForContentRect: 中引用self.titleLabel，请确保首先定义self.currentTitle。我遇到了一个错误的访问错误，可能是在第一次初始化 titleLabel 时调用了该方法。

【讨论】：

【解决方案5】：

使用子视图的概念。采取 3 个控件，UIButton (200x270)、UILabel (200x120) 和 UIImageView (200x150)。将图像分配给UIImageView，并将文本设置为UILabel。根据 UIButton 的 (x,y) 位置定位标签和图像视图控件。

最后，你应该有类似的东西：

对于以下情况：

UIButton *button;
UILabel *label;
UIImageView *imageView;

[button addSubView:imageView];
[button addSubView:label];

【讨论】：

【解决方案6】：

[testBtn setBackgroudImage: [UIImage imageNamed:@"Image name.png"] forState:UIControlStateNormal];
[testBtn setTitle:@"Your text" forState:UIControlStateNormal];

【讨论】：

用户正在寻找一种没有背景图片的方法

【解决方案7】：

如果您想对布局有更多控制权，请创建UIControl 的子类并将所需的视图（UILabel、UIImageView）排列在 xib 文件中。然后就可以定期使用 Autolayout 了，不用整理UIEdgeInsets。

【讨论】：

【解决方案8】：

在 Swift 4 中使用按钮子视图对我有用。

创建您的按钮
为按钮设置图片
为文本创建标签
将标签添加为按钮的子视图

限制按钮内的标签

       let imageAndTextButton : UIButton = {
            let button = UIButton(frame: .zero)
            button.tintColor = .clear
            button.setImage(#imageLiteral(resourceName: "buttonImage"), for: .normal)
            button.imageView?.contentMode = .scaleToFill
            button.translatesAutoresizingMaskIntoConstraints = false
            return button
        }()
        let textForButtonLabel = UILabel(frame: .zero)
        textForButtonLabel.translatesAutoresizingMaskIntoConstraints = false
        textForButtonLabel.attributedText = NSAttributedString(string: "Text For Button", attributes: buttonTextAttributes)
        textForButtonLabel.textAlignment = .center
        textForButtonLabel.backgroundColor = .clear
        imageAndTextButton.addSubview(textForButtonLabel)
        imageAndTextButton.addConstraint(NSLayoutConstraint(item: textForButtonLabel, attribute: .centerX, relatedBy: .equal, toItem: imageAndTextButton, attribute: .centerX, multiplier: 1.0, constant: 0))
        imageAndTextButton.addConstraint(NSLayoutConstraint(item: textForButtonLabel, attribute: .centerY, relatedBy: .equal, toItem: imageAndTextButton, attribute: .centerY, multiplier: 1.0, constant: 0))

【讨论】：

【解决方案9】：

试试这个对我有用，

我们必须根据我们的按钮大小和要求来设置 UIEdgeInsets 的值。

[self.testButton setTitle: @"myTitle" forState: UIControlStateNormal];
UIImage *iconImage = [UIImage imageWithIcon:@"fa-dot-circle-o" backgroundColor:[UIColor clearColor] iconColor:[UIColor whiteColor] fontSize:10.0f];

//UIEdgeInsets insets = {top, left, bottom, right};

[self.testButton setImageEdgeInsets:UIEdgeInsetsMake(3.0, 0.0, 3.0, 2.0)];
[self.testButton setTitleEdgeInsets:UIEdgeInsetsMake(3.0, 1.0, 3.0, 0.0)];
[self.testButton setImage:iconImage forState:UIControlStateNormal];
[self.testButton addTarget:self action:@selector(testButtonTapped:) forControlEvents:UIControlEventTouchUpInside];
[self.view addSubview:self.testButton];

希望这对某些人有所帮助。

【讨论】：

【解决方案10】：

快速版本：

var button = UIButton()

newGameButton.setTitle("Новая игра", for: .normal)
newGameButton.setImage(UIImage(named: "energi"), for: .normal)
newGameButton.backgroundColor = .blue
newGameButton.imageEdgeInsets.left = -50

【讨论】：