UIButton图片+文字IOS


129

我需要UIButton图片和文字的图片。图片应位于顶部,文字应位于图片下方,并且两者均应可点击。


希望对您有所帮助,请参阅[同时具有TEXT和IMAGE的UiButton] [1] stackoverflow.com/questions/4926581/… [1]:stackoverflow.com/questions/4926581/… 然后,您可以在视图上添加UITapGestureRecognizer来处理custombutton点击。
Humayun Ghani 2012年

22
听起来更像是需求规范,而不是问题。
阿比森

请参阅已接受的答案以及有关UIButton Edges的commandshift.co.uk/blog/2013/03/12/uibutton-edge-insets
onmyway133

Answers:


308

我看到非常复杂的答案,所有答案都使用代码。但是,如果您使用的是Interface Builder,则有一种非常简单的方法:

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

IB位置设置 IB控制集

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

编辑:附上一个小示例,其中包含3个设置正确的插图(标题,图像和背景) 按钮预览


2
这是对的。您将要使用标题和图像上的边缘插图正确地对齐两者。您可以通过设置titleEdgeInsets和contentEdgeInsets属性在代码中执行此操作。
Tim Mahoney 2012年

4
是的,这几乎是正确的。只是您必须设置Background图片而不是Image,否则您将看不到标题,甚至不设置插入值来重新定位标题。
Holex 2012年

6
我也有这个麻烦。如果您的标题未显示,请尝试为其设置负的左偏移。看起来IB会自动将其推出到图片的右侧。
brians

8
这样只会并排显示图像和文本,对吗?有没有办法从上到下改变方向?这就是原始问题的内容以及我正在寻找的内容。谢谢!
flohei

12
对于使用Xcode 8的用户,可能看不到Edge属性。添加图像后,文本也可能消失。它将文本更改为白色,如果您使用的是白色背景,则看起来好像消失了。更改文字颜色,它将显示在图片附近。您可以在“大小”检查器下调整插图。
米卡蒙托亚

67

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

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

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

UPDATE#1UPDATE#2

要么, 如果不需要动态按钮,则可以在“ 界面生成器”中将按钮添加到视图中,也可以在此处设置相同的值。它非常相似,但是在一个简单的图片中也有此版本。

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

在此处输入图片说明


EdgeInsets仅在您具有“设置按钮图像”并且设置按钮图像时看不到标题时才起作用。而且,如果设置背景图像,则EdgeInsets不能应用于图像。您可以看到标题。因此,您不能同时将edgeinsect设置为两者。
Badal Shah 2015年

@BadalShah,是的,在某些情况下(取决于按钮的大小,图像大小,标题的长度等),当您说的是正确的时,您将无法同时看到标题图像,因为图像推出可见区域的标题;但是这种情况根本不是通用的,通用的情况是标题图像可以并且将同时出现。
Holex 2015年

31

Xcode-9Xcode-10 Apple现在对Edge Inset所做的更改很少,您可以在size-inspector下进行更改。

请按照以下步骤操作:

步骤1: 输入文字并选择要显示的图像:

在此处输入图片说明

步骤2:根据需要 选择按钮控件,如下图所示:

在此处输入图片说明

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

在此处输入图片说明


9
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属性,所以无需在同一控件中使用标签和按钮。


1
我需要定位在顶部和图片下方的文字图片都应该可以点击..
Codesen

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

4

使用此代码:

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]

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;

}

我认为AngelGarcíaOlloqui的答案是另一个不错的解决方案,如果您将它们全部手动放置在Interface Builder中,但是我将保留我的解决方案,因为我不必为每个按钮修改内容插图。


4

制作UIImageViewUILabel,并将图像和文本都设置为两者。...然后将自定义按钮放在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];  

简单实用。如何设置突出显示的图像和标题?
DawnSong

标记setHighlightedTextColor,并且您必须使用forControlEvents
Rajneesh071

3

您应该为图像创建自定义imageview,为文本创建自定义标签,然后将其作为子视图添加到按钮中。而已。

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");

}

我认为这将对您有所帮助。


3

这非常简单,只需将图像添加到按钮的背景,然后将文本输入按钮的titlelabel即可,以实现uicontrolstatenormal。而已。

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

4
...文字在图片下方如何显示?
Holex 2012年

@holex:非常感谢您的指导,我发现了它的缺陷,然后进行了相应的更改。
Dhruv 2012年

0

快速版本:

var button = UIButton()

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

在此处输入图片说明

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.