UIButton 图片+文字 IOS

Question

我需要一个带有

图像和文本

的UIButton。图像应位于顶部，文本位于图像下方，两者都应可单击。

Answer 1

我看到非常复杂的答案，它们都使用代码。但是，如果您使用 Interface Builder，有一个非常简单的方法可以做到这一点：

1. 选择按钮并设置标题和图像。请注意，如果您设置背景而不是图像，那么如果图像小于按钮，图像将被调整大小。
2. 通过更改边缘和插图来设置两个项目的位置。您甚至可以在“控制”部分中控制两者的对齐方式。

您甚至可以通过代码使用相同的方法，而无需像其他建议的解决方案那样在内部创建 UILabels 和 UIImages。始终保持简单！

编辑：附上一个小示例，其中设置了 3 件事（标题、图像和背景）并具有正确的插图

Answer 2

我认为您正在为您的问题寻找这个解决方案：

UIButton *_button = [UIButton buttonWithType:UIButtonTypeCustom];
[_button setFrame:CGRectMake(0.f, 0.f, 128.f, 128.f)]; // SET the values for your wishes
[_button setCenter:CGPointMake(128.f, 128.f)]; // SET the values for your wishes
[_button setClipsToBounds:false];
[_button setBackgroundImage:[UIImage imageNamed:@"jquery-mobile-icon.png"] forState:UIControlStateNormal]; // SET the image name for your wishes
[_button setTitle:@"Button" forState:UIControlStateNormal];
[_button.titleLabel setFont:[UIFont systemFontOfSize:24.f]];
[_button setTitleColor:[UIColor blackColor] forState:UIControlStateNormal]; // SET the colour for your wishes
[_button setTitleColor:[UIColor redColor] forState:UIControlStateHighlighted]; // SET the colour for your wishes
[_button setTitleEdgeInsets:UIEdgeInsetsMake(0.f, 0.f, -110.f, 0.f)]; // SET the values for your wishes
[_button addTarget:self action:@selector(buttonTouchedUpInside:) forControlEvents:UIControlEventTouchUpInside]; // you can ADD the action to the button as well like

...按钮的其余定制工作现在是您的职责，并且不要忘记将按钮添加到您的视图中。

更新 #1 和 更新 #2

或者，如果您不需要动态按钮，您可以将按钮添加到Interface Builder中的视图中，并且也可以在那里设置相同的值。它非常相同，但这里也是这个版本，在一张简单的图片中。

您还可以在Interface Builder中看到最终结果，如屏幕截图所示。

Answer 3

Xcode-9 和 Xcode-10 Apple 现在对 Edge Inset 做了一些更改，您可以在尺寸检查器下更改它。

请按照以下步骤操作：

第 1 步： 输入文字并选择要显示的图像：

第2步： 根据您的要求选择按钮控件，如下图所示：

第 3 步： 现在转到尺寸检查器并根据您的要求添加值：

Answer 4

快速版本：

var button = UIButton()

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

Answer 5

就我而言，我想在右侧添加

UIImage

，在左侧添加

UILabel

。也许我可以通过编写代码来实现这一点（就像上面提到的那样），但我更喜欢不编写代码并尽可能通过使用

storyboard

来完成它。这是怎么做到的：

首先，在标签框中写下一些内容，然后选择要显示的图像：

这将创建一个如下所示的按钮：

接下来，查找

Semantic

并选择强制从右到左（如果您不指定任何内容，那么它将像上图一样向左显示图像，向右显示标签）：

最后，您会在右侧看到

UIImage

，在左侧看到

UILabel

：

要在标签和图像之间添加空间，请转到尺寸检查器并根据您的要求更改这些值：

就是这样！

Answer 6

UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
button.imageView.image = [UIImage imageNamed:@"your image name here"];
button.titleLabel.text = @"your text here";

但是以下代码将显示上面的标签和背景中的图像

UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
button.background.image = [UIImage imageNamed:@"your image name here"];
button.titleLabel.text = @"your text here";

无需在同一控件中使用标签和按钮，因为 UIButton 具有 UILabel 和 UIimageview 属性。

Answer 7

使用此代码：

UIButton *sampleButton = [UIButton buttonWithType:UIButtonTypeCustom];
[sampleButton setFrame:CGRectMake(0, 10, 200, 52)];
[sampleButton setTitle:@"Button Title" forState:UIControlStateNormal];
[sampleButton setFont:[UIFont boldSystemFontOfSize:20]];
[sampleButton setBackgroundImage:[[UIImage imageNamed:@"redButton.png"] 
stretchableImageWithLeftCapWidth:10.0 topCapHeight:0.0] forState:UIControlStateNormal];
[sampleButton addTarget:self action:@selector(buttonPressed)
forControlEvents:UIControlEventTouchUpInside];
[self.view addSubview:sampleButton]

Answer 8

您应该为图像创建自定义图像视图，为文本创建自定义标签，并将其作为子视图添加到按钮中。就是这样。

UIButton *yourButton = [UIButton buttonWithType:UIButtonTypeCustom];
yourButton.backgroundColor = [UIColor greenColor];
yourButton.frame = CGRectMake(140, 40, 175, 30);     
[yourButton addTarget:self action:@selector(yourButtonSelected:) forControlEvents:UIControlEventTouchUpInside]; 
[self.view addSubview:yourButton];

UIImageView *imageView1 = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, yourButton.frame.size.width, yourButton.frame.size.height/2)];
imageView1.image =[UIImage imageNamed:@"images.jpg"];
[yourButton addSubview:imageView1];

UILabel *label=[[UILabel alloc] initWithFrame:CGRectMake(0, yourButton.frame.size.height/2, yourButton.frame.size.width, yourButton.frame.size.height/2)];
label.backgroundColor = [UIColor greenColor];
label.textAlignment= UITextAlignmentCenter;
label.text = @"ButtonTitle";
[yourButton addSubview:label];

出于测试目的，请使用

yourButtonSelected:

方法

-(void)yourButtonSelected:(id)sender{
    NSLog(@"Your Button Selected");

}

我想这会对你有帮助。

Answer 9

使用此代码：

UIButton *button=[UIButton buttonWithType:UIButtonTypeRoundedRect];
    button.imageView.frame=CGRectMake(0.0f, 0.0f, 50.0f, 44.0f);///You can replace it with your own dimensions.
    UILabel *label=[[UILabel alloc] initWithFrame:CGRectMake(0.0f, 35.0f, 50.0f, 44.0f)];///You can replace it with your own dimensions.
    [button addSubview:label];

Answer 10

我遇到了同样的问题，我通过创建

UIButton

的新子类并重写

layoutSubviews:

方法来修复它，如下所示：

-(void)layoutSubviews {
    [super layoutSubviews];

    // Center image
    CGPoint center = self.imageView.center;
    center.x = self.frame.size.width/2;
    center.y = self.imageView.frame.size.height/2;
    self.imageView.center = center;

    //Center text
    CGRect newFrame = [self titleLabel].frame;
    newFrame.origin.x = 0;
    newFrame.origin.y = self.imageView.frame.size.height + 5;
    newFrame.size.width = self.frame.size.width;

    self.titleLabel.frame = newFrame;
    self.titleLabel.textAlignment = UITextAlignmentCenter;

}

我认为 Angel García Olloqui 的答案是另一个很好的解决方案，如果您使用界面生成器手动放置所有这些，但我会保留我的解决方案，因为我不必修改每个按钮的内容插入。

Answer 11

制作

UIImageView

和

UILabel

，并将图像和文本设置为这两个....然后在imageView和Label上放置一个自定义按钮....

UIImageView *imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"search.png"]];
    imageView.frame = CGRectMake(x, y, imageView.frame.size.width, imageView.frame.size.height);
    [self.view addSubview:imageView];

UILabel *yourLabel = [[UILabel alloc] initWithFrame:CGRectMake(x, y,a,b)];
yourLabel.text = @"raj";
[self.view addSubview:yourLabel];

UIButton * yourBtn=[UIButton buttonWithType:UIButtonTypeCustom];
[yourBtn setFrame:CGRectMake(x, y,c,d)];
[yourBtn addTarget:self action:@selector(@"Your Action") forControlEvents:UIControlEventTouchUpInside];
[self.view addSubview:yourBtn];  

Answer 12

这非常简单，只需将图像添加到按钮的背景中，并将文本添加到按钮的标题标签中，以实现 uicontrolstatenormal。 就是这样。

[btn setBackgroundImage:[UIImage imageNamed:@"img.png"] forState:UIControlStateNormal];
[btn setContentVerticalAlignment:UIControlContentVerticalAlignmentBottom];
[btn setTitle:@"Click Me" forState:UIControlStateNormal];

Answer 13

找到了一篇很好的文章，以新的、干净的方式自定义按钮。分享给大家参考

https://sarunw.com/posts/new-way-to-style-uibutton-in-ios15/