web-dev-qa-db-fra.com

Ajouter un UILabel à une UIToolbar

J'essaie d'ajouter une étiquette à ma barre d'outils. Button fonctionne très bien, mais lorsque j'ajoute l'objet label, il se bloque. Des idées?

UIBarButtonItem *setDateRangeButton = [[UIBarButtonItem alloc] initWithTitle:@"Set date range"
                                                                       style:UIBarButtonItemStyleBordered
                                                                      target:self
                                                                      action:@selector(setDateRangeClicked:)];

UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(5, 5, 20, 20)];
label.text = @"test";

[toolbar setItems:[NSArray arrayWithObjects:setDateRangeButton,label, nil]];

// Add the toolbar as a subview to the navigation controller.
[self.navigationController.view addSubview:toolbar];

// Reload the table view
[self.tableView reloadData];
iosiphoneuibarbuttonitem
95
user8359

Regarde ça

[[UIBarButtonItem alloc] initWithCustomView:yourCustomView];

Essentiellement, chaque élément doit être un "bouton", mais il peut être instancié avec la vue souhaitée. Voici un exemple de code. Remarque: étant donné que les autres boutons se trouvent généralement dans la barre d’outils, des espaceurs sont placés de chaque côté du bouton de titre afin qu’il reste centré.

NSMutableArray *items = [[self.toolbar items] mutableCopy];

UIBarButtonItem *spacer = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemFlexibleSpace target:nil action:nil];
[items addObject:spacer];
[spacer release];

self.titleLabel = [[UILabel alloc] initWithFrame:CGRectMake(0.0 , 11.0f, self.view.frame.size.width, 21.0f)];
[self.titleLabel setFont:[UIFont fontWithName:@"Helvetica-Bold" size:18]];
[self.titleLabel setBackgroundColor:[UIColor clearColor]];
[self.titleLabel setTextColor:[UIColor colorWithRed:157.0/255.0 green:157.0/255.0 blue:157.0/255.0 alpha:1.0]];
[self.titleLabel setText:@"Title"];
[self.titleLabel setTextAlignment:NSTextAlignmentCenter];

UIBarButtonItem *spacer2 = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemFlexibleSpace target:nil action:nil];
[items addObject:spacer2];
[spacer2 release];

UIBarButtonItem *title = [[UIBarButtonItem alloc] initWithCustomView:self.titleLabel];
[items addObject:title];
[title release];

[self.toolbar setItems:items animated:YES];
[items release];
127
adam

Pour ceux qui utilisent Interface Builder pour mettre en forme votre UIToolBar, il est également possible de le faire en utilisant uniquement Interface Builder.

Pour ajouter une UILabel à une UIToolBar, vous devez ajouter un objet générique UIView à votre UIToolBar dans IB en faisant glisser un nouveau UIView objet sur votre UIToolBar. IB créera automatiquement une UIBarButtonItem qui sera initialisée avec votre personnalisation UIView. Ajoutez ensuite une UILabel à la UIView et modifiez la UILabel graphiquement pour correspondre à votre style préféré. Vous pouvez ensuite configurer visuellement vos entretoises fixes et/ou variables à votre guise pour positionner votre UILabel de manière appropriée.

Vous devez également définir l'arrière-plan de la UILabel et de la UIView sur clearColor pour que la UIToolBar s'affiche correctement sous la UILabel.

119
Matt R

J'ai trouvé la réponse de answerBot très utile, mais je pense avoir trouvé un moyen encore plus simple dans Interface Builder:

  • créer un UIBarButtonItem et l'ajouter à votre barre d'outils dans Interface Builder

enter image description here

  • Décochez la case "activé" pour ce BarButtonItem

enter image description here

  • branchez ce BarButtonItem à une propriété de votre classe (ceci est dans Swift, mais serait très similaire dans Obj-C):

    @IBOutlet private weak var lastUpdateButton: UIBarButtonItem! // Dummy barButtonItem whose customView is lastUpdateLabel

  • ajoutez une autre propriété pour le label lui-même:

    private var lastUpdateLabel = UILabel(frame: CGRectZero)

  • dans viewDidLoad, ajoutez le code suivant pour définir les propriétés de votre étiquette, puis ajoutez-le en tant que customView de votre BarButtonItem.

    // Dummy button containing the date of last update
lastUpdateLabel.sizeToFit()
lastUpdateLabel.backgroundColor = UIColor.clearColor()
lastUpdateLabel.textAlignment = .Center
lastUpdateButton.customView = lastUpdateLabel

  • Pour mettre à jour le texte UILabel:

    lastUpdateLabel.text = "Updated: 9/12/14, 2:53"
lastUpdateLabel.sizeToFit()

Résultat :

enter image description here

Vous devez appeler lastUpdateLabel.sizetoFit() chaque fois que vous mettez à jour le texte de l'étiquette.

29
Frédéric Adda

L’une des choses pour lesquelles j’utilise cette astuce est d’instancier un UIActivityIndicatorView au-dessus de UIToolBar, ce qui ne serait pas possible autrement. Par exemple, ici, j'ai un UIToolBar avec 2 UIBarButtonItem, un FlexibleSpaceBarButtonItem, puis un autre UIBarButtonItem. Je veux insérer un UIActivityIndicatorView dans le UIToolBar entre l'espace flexible et le bouton final (main droite). Donc, dans mon RootViewController je fais ce qui suit,

- (void)viewDidLoad {
[super viewDidLoad];// Add an invisible UIActivityViewIndicator to the toolbar
UIToolbar *toolbar = (UIToolbar *)[self.view viewWithTag:767];
NSArray *items = [toolbar items];

activityIndicator = [[UIActivityIndicatorView alloc] initWithFrame:CGRectMake(0.0f, 0.0f, 20.0f, 20.0f)];
[activityIndicator setActivityIndicatorViewStyle:UIActivityIndicatorViewStyleWhite];    

NSArray *newItems = [NSArray arrayWithObjects:[items objectAtIndex:0],[items objectAtIndex:1],[items objectAtIndex:2],
                     [[UIBarButtonItem alloc] initWithCustomView:activityIndicator], [items objectAtIndex:3],nil];
[toolbar setItems:newItems];}
6
Alasdair Allan

Détails

  • Xcode 10.2.1 (10E1001), Swift 5

Échantillon complet

import UIKit

class ViewController: UIViewController {

    private weak var toolBar: UIToolbar?

    override func viewDidLoad() {
        super.viewDidLoad()

        var bounds =  UIScreen.main.bounds
        let bottomBarWithHeight = CGFloat(44)
        bounds.Origin.y = bounds.height - bottomBarWithHeight
        bounds.size.height = bottomBarWithHeight
        let toolBar = UIToolbar(frame: bounds)
        view.addSubview(toolBar)

        var buttons = [UIBarButtonItem]()
        buttons.append(UIBarButtonItem(barButtonSystemItem: .add, target: self, action: #selector(ViewController.action)))
        buttons.append(UIBarButtonItem(barButtonSystemItem: .camera, target: self, action: #selector(ViewController.action)))
        buttons.append(UIBarButtonItem(barButtonSystemItem: .flexibleSpace, target: nil, action: nil))
        buttons.append(UIBarButtonItem(barButtonSystemItem: .flexibleSpace, target: nil, action: nil))
        buttons.append(ToolBarTitleItem(text: "\(NSDate())", font: .systemFont(ofSize: 12), color: .lightGray))
        buttons.append(UIBarButtonItem(barButtonSystemItem: .flexibleSpace, target: nil, action: nil))
        buttons.append(UIBarButtonItem(barButtonSystemItem: .cancel, target: self, action:  #selector(ViewController.action)))
        toolBar.items = buttons

        self.toolBar = toolBar
    }
    @objc func action() { print("action") }
}

class ToolBarTitleItem: UIBarButtonItem {

    init(text: String, font: UIFont, color: UIColor) {
        let label =  UILabel(frame: UIScreen.main.bounds)
        label.text = text
        label.sizeToFit()
        label.font = font
        label.textColor = color
        label.textAlignment = .center
        super.init()
        customView = label
    }
    required init?(coder aDecoder: NSCoder) { super.init(coder: aDecoder) }
}

Résultat

enter image description here

2
Vasily Bodnarchuk

Similaire à Matt R, j'ai utilisé le constructeur d'interface. Mais je voulais avoir 1 UIWebView à l'intérieur à la place pour que je puisse avoir du texte en gras et d'autres non (comme l'application mail). Alors

  1. Ajoutez la vue Web à la place.
  2. Décocher opaque
  3. Assurez-vous que la couleur de fond est claire
  4. Tout raccorder avec IBOutlet
  5. Utilisez les éléments ci-dessous html pour obtenir un arrière-plan transparent afin que la barre d'outils transparaisse

Code:

NSString *path = [[NSBundle mainBundle] bundlePath];
NSURL *baseURL = [NSURL fileURLWithPath:path];
NSString *html = [NSString stringWithFormat:@"<html><head><style>body{font-size:11px;text-align:center;background-color:transparent;color:#fff;font-family:helvetica;vertical-align:middle;</style> </head><body><b>Updated</b> 10/11/12 <b>11:09</b> AM</body></html>"];
[myWebView loadHTMLString:html baseURL:baseURL];
2
Todd Horst

Si vous souhaitez ajouter une vue dans la vue de la barre d’outils, vous pouvez essayer ceci:

[self.navigationController.tabBarController.view addSubview:yourView];
1
Alessandro Ornano

Essaye ça:

UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(140 , 0, 50, 250)];
[label setBackgroundColor:[UIColor clearColor]];
label.text = @"TEXT";
UIView *view = (UIView *) label;
[self.barItem setCustomView:view];

Remarque: self.barItem est un UIBarButtonItem ajouté à partir de la bibliothèque d'objets et placé entre deux espaces flexibles.

une autre méthode consiste à supprimer le [self.barItem setCustom:view] line et modifiez les paramètres de label (largeur) afin qu’elle remplisse l’ensemble de la barre d’outils et définisse l’alignement au milieu et la police par vous-même dans le code,

1
user1938695