UIButton Image + Text IOS

128

Ich brauche eine UIButtonmit Bild & Text . Das Bild sollte oben sein und der Text sollte unter das Bild kommen. Beide sollten anklickbar sein.

Codesen
quelle
Ich hoffe, dies hilft. Siehe [UiButton mit TEXT und IMAGE] [1] stackoverflow.com/questions/4926581/… [1]: stackoverflow.com/questions/4926581/… Sie können dann einen UITapGestureRecognizer zu Ihrer Ansicht hinzufügen, um den Custombutton zu verarbeiten Klicks.
Humayun Ghani
22
Klingt eher nach einer Anforderungsspezifikation als nach einer Frage.
Abizern
Siehe die akzeptierte Antwort und diese commandshift.co.uk/blog/2013/03/12/uibutton-edge-insets über UIButton Edges
onmyway133

Antworten:

309

Ich sehe sehr komplizierte Antworten, alle mit Code. Allerdings , wenn Sie Interface Builder verwenden , gibt es eine sehr einfache Möglichkeit , dies zu tun:

  1. Wählen Sie die Schaltfläche und legen Sie einen Titel und ein Bild fest. Beachten Sie, dass die Größe des Bilds geändert wird, wenn Sie den Hintergrund anstelle des Bilds festlegen, wenn es kleiner als die Schaltfläche ist.IB Grundbild und Titel
  2. Stellen Sie die Position beider Elemente ein, indem Sie die Kante und die Einsätze ändern. Sie können sogar die Ausrichtung beider Elemente im Abschnitt Steuerung steuern.

IB Position eingestellt IB Kontrollset

Sie können sogar denselben Code-Ansatz verwenden, ohne darin UILabels und UIImages zu erstellen, wie dies bei anderen vorgeschlagenen Lösungen der Fall ist. Halte es immer einfach!

BEARBEITEN: Anbei ein kleines Beispiel mit den 3 eingestellten Dingen (Titel, Bild und Hintergrund) mit korrekten Einfügungen Tastenvorschau

Engel G. Olloqui
quelle
2
Das ist richtig. Sie sollten die Kanteneinsätze auf dem Titel und dem Bild verwenden, um die beiden richtig auszurichten. Sie können dies im Code tun, indem Sie die Eigenschaften titleEdgeInsets und contentEdgeInsets festlegen.
Tim Mahoney
4
Ja, es ist fast richtig. Sie müssen nur das BackgroundBild anstelle von festlegen Image, da sonst der Titel nicht angezeigt wird und nicht einmal die eingefügten Werte festgelegt werden, um den Titel neu zu positionieren.
Holex
6
Ich hatte auch Probleme damit. Wenn Ihr Titel nicht angezeigt wird, versuchen Sie, einen negativen linken Versatz dafür festzulegen. Es sieht so aus, als würde IB es automatisch rechts neben das Bild schieben.
Brian
8
Dies zeigt nur das Bild und den Text nebeneinander an, oder? Gibt es eine Möglichkeit, die Ausrichtung von oben nach unten zu ändern? Dies ist, was die ursprüngliche Frage besagt und wonach ich auch suche. Vielen Dank!
Flohei
12
Für Benutzer von Xcode 8 wird die Edge-Eigenschaft möglicherweise nicht angezeigt. Der Text kann auch nach dem Hinzufügen eines Bildes verschwinden. Der Text wird in Weiß geändert. Wenn Sie sich auf einem weißen Hintergrund befinden, scheint er verschwunden zu sein. Ändern Sie die Textfarbe und es wird in der Nähe des Bildes angezeigt. Sie können die Einfügungen unter Größeninspektor anpassen.
Micah Montoya
67

Ich denke, Sie suchen nach dieser Lösung für Ihr 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

... der Rest der Anpassung der Schaltfläche ist jetzt Ihre Pflicht, und vergessen Sie nicht, die Schaltfläche Ihrer Ansicht hinzuzufügen.

UPDATE # 1 und UPDATE # 2

oder, wenn Sie nicht über eine dynamische Schaltfläche benötigen könnten Sie Ihre Schaltfläche , um Ihre Ansicht in hinzufügen Interface Builder und Sie könnten die gleichen Werte an auch dort eingestellt. es ist ziemlich gleich, aber hier ist auch diese Version in einem einfachen Bild.

Sie können das Endergebnis auch im Interface Builder sehen, wie es auf dem Screenshot zu sehen ist.

Geben Sie hier die Bildbeschreibung ein

holex
quelle
EdgeInsets funktioniert nur, wenn Sie "Schaltflächenbild festlegen" haben und wenn Sie das Schaltflächenbild festlegen, wird der Titel nicht angezeigt. Wenn Sie ein Hintergrundbild festlegen, kann EdgeInsets nicht auf das Bild angewendet werden. und Sie können Titel sehen. Sie können edgeinsect also nicht gleichzeitig auf beide setzen.
Badal Shah
@BadalShah, ja, es gibt einige Szenarien (abhängig von der Größe der Schaltfläche, der Bildgröße, der Länge des Titels usw.), in denen das, was Sie gesagt haben, wahr ist und Sie den Titel und das Bild aufgrund des Bildes nicht gleichzeitig sehen können schiebt den Titel des sichtbaren Bereichs heraus; Dieses Szenario ist jedoch überhaupt nicht generisch. Die generische Situation besteht darin, dass sowohl Titel als auch Bild gleichzeitig angezeigt werden können und werden.
Holex
29

Xcode-9 und Xcode-10 Apple hat jetzt einige Änderungen an Edge Inset vorgenommen. Sie können diese unter Größeninspektor ändern.

Bitte folgen Sie den folgenden Schritten:

Schritt 1: Geben Sie Text ein und wählen Sie das Bild aus, das Sie anzeigen möchten:

Geben Sie hier die Bildbeschreibung ein

Schritt 2: Wählen Sie die Tastensteuerung gemäß Ihren Anforderungen aus (siehe Abbildung unten):

Geben Sie hier die Bildbeschreibung ein

Schritt 3: Gehen Sie jetzt zum Größeninspektor und schaffen Sie einen Mehrwert gemäß Ihren Anforderungen:

Geben Sie hier die Bildbeschreibung ein

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

Der folgende Code zeigt jedoch die Beschriftung oben und das Bild im Hintergrund

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

Label und Button müssen nicht im selben Steuerelement verwendet werden, da UIButton über die Eigenschaften UILabel und UIimageview verfügt.

Vinodh
quelle
1
Ich muss das Bild oben positionieren und der Text unter dem Bild sollte beide anklickbar sein.
Codesen
4

Verwenden Sie diesen 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];
iPhone Entwickler
quelle
4

Verwenden Sie diesen 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]
Hemant Dixit
quelle
4

Ich bin auf dasselbe Problem gestoßen und habe es behoben, indem ich eine neue Unterklasse erstellt UIButtonund die layoutSubviews:Methode wie folgt überschrieben habe :

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

}

Ich denke, dass die Antwort von Angel García Olloqui eine weitere gute Lösung ist, wenn Sie alle manuell mit dem Interface Builder platzieren, aber ich werde meine Lösung beibehalten, da ich die Inhaltseinfügungen nicht für jede meiner Schaltflächen ändern muss.

Oyashiro
quelle
4

Machen Sie UIImageViewund UILabelund setzen Sie Bild und Text auf beide .... dann platzieren Sie eine benutzerdefinierte Schaltfläche über imageView und 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
quelle
Einfach und nützlich. Wie stelle ich hervorgehobenes Bild und Titel ein?
DawnSong
für lable setHighlightedTextColor und Sie müssen mit forControlEvents spielen
Rajneesh071
3

Sie sollten eine benutzerdefinierte Bildansicht für das Bild und eine benutzerdefinierte Beschriftung für den Text erstellen und Ihrer Schaltfläche als Unteransichten hinzufügen. Das ist es.

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

Verwenden Sie zu Testzwecken yourButtonSelected: Methode

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

}

Ich denke, es wird Ihnen hilfreich sein.

Prasad G.
quelle
3

Es ist wirklich einfach, fügen Sie einfach ein Bild zum Hintergrund Ihrer Schaltfläche hinzu und geben Sie dem Titeletikett der Schaltfläche Text für uicontrolstatenormal. Das ist es.

[btn setBackgroundImage:[UIImage imageNamed:@"img.png"] forState:UIControlStateNormal];
[btn setContentVerticalAlignment:UIControlContentVerticalAlignmentBottom];
[btn setTitle:@"Click Me" forState:UIControlStateNormal];
Dhruv
quelle
4
... und wie geht der Text unter das Bild?
Holex
@holex: Vielen Dank für die Regie, ich habe einen Fehler darin gefunden und mich dann entsprechend geändert.
Dhruv
0

schnelle Version:

var button = UIButton()

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

Geben Sie hier die Bildbeschreibung ein

aturan23
quelle