UIButton 图片+文字 IOS

UIButton Image + Text IOS

提问by Codesen

I need a UIButtonwith image & text. Image should be in the top & text comes under the image both should be clickable.

我需要一个UIButton带有图像和文本的。图片应该在顶部，文字在图片下方，两者都应该是可点击的。

回答by Angel G. Olloqui

I see very complicated answers, all of them using code. However, if you are using Interface Builder, there is a very easy way to do this:

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

1. Select the button and set a title and an image. Note that if you set the background instead of the image then the image will be resized if it is smaller than the button.
2. Set the position of both items by changing the edge and insets. You could even control the alignment of both in the Control section.

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

You could even use the same approach by code, without creating UILabels and UIImages inside as other solutions proposed. Always Keep It Simple!

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

EDIT: Attached a small example having the 3 things set (title, image and background) with correct insets

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

回答by holex

I think you are looking for this solutionfor your problem:

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

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

...the rest of the customisation of the button is your duty now, and don't forget to add the button to your view.

...按钮的其余自定义现在是您的职责，不要忘记将按钮添加到您的视图中。

UPDATE #1and UPDATE #2

更新 #1和更新 #2

or, if you don't need a dynamic buttonyou could add your button to your view in the Interface Builderand you could set the same values at there as well. it is pretty same, but here is this version as well in one simple picture.

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

you can also see the final resultin the Interface Builderas it is on the screenshot.

您还可以在界面生成器中看到最终结果，如屏幕截图所示。

回答by Alok

Xcode-9and Xcode-10Apple done few changes regarding Edge Inset now, you can change it under size-inspector.

Xcode-9和Xcode-10Apple 现在对 Edge Inset 做了一些更改，您可以在 size-inspector 下更改它。

Please follow below steps:

请按照以下步骤操作：

Step-1:Input text and select image which you want to show:

步骤 1：输入文本并选择要显示的图像：

Step-2:Select button control as per your requirement as shown in below image:

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

Step-3:Now go-to size inspector and add value as per your requirement:

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

回答by Vinodh

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

but following code will show label above and image in background

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

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

There is no need to use label and button in same control because UIButton has UILabel and UIimageview properties.

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

回答by iPhone Developer

Use this code:

使用此代码：

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];

回答by Rajneesh071

Make UIImageViewand UILabel, and set image and text to both of this....then Place a custom button over imageView and Label....

制作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];  

回答by Oyashiro

I encountered the same problem, and I fix it by creating a new subclass of UIButtonand overriding the layoutSubviews:method as below :

我遇到了同样的问题，我通过创建一个新的子类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;

}

I think that the Angel García Olloqui's answer is another good solution, if you place all of them manually with interface builder but I'll keep my solution since I don't have to modify the content insets for each of my button.

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

回答by Hemant Dixit

Use this code:

使用此代码：

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]

回答by Dhruv

It's really simple,just add image to background of you button and give text to titlelabel of button for uicontrolstatenormal. That's it.

这真的很简单，只需将图像添加到按钮的背景，并为 uicontrolstatenormal 的按钮的标题标签提供文本。就是这样。

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

回答by Prasad G

You should create custom imageview for image and custom label for text and you add to your button as subviews. That's it.

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

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];

For testing purpose, use yourButtonSelected:method

出于测试目的，使用yourButtonSelected:方法

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

}

I think it will be helpful to you.

我想它会对你有所帮助。