UIButton Image + Text IOS

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

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.
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.

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

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.

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:

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

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

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.

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

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]

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.

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

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.

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

schnelle Version:

var button = UIButton()

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