UIButton 图片 + 文本 IOS

Question

UIButton 图片 + 文本 IOS

157

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

- Codesen

希望这可以帮到你，查看同时具有文本和图像的 UiButton http://stackoverflow.com/questions/4926581/uibutton-with-picture-and-text然后，您可以在视图上添加一个UITapGestureRecognizer来处理自定义按钮的点击。 - Humayun Ghani

请查看被接受的答案和此链接http://commandshift.co.uk/blog/2013/03/12/uibutton-edge-insets/，了解有关UIButton边缘的信息。 - onmyway133

12个回答

70

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

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中查看最终结果，如屏幕截图所示。

enter image description here

- holex

1

EdgeInsets只在设置了按钮图像时起作用，而且当你设置了按钮图像后，就看不到标题了。如果你设置了背景图像，那么EdgeInsets无法应用于图像，但是你可以看到标题。所以，你不能同时将edgeinsect设置为两者。 - Badal Shah

@BadalShah，是的，有一些情况（取决于按钮大小、图像大小、标题长度等），当您无法同时看到_title_和_image_时，您所说的是正确的，因为_image_会将可见区域的_title_推出；但这种情况并不是普遍存在的，通常_title_和_image_都可以同时出现。 - holex

41

Xcode-9 和 Xcode-10 在边缘插图方面进行了一些更改，现在可以在大小检查器中更改它。

请按照以下步骤操作：

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

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

步骤3： 现在进入大小检查器并根据您的需求添加值：

- Alok

21

Swift 版本：

var button = UIButton()

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

- aturan23

18

在我的情况下，我想把UIImage放在右边，而UILabel放在左边。虽然可以写代码实现（如上所述），但是我更喜欢尽可能使用storyboard完成任务而不写代码。具体操作如下：

首先，在标签框中填写文本，并选择要显示的图像：

这将创建一个类似于按钮的外观:

接下来，找到 Semantic 并选择 Force Right-to-Left (如果您没有指定任何内容，则会显示上面图片中左侧为图像，右侧为标签):

最后，就会看到UIImage在右边，而UILabel在左边:

为在标签和图像之间添加空间，请进入“大小检查器”并根据您的要求更改这些值：

就是这样！

- Harshil Patel

让我开心了一整天！！谢谢！ - devjme

8

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属性。

- Vinodh

2

我需要将图像定位在顶部，文本放置在图像下方，两者都应该可点击。 - Codesen

5

请使用以下代码:

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]

- Hemant Dixit

4

我遇到了同样的问题，通过创建一个新的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的答案也是另一个很好的解决方案，如果您手动使用界面构建器放置所有按钮，但我将保留我的解决方案，因为我不必为每个按钮修改内容插图。

- Oyashiro

4

请使用以下代码：

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

- Tripti Kumar

4

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

- Rajneesh071

简单而有用。如何设置高亮图像和标题？ - DawnSong

设置高亮文本颜色使用 setHighlightedTextColor，你需要使用 forControlEvents 进行交互。 - Rajneesh071

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Angel G. Olloqui · Accepted Answer

我看到很多复杂的答案，都使用了代码。然而，如果您正在使用Interface Builder，有一种非常简单的方法可以实现：

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

IB位置设置 IB Control设置

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

编辑：附带一个具有正确插图的3个设置（标题、图像和背景）的小例子按钮预览