web-dev-qa-db-fra.com

réglage de l'image pour UIBarButtonItem - image étendue

Lorsque j'essaie d'utiliser "initWithImage" de UIBarButtonItem pour initialiser une image personnalisée de la barre de navigation, elle apparaît délavée et étendue contre une barre de navigation noire. Voici comment je le crée:

UIBarButtonItem *button = [[UIBarButtonItem alloc] initWithImage:[UIImage imageNamed:@"gear.png"] style:UIBarButtonItemStyleBordered target:self action:@selector(showSetting:)];

Voici à quoi cela ressemble:

enter image description here

Une idée si c'est un problème avec l'image? Je l'ai eu à partir d'un ensemble d'icônes que j'ai achetées.

iosuinavigationbaruibarbuttonitem
25
Z S

Les images affichées sur les éléments de bouton de la barre sont «dérivées» de l'image source (le rendu utilise uniquement les valeurs du canal alpha pour le rendu, mais tout semble correct dans votre image). Ce n’est peut-être pas la bonne taille - vous devrez peut-être ouvrir le fichier image et le rogner à la bonne taille. 

Vous pouvez également essayer de déterminer si le paramètre imageInsets property (hérité de UIBarButtonItem from UIBarItem ) peut être utilisé pour ajuster la taille de manière à empêcher son étirement.

Doco sur les images d'élément de barre indique ce qui suit:

Les images affichées sur la barre sont dérivées de cette image. Si cette image est trop grande pour tenir sur la barre, elle est redimensionnée pour s'adapter. En règle générale, la taille d'une image de barre d'outils et de barre de navigation est de 20 x 20 points.

12
gamozzii

Pour ce faire, la meilleure solution consiste à créer un bouton, à définir son image d'arrière-plan et à définir son action. Ensuite, un UIBarButtonItem peut être créé en utilisant ce bouton comme vue personnalisée. Voici mon exemple de code:

 UIButton *settingsView = [[UIButton alloc] initWithFrame:CGRectMake(0, 0, 61, 30)];
[settingsView addTarget:self action:@selector(SettingsClicked) forControlEvents:UIControlEventTouchUpInside];
[settingsView setBackgroundImage:[UIImage imageNamed:@"settings"] forState:UIControlStateNormal];
UIBarButtonItem *settingsButton = [[UIBarButtonItem alloc] initWithCustomView:settingsView];
[self.navigationItem setRightBarButtonItem:settingsButton];
31
Jeff Schmitz

Je sais que cette question a déjà une réponse cochée. Mais je me suis précipité vers cela aujourd'hui et j'ai pensé que j'offrirais ma réponse de toute façon. La réponse cochée ci-dessus m'a aidé, mais il a également fallu quelques essais supplémentaires pour comprendre ce qui se passait réellement.

L'image du bouton est réduite uniquement dans l'axe des x et non dans l'axe y. c'est parce qu'il est trop grand pour le bouton et qu'il le réduit pour l'ajuster. Mais cela ne le réduit pas proportionnellement. Seulement sur la verticale. Donc, il semble étiré. Ce n'est pas réellement étiré - ce qui implique un élargissement de celui-ci. Au lieu de cela, la hauteur est réduite. Je pense qu'il est important de connaître la différence pour comprendre pourquoi cela se produit et comment y remédier.

enter image description here

J'ai fait la même chose que l'OP. En pensant que je soutiens la rétine, j'ai créé mon icône 40x40. Le mien était une coche verte avec un canal alpha. Il a été complété avec des pixels vierges pour être 40x40. L'application l'a redimensionnée pour s'adapter à la hauteur disponible du bouton. Mais la largeur est restée la même. Donc, il est devenu quelque part dans la gamme de 40x30 ou 40x20. Je pense que le bouton peut gérer une icône 30 haut, mais alors il est un peu trop grand pour la boîte IMHO.

L'opérateur a réduit le bouton à 30x30, ce qui l'a empêché d'écraser davantage. Mais ce n'est pas la meilleure solution. Parce que ce n'est pas vraiment un bouton de la rétine quand vous faites cela. Il est rétréci puis remonté sur la rétine.

La bonne réponse est de nommer votre version de 40 pixels avec le @ 2x, puis de créer une version en demi-format (20 pixels de hauteur) et de l'enregistrer sans le @ 2x. La largeur peut être n'importe quoi. Puis chargez avec imageNamed: sans spécifier le @ 2x. Il utilisera le png approprié pour une rétine ou un autre appareil.

La prochaine chose qui m'est arrivée était alors que le cadre du bouton était trop petit. J'ai donc augmenté la taille de ma toile en psd pour ajuster le png à une largeur de 80 afin de rendre le bouton légèrement plus large et plus facile à taper.

10
badweasel

stretch

J'ai le même numéro étiré pour mon image 40x40 lorsque j'ai défini l'image d'arrière-plan pour leftBarButtonItem 

UIBarButtonItem *backButton = [UIBarButtonItem new];
[backButton setBackButtonBackgroundImage:[UIImage imageNamed:@"back_icon"] forState:UIControlStateNormal barMetrics:UIBarMetricsDefault];

self.navigationItem.leftBarButtonItem = backButton;

Mais mon problème a eu résolu avec le code suivant

resolved

UIBarButtonItem *backButton = [[UIBarButtonItem alloc] initWithImage:[UIImage imageNamed:@"back_icon"] style:UIBarButtonItemStylePlain target:self action:@selector(handleBack:)];

self.navigationItem.leftBarButtonItem = backButton;

et le même résultat si UIBarButtonItemStyleBordered est utilisé.

4
zeeawan

Réglez la taille d'image correcte: @ 1x = 22px, @ 2x = 44px @ 3x = 88px en premier.

Ensuite

let leftBarButtonItem = UIBarButtonItem(image: yourUIImage, style: .plain, target: self, action: #selector(action))
leftBarButtonItem.tintColor = UIColor.red
navigationItem.leftBarButtonItem = leftBarButtonItem

ou

let btn = UIButton(type: .custom)
btn.addTarget(self, action: #selector(contactMe), for: .touchUpInside)
btn.setImage(#imageLiteral(resourceName: "open"), for: .normal)
2
William Hu

Pour ceux qui ont rencontré ce problème d'étirement d'élément de barre d'outils dans iOS 11, il apparaît que la version @ 2x de votre image est désormais requise pour restituer son cadre et/ou ses limites.

Donc, si vous avez un code comme celui-ci, vous ajoutez une image personnalisée UIBarButtonItem comme ceci:

UIButton *tagsBtn = [UIButton buttonWithType:UIButtonTypeCustom];
tagsBtn.bounds = CGRectMake( 0, 0, 40, 40);
[tagsBtn setImage:[UIImage imageNamed:@"tags.png"] forState:UIControlStateNormal];
tags = [[UIBarButtonItem alloc] initWithCustomView:tagsBtn];
[tagsBtn addTarget:self action:@selector(tags:) forControlEvents:UIControlEventTouchUpInside];

[bottomToolbar setItems:[NSArray arrayWithObjects:flexibleSpace,tags,flexibleSpace,nil]];

Ensuite, vous aurez besoin d'une étiquette [email protected] 80x80, même si votre image tags.png est 80x80. Renommer simplement tags.png en [email protected] redimensionnerait l'image au format 40x40 comme avant iOS 11 sans changer de code, ou simplement ajouter [email protected] à votre projet.

1
whyoz