it-swarm.com.de

UIButton mit Bild und Text möglich?

Ich habe eine Schaltfläche mit der Breite 200 und der Höhe 270. Ich möchte Text und Bild auf derselben Schaltfläche anzeigen. Nicht als Hintergrundbild für diesen Text. Stattdessen möchte ich den Text mit der Höhe 120 und dem Bild der Höhe 150 auf derselben Schaltfläche anzeigen. Wie es geht?

64
Viral Narshana

Sie können diesen Code verwenden, er dient Ihrem Zweck

.h file code
IBOutlet UIButton *testBtn;

.m file code
[testBtn setImage: [UIImage imageNamed:@"Image name.png"] forState:UIControlStateNormal];
[testBtn setTitleEdgeInsets:UIEdgeInsetsMake(70.0, -150.0, 5.0, 5.0)];
[testBtn setTitle:@"Your text" forState:UIControlStateNormal];

Passen Sie die Koordinaten und die Größe Ihrer Schaltfläche an Ihre Anforderungen an. Dies ist ein Beispielcode, der Sie anleiten soll.

PS: Nehmen Sie einen UIButton in die Nib-Datei> Machen Sie eine benutzerdefinierte Schaltfläche> Verbinden Sie das IBOutlet mit Ihrer benutzerdefinierten Schaltfläche in der Nib-Datei. Dies ist der Fall.

114
Aditya

Der folgende Code zeigt, wie ein Bild und Text in eine Schaltfläche eingefügt wird, wobei die Eigenschaften setImageEdgeInsets und setTitleEdgeInsets der UIButton-Klasse verwendet werden.

UIButton *butt=[UIButton buttonWithType:UIButtonTypeCustom ];
    [butt setFrame:CGRectMake(0, 0, 100, 100)];
    [butt setBackgroundImage:[UIImage imageNamed:@"sig.png"] forState:UIControlStateNormal];
    [butt setImageEdgeInsets:UIEdgeInsetsMake(0.0, 0.0, 50.0, 0.0)];
    [butt setTitleEdgeInsets:UIEdgeInsetsMake(75.0, 0.0, 0.0, 0.0)];
    [butt setTitle:@"hello" forState:UIControlStateNormal];
    [butt setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
    [self.view addSubview:butt];

Verwenden Sie das Konzept der Unteransichten. Nehmen Sie 3 Steuerelemente UIButton (200x270), UILabel (200x120) und UIImageView (200x150). Weisen Sie das Bild der UIImageView zu und legen Sie den Text für die UILabel fest. Positionieren Sie Ihre Beschriftungs- und Imageview-Steuerelemente basierend auf der Position (x, y) der UIButton.

Am Ende sollten Sie etwas haben wie:

Für die folgenden Fälle:

UIButton *button;
UILabel *label;
UIImageView *imageView;

[button addSubView:imageView];
[button addSubView:label];
6
Vaishnavi Naidu
[testBtn setBackgroudImage: [UIImage imageNamed:@"Image name.png"] forState:UIControlStateNormal];
[testBtn setTitle:@"Your text" forState:UIControlStateNormal];
5
Amit Battan

Ja, Sie können ein Bild und einen Titel in derselben Schaltfläche anzeigen, sofern beide klein genug sind, um sie zu passen. Der schwierige Teil kommt, wenn Sie sich mit der Platzierung befassen müssen.

Sie können mit den contentVerticalAlignment- und contentHorizontalAlignment-Eigenschaften der UIButton (geerbt von UIControl) spielen.

Sie können auch die Eigenschaften titleEdgeInsets und imageEdgeInsets verwenden, um den Titel und das Bild von der Platzierung, die sie erhalten, basierend auf den Ausrichtungseigenschaften zu verschieben.

Wenn Sie eine sehr genaue oder benutzerdefinierte Platzierung wünschen, schlage ich vor, die titleRectForContentRect:- und imageRectForContentRect:-Methoden der UIButton zu überschreiben. Hier können Sie die Rahmen für Ihren Titel und Ihr Bild definieren. Sie werden aufgerufen, wenn der Button angeordnet werden muss. Wenn Sie auf self.titleLabel in titleRectForContentRect: verweisen möchten, stellen Sie sicher, dass zuerst self.currentTitle definiert ist. Ich habe einen fehlerhaften Zugriffsfehler erhalten. Möglicherweise wird die Methode beim ersten Initialisieren des titleLabels aufgerufen.

4
ohnit

In Swift 3

let button = UIButton()

//make sure the image (jpg, png) you are placing in the button
//is about the right size or it will Push the label off the button

//add image
let image = UIImage(named:"my_button_image")
button.setImage(image, for: .normal)
button.imageView?.contentMode = .scaleAspectFit
button.imageEdgeInsets = UIEdgeInsets(top:0, left:-30, bottom:0, right:0) //adjust these to have fit right

//add title
button.setTitle("Fan", for: .normal)
button.titleEdgeInsets = UIEdgeInsets(top:0, left:10, bottom:0, right:0) //adjust insets to have fit how you want

//add button to your view - like in viewDidLoad or your own custom view setup
addSubview(button)

Vergessen Sie nicht, Anker festzulegen, wenn dies programmgesteuert erfolgt, damit sie in Interface Builder angezeigt wird, wenn Sie ein Storyboard verwenden

3
ColossalChris

Wenn Sie mehr Kontrolle über das Layout haben möchten, erstellen Sie eine Unterklasse von UIControl und ordnen Sie die gewünschten Ansichten (UILabel, UIImageView) in einer Xib-Datei an. Dann können Sie Autolayout regelmäßig verwenden, ohne UIEdgeInsets aussuchen zu müssen.

1
orkoden

Die Verwendung von Button-Subviews funktionierte für mich in Swift 4. 

  • Erstellen Sie Ihren Button
  • Legen Sie ein Bild für die Schaltfläche fest
  • Erstellen Sie eine Bezeichnung für den Text
  • Fügen Sie das Label als Unteransicht Ihrer Schaltfläche hinzu
  • Beschriften Sie das Etikett innerhalb der Schaltfläche

           let imageAndTextButton : UIButton = {
                let button = UIButton(frame: .zero)
                button.tintColor = .clear
                button.setImage(#imageLiteral(resourceName: "buttonImage"), for: .normal)
                button.imageView?.contentMode = .scaleToFill
                button.translatesAutoresizingMaskIntoConstraints = false
                return button
            }()
            let textForButtonLabel = UILabel(frame: .zero)
            textForButtonLabel.translatesAutoresizingMaskIntoConstraints = false
            textForButtonLabel.attributedText = NSAttributedString(string: "Text For Button", attributes: buttonTextAttributes)
            textForButtonLabel.textAlignment = .center
            textForButtonLabel.backgroundColor = .clear
            imageAndTextButton.addSubview(textForButtonLabel)
            imageAndTextButton.addConstraint(NSLayoutConstraint(item: textForButtonLabel, attribute: .centerX, relatedBy: .equal, toItem: imageAndTextButton, attribute: .centerX, multiplier: 1.0, constant: 0))
            imageAndTextButton.addConstraint(NSLayoutConstraint(item: textForButtonLabel, attribute: .centerY, relatedBy: .equal, toItem: imageAndTextButton, attribute: .centerY, multiplier: 1.0, constant: 0))
    
0
Femi Loki

Probieren Sie es aus, es ist Arbeit für mich,

Wir müssen den Wert von UIEdgeInsets base auf unsere Tastengröße und Anforderung einstellen.

[self.testButton setTitle: @"myTitle" forState: UIControlStateNormal];
UIImage *iconImage = [UIImage imageWithIcon:@"fa-dot-circle-o" backgroundColor:[UIColor clearColor] iconColor:[UIColor whiteColor] fontSize:10.0f];

//UIEdgeInsets insets = {top, left, bottom, right};

[self.testButton setImageEdgeInsets:UIEdgeInsetsMake(3.0, 0.0, 3.0, 2.0)];
[self.testButton setTitleEdgeInsets:UIEdgeInsetsMake(3.0, 1.0, 3.0, 0.0)];
[self.testButton setImage:iconImage forState:UIControlStateNormal];
[self.testButton addTarget:self action:@selector(testButtonTapped:) forControlEvents:UIControlEventTouchUpInside];
[self.view addSubview:self.testButton];

Hoffe, das hilft jemandem.

0
Jaywant Khedkar