Wie kann ich ein UIBarButtonItem mit sowohl Bild und Text haben?

Question

Wenn ich versuche, ein Bild für ein UIBarButtonItem zu verwenden, wird der Text nicht angezeigt. Gibt es eine Möglichkeit, sowohl den Text als auch das Bild anzuzeigen?

Answer 1

Sie können das UIBarButtonItem mit einer benutzerdefinierten Ansicht initiieren, die sowohl Bild als auch Text enthält. Hier ist ein Beispiel, das einen UIButton verwendet.

UIImage *chatImage = [UIImage imageNamed:@"08-chat.png"];

UIButton *chatButton = [UIButton buttonWithType:UIButtonTypeCustom];
[chatButton setBackgroundImage:chatImage forState:UIControlStateNormal];
[chatButton setTitle:@"Chat" forState:UIControlStateNormal];
chatButton.frame = (CGRect) {
    .size.width = 100,
    .size.height = 30,
};

UIBarButtonItem *barButton= [[[UIBarButtonItem alloc] initWithCustomView:chatButton] autorelease];
self.toolbar.items = [NSArray arrayWithObject:barButton];

Answer 2

Ich schlage einen Weg vor, wie man dies mit Storyboard tun kann:

1. Ziehen und Ablegen in der ToolBar gewöhnlichen UIView. Es wird automatisch in ein Bar Button Item umgewandelt. Passen Sie die Breite der Ansicht im "Größeninspektor" an. Ändern Sie die Hintergrundfarbe der Ansicht in eine klare Farbe.

2. Setzen Sie UIButton und UILabel in eine Ansicht ein. Sie können Constraints verwenden, um ihre Positionen anzupassen. Sie können sie auch außerhalb einer Ansicht platzieren, zum Beispiel etwas höher oder niedriger (wie auf meinem Bild). Setzen Sie Standard- und hervorgehobene Bilder für UIButton.

3. Kopieren Sie das Element der Leistenschaltflächen und passen Sie weitere Schaltflächen an. Flexible Räume hinzufügen.

4. Absatzmärkte schaffen.

5. Erledigt :). Wenn Sie die Anwendung ausführen, erhalten Sie eine Symbolleiste wie diese:

P.S. Hier können Sie lesen, wie man UIToolbar-Unterklassen mit .xib erstellt

Answer 3

Swift 4.2 mit Ziel

extension UIBarButtonItem {
    convenience init(image :UIImage, title :String, target: Any?, action: Selector?) {
        let button = UIButton(type: .custom)
        button.setImage(image, for: .normal)
        button.setTitle(title, for: .normal)
        button.frame = CGRect(x: 0, y: 0, width: image.size.width, height: image.size.height)

        if let target = target, let action = action {
            button.addTarget(target, action: action, for: .touchUpInside)
        }

        self.init(customView: button)
    }
}

Answer 4

UIButton *button =  [UIButton buttonWithType:UIButtonTypeCustom];
[button setImage:[UIImage imageNamed:@"image.png"] forState:UIControlStateNormal];
[button addTarget:target action:@selector(buttonAction:)forControlEvents:UIControlEventTouchUpInside];
[button setFrame:CGRectMake(0, 0, 53, 31)];
UILabel *label = [[UILabel alloc]initWithFrame:CGRectMake(3, 5, 50, 20)];
[label setFont:[UIFont fontWithName:@"Arial-BoldMT" size:13]];
[label setText:title];
label.textAlignment = UITextAlignmentCenter;
[label setTextColor:[UIColor whiteColor]];
[label setBackgroundColor:[UIColor clearColor]];
[button addSubview:label];
UIBarButtonItem *barButton = [[UIBarButtonItem alloc] initWithCustomView:button];
self.navigationItem.leftBarButtonItem = barButton;

Answer 5

Kris Markel's Antwort ist ein guter Anfang (nur < iOS7), aber wenn Sie tint Farbe verwenden, es wount Arbeit für das Bild und den hervorgehobenen Zustand der Schaltfläche.

Ich habe eine Kategorie erstellt, die eine UIBarButtonItem (leftBarButtonItem), die aussieht und verhält sich wie eine normale iOS7 zurück-Taste erstellen wird. Werfen Sie einen Blick auf: https://github.com/Zero3nna/UIBarButtonItem-DefaultBackButton