web-dev-qa-db-fra.com

titre personnalisé dans UINavigationBar?

J'ai un titre UINavigationBar personnalisé et un bouton Précédent personnalisé. Mon problème est que le titre n'est pas centré sur l'iPhone. C'est comme si mon bouton de retour poussait le titre vers la droite. Une idée comment je peux le centrer?

int height = self.navigationController.navigationBar.frame.size.height;
int width = self.navigationController.navigationBar.frame.size.width;


UILabel *navLabel = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, width + 300, 20)];
navLabel.backgroundColor = [UIColor whiteColor];
navLabel.textColor = [UIColor redColor];
navLabel.font = [UIFont fontWithName:@"Helvetica" size:30];
navLabel.textAlignment = UITextAlignmentCenter;
self.navigationItem.titleView = navLabel;
[navLabel release];
((UILabel *)self.navigationItem.titleView).text = self.title;

Merci!

edit J'ai enlevé le code superflu et ajouté cette image:

Picture of title off ceter

Remarquez comment le titre est poussé pour accueillir le bouton ....

iphoneuinavigationbartitle
16
itgiawa

iOS le fait parce que le cadre que vous initialisez est toujours supérieur à 300 pixels en largeur. Il essaie de centrer l’ensemble du cadre car celui-ci est plus grand que l’espace souhaité (à cause du bouton) et votre étiquette est donc poussée vers la droite. Ce que vous devez faire est de donner le cadre de la navLabel la taille minimale dont il a besoin.

Par conséquent, si votre texte ne fait que 100 pixels de large et que le cadre est 400 pixels, iOS tente de centrer les 400 pixels de l'en-tête de navigation et ne dispose pas de suffisamment d'espace. Lorsque vous définissez la taille requise sur 100 px, iOS centralisera correctement votre en-tête, car l'espace disponible est suffisant pour centrer 100 px.

L’extrait de code ci-dessous devrait vous aider à déterminer la taille minimale dont votre cadre a besoin, en fonction de la police et du texte que vous essayez de saisir. Assurez-vous que le cadre de l’étiquette est aussi petit que possible, mais ne dépasser la largeur maximale. (la largeur de la barre de navigation).

UIFont* titleFont = [UIFont fontWithName:@"Helvetica" size:30];
CGSize requestedTitleSize = [titleText sizeWithAttributes:@{NSFontAttributeName: titleFont}]; 
CGFloat titleWidth = MIN(maxTitleWidth, requestedTitleSize.width);

UILabel *navLabel = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, titleWidth, 20)];
navLabel.backgroundColor = [UIColor whiteColor];
navLabel.textColor = [UIColor redColor];
navLabel.font = [UIFont fontWithName:@"Helvetica" size:30];
navLabel.textAlignment = NSTextAlignmentCenter;
navLabel.text = titleText;
self.navigationItem.titleView = navLabel;
40
Bocaxica

J'ai déjà eu le même poblème. J'avais un UINavigationbar avec les boutons droit et gauche. Je veux centrer une image sur le UINavigationbar. Je devais donc placer l'image dans un UIView avec width 0. L'image auto-obtenir une valeur x qui est la moitié de son propre width.

UINavigationItem *item = navigationController.topViewController.navigationItem;
UIView *backView =[[UIView alloc] initWithFrame:CGRectMake(0, 0, 0, 30)];
[img_logo setFrame:CGRectMake(-45, 5, 90, 20)];
[backView addSubview:img_logo];
item.titleView = backView;
5
BHuelse

Bonne réponse! Cependant, sizeWithFont est maintenant obsolète. Vous voudriez faire quelque chose comme ça maintenant.

NSDictionary *textTitleOptions = [NSDictionary dictionaryWithObjectsAndKeys:  [UIFont fontWithName:@"Helvetica" size:30], NSFontAttributeName, nil];

CGSize requestedTitleSize = [[NSString stringWithFormat:@"Your String"] sizeWithAttributes:textTitleOptions];

CGFloat titleWidth = MIN(self.view.frame.size.width, requestedTitleSize.width);

UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, titleWidth, 44)];
3
Luke

J'ai utilisé des contraintes d'autolayout pour résoudre ce problème:

  1. Ajouter UILabel dans un UIView.

  2. Définissez les contraintes de centerX pour UILabel:

    self.titleLabelCenterXConstraint = [NSLayoutConstraint constraintWithItem:self.titleLabel attribute:NSLayoutAttributeCenterX relatedBy:NSLayoutRelationEqual toItem:self attribute:NSLayoutAttributeCenterX multiplier:1.0f constant:0.0f];

  3. Dans UIView layoutSubViews pour ajuster la valeur de décalage centerX:

    - (void)layoutSubviews { [super layoutSubviews]; CGFloat screenCenter = CGRectGetMidX([UIScreen mainScreen].bounds); CGFloat diffCenter = screenCenter - CGRectGetMidX(self.frame); self.titleLabelCenterXConstraint.constant = diffCenter; }

  4. définir UIView sur navigationItem titleView

2
Yang Young

Swift 3 pour la réponse de @ BHuelse:

let image = UIImage(named: "logo")
let logoView = UIView.init(frame: CGRect(x: 0, y: 0, width: 0, height: 30))
let imageView = UIImageView(frame: CGRect(x: -45, y: 5, width: 90, height: 20))
imageView.image = image
imageView.contentMode = .scaleAspectFit
logoView.addSubview(imageView)
self.navigationItem.titleView = logoView
1
Guillermo Aguirre

Swift 2.3:

    let tlabel = UILabel(frame: CGRectMake(0, 0, 200, 40))
    tlabel.text = self.title
    tlabel.textColor = UIColor.whiteColor()
    tlabel.font = UIFont.boldSystemFontOfSize(17) //UIFont(name: "Helvetica", size: 17.0)
    tlabel.backgroundColor = UIColor.clearColor()
    tlabel.adjustsFontSizeToFitWidth = true
    tlabel.textAlignment = .Center
    self.navigationItem.titleView = tlabel
1
Unit Testing

Le titre n'est pas centré dans la barre de navigation elle-même. Il est centré entre les boutons de gauche et les boutons de droite de la barre de navigation. Cela signifie que si vous avez un gros bouton à gauche, le titre sera déplacé vers la droite.

Vous pouvez changer le centre en ajoutant une contrainte centrée à votre titre puis en le modifiant pour qu'il soit vraiment au centre de la barre de navigation:

// Position the title in the middle of the navbar and not in the middle of buttons
fileprivate func centerTitle () {
    if let navigation = self.navigationController {
        let titleMiddle = navigation.navigationBar.convert(titleViewLabel.frame, from: titleViewLabel.superview).midX
        let diff = navigation.navigationBar.center.x - titleMiddle
        constraintTitleViewCentered.constant += diff
    }
}
0
CedricSoubrie