Ajouter un UILabel à une UIToolbar

Question

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

Answer 1

Jetez un coup d'œil à cette

[[UIBarButtonItem alloc] initWithCustomView:yourCustomView];

En principe, chaque élément doit être un " bouton " mais ils peuvent être instanciés avec n'importe quelle vue dont vous avez besoin. Voici un exemple de code. Notez que, dans la mesure où d’autres boutons figurent généralement dans la barre d’outils, des espaceurs sont placés de chaque côté du bouton de titre de manière à ce 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];

Answer 2

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 un UILabel à un UIToolBar , vous devez ajouter un objet UIView générique à votre UIToolBar dans IB en faisant glisser un nouvel objet UIView sur votre UIToolBar . IB créera automatiquement un UIBarButtonItem qui sera initialisé avec votre UIView personnalisé. Ajoutez ensuite un UILabel à UIView et modifiez graphiquement le UILabel afin qu'il corresponde à 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 UILabel et de UIView sur clearColor pour obtenir le UIToolBar . afficher correctement sous UILabel .

Answer 3

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

• créez un UIBarButtonItem et ajoutez-le à votre barre d'outils dans l'interface Constructeur

• Décochez la case "Activé". pour ce BarButtonItem

• branchez ce BarButtonItem à une propriété de votre classe (il s’agit de Rapide, 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 libellé lui-même:

  private var lastUpdateLabel = UILabel(frame: CGRectZero)
  

• dans viewDidLoad, ajoutez le code suivant pour définir les propriétés de votre étiquetez-le et 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:

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

.

Answer 4

L’une des choses pour laquelle je me sers de 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 souhaite insérer un UIActivityIndicatorView dans UIToolBar entre l'espace flexible et le bouton final (à 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];}

Answer 5

Semblable à 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 de messagerie). Donc

1. Ajoutez la vue Web à la place.
2. Décocher opaque
3. Assurez-vous que la couleur de fond est claire
4. Tout brancher avec IBOutlet
5. Utilisez le html ci-dessous 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];

Answer 6

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

Answer 7

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

[self.navigationController.tabBarController.view addSubview:yourView];

Answer 8

Essayez ceci:

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 la ligne [self.barItem setCustom: view] et à modifier les paramètres de label (largeur) de manière à ce qu'elle remplisse la barre d'outils entière et définir l'alignement au milieu et la police par vous-même dans le code,