web-dev-qa-db-fra.com

Changer la largeur d'un UIBarButtonItem dans un UINavigationBar

Je crée un UIBarButtonItem et l'ajoute à ma barre de navigation comme suit:

(void)viewDidLoad { 

   ...

   // Add the refresh button to the navigation bar
   UIButton *refreshButton = [UIButton buttonWithType:UIButtonTypeCustom];
   [refreshButton setFrame:CGRectMake(0,0,30,30)];
   [refreshButton setImage:[UIImage imageNamed:@"G_refresh_icon.png"] forState:UIControlStateNormal];
   [refreshButton addTarget:self action:@selector(refreshData) forControlEvents:UIControlEventTouchUpInside];
   UIBarButtonItem *refreshBarButton = [[[UIBarButtonItem alloc] initWithCustomView:refreshButton] autorelease];
   self.navigationItem.leftBarButtonItem = refreshBarButton;
}

Cela semble correct lorsque je cours, mais je peux sélectionner l’élément du bouton de barre en appuyant sur la barre de navigation de x = 0 à environ 100. Comment puis-je régler la zone sélectionnable sur une largeur de 30 px?

iosuinavigationbaruibarbuttonitemuinavigationitem
16
Darren

Une approche que vous pourriez envisager consiste à créer une UIBarButtonItem en appelant initWithCustomView:. Ce n’est pas idéal dans la mesure où vous n’obtenez pas les états "sélectionnés" hors de la boîte ET vous devez composer votre arrière-plan avec bordure (si vous voulez que cela ressemble) avec votre image de bouton, mais avec cela vous pouvez plus directement spécifier un cadre pour votre image. élément de barre d'outils. Si vous utilisez du texte pour votre titre au lieu d'images, vous devrez peut-être ajouter une image d'arrière-plan en tant que sous-vue. Quoi qu'il en soit, j'ai le même problème en ce moment et ce code fonctionne pour moi:

UIImageView *imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"button-image.png"]];
imageView.frame = CGRectMake(0, 0, 43, 30);

UIBarButtonItem *barButtonItem = [[UIBarButtonItem alloc] initWithCustomView:imageView];

self.navigationItem.leftBarButtonItem = barButtonItem;

À l’heure actuelle, c’est le seul moyen que je connaisse de limiter le dimensionnement automatique de la variable UIBarButtonItems ajoutée à la variable UINavigationController de navigationItem.

Ou essayez la solution de Maggie, qui est plus complète que la mienne .

12
Aaron

Depuis iOS 11, le simple fait de définir un cadre pour customView et non pas UIBarButtonItem ne fonctionnera pas (comme suggéré dans réponse acceptée ). Il semble que l'ajout d'Autolayout à UIBarButtonItem remplace le cadre défini . Ce message m'a donné l'idée:

navigationItem.leftBarButtonItem?.customView = yourCustomButtonView
let desiredWidth = 35.0
let desiredHeight = 35.0

let widthConstraint = NSLayoutConstraint(item: yourCustomButtonView, attribute: .width, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1.0, constant: desiredWidth)
let heightConstraint = NSLayoutConstraint(item: yourCustomButtonView, attribute: .height, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1.0, constant: desiredHeight)

yourCustomButtonView.addConstraints([widthConstraint, heightConstraint])

Notez également qu'il est préférable que vous utilisiez UIButton en tant que CustomView car vous devez vous y fier pour déclencher l'action.

13
roxanneM

Vous pouvez le faire en déposant une image sur l'élément de bouton de barre du constructeur d'interface et en modifiant la largeur de la vue personnalisée à l'aide de ce code:

CGRect frame = self.navigationItem.leftBarButtonItem.customView.frame;
frame.size.width = 141;
self.navigationItem.leftBarButtonItem.customView.frame = frame;
6
odm

L'essentiel est de réaliser que vous modifiez la largeur de la vue personnalisée, plutôt que le UIBarButton lui-même.

Le code est donc:

CGRect resizedFrame = myBarButtonItem.customView.frame;
resizedFrame.size.width = myNewWidth;
myBarButtonItem.customView.frame = resizedFrame;

Vous devrez également déclencher le changement de présentation:

[myNavigationBar setNeedsLayout];

Tout cela va sans dire que la mise en page se fait avec le dimensionnement automatique et les cadres. Les incursions dans les barres de navigation avec la mise en page automatique n'ont donné aucun résultat. Voir ma question Mise en page automatique avec UINavigationBar et UIBarButtonItem . 

Désolé, je viens de me rendre compte que mon code est presque identique à @oscartzombie. Pas intentionnel! Je laisse cette réponse, car je pense que cela vaut la peine d'ajouter la mise en page et d'autres points, en plus d'expliquer sans référence à Interface Bulder ou à des images en particulier.

5
Max MacLeod

L'approche suivante a fonctionné, voir le code pour modifier la largeur et la hauteur du bouton et pour ajouter un élément d'action. 

UIButton *imageButton = [[UIButton alloc]initWithFrame:CGRectMake(0, 0, 22, 22)];
[imageButton setBackgroundImage:[UIImage imageNamed:@"message_button"] forState:UIControlStateNormal];
[imageButton addTarget:self action:@selector(messageButtonTapped) forControlEvents:UIControlEventAllEvents];
UIBarButtonItem *leftBarButtonItem = [[UIBarButtonItem alloc] initWithCustomView:imageButton];
self.navigationItem.leftBarButtonItem = leftBarButtonItem;

Remarque: La cible et l'action de UIBarButtonItem ne s'appliquent pas à la vue d'image.

5
Abdullah Saeed

Aucune de ces solutions ne fonctionnait pour moi et je suppose que le redimensionnement automatique remplace les dimensions que vous avez écrites dans le code.

après avoir créé le bouton de manière UIButton, écrivez le bloc de code suivant:

[self.navigationItem.rightBarButtonItem.customView.widthAnchor constraintEqualToConstant:mWidth].active = YES;
[self.navigationItem.rightBarButtonItem.customView.heightAnchor constraintEqualToConstant:mHeight].active = YES;
0
ACAkgul