Quelle doit être la taille d'une image UIBarButtonItem?

130

Je cherche à créer mes propres boutons personnalisés Trier par date et Trier par numéro que je prévois de placer dans la barre de navigation en tant que bouton droit.

Quelle doit être la taille de mon image pour remplir correctement l'espace - la page de documentation UIBarItem ne répertorie rien sur la taille de l'image.

— Epsilon Prime
source

237

À partir d'iOS 11, les directives de l'interface humaine suggèrent que les glyphes comportent environ 25 × 25 points dans les barres d'outils et les barres de navigation, jusqu'à un maximum d'environ 28 points. (Et le HIG devrait certainement être dans vos signets si vous travaillez sur des applications iOS!)

Cela se traduirait par des images de 25 pixels carrés pour les appareils plus anciens comme l'iPad 2 / Mini, 50 pixels carrés pour la plupart des appareils actuels comme l'iPhone 8 ou l'iPad et 75 pixels carrés pour les appareils Retina HD (l'iPhone 6/7/8 Plus ou l'iPhone X). Les catalogues d'actifs aideront énormément à garder les différentes tailles d'actifs organisées (et Xcode peut même les générer à partir de sources vectorielles de nos jours).

— Sixten Otto
source

1

Merci, exactement ce que j'avais besoin de savoir combiné avec un pointeur vers un excellent document. Favoris.

— Epsilon Prime

1

Je souhaite que le Mobile HIG indique quelque chose de plus utile que "environ 20x20". Si vous utilisez une image d'exactement 20x20px, elle ne sera en fait pas mappée 1: 1, et le bouton ne sera pas carré.

— Clafou

1

Clafou, parlez-vous d'une image pour le contenu du bouton (comme cette question est), ou à utiliser comme arrière-plan du bouton (avec l'API de personnalisation d'apparence)? Avez-vous posé une question à ce sujet?

— Sixten Otto

Vous pouvez voir certaines des différentes tailles

— utilisées

1

Pour iOS 7, consultez la réponse de @ hashier.

— Rudolf Adamkovič

46

Les directives de l'interface humaine vous le disent depuis iOS7:

Quel que soit le style visuel de l'icône, créez une icône de barre d'outils ou de barre de navigation dans les tailles suivantes:

Environ 44 x 44 pixels

Environ 22 x 22 pixels (résolution standard)

Voici une excellente matrice de toutes les tailles nécessaires pour les ressources pour toutes les plates-formes

— hashier
source

19

Oui, Apple suggère d'utiliser des images avec une taille de 22px, 44px et 66px UIBarButtonItems, mais si vous utilisez des icônes préinstallées comme l'icône de signet, elle est dimensionnée par 25px 50px et 75px pour 1x, 2x et 3x respectivement.

Voici 2 icônes au format UIToolbar. Sur la droite se trouve l'icône du signet système d'Apple et sur la gauche mon icône personnalisée.

Voici mon icône personnalisée de taille 22px-44px-66px:

Et ici 25px-50px-75px:

Donc, si vous utilisez des icônes personnalisées et système dans une barre d'outils, je suggérerais d'utiliser une mise à l'échelle 25px-50px-75px, ou vos icônes personnalisées seront plus petites. En fait, j'utilise toujours une mise à l'échelle 25px-50px-75px, cela semble mieux sur les barres d'outils, comme pour moi.

— Peter Tretyakov
source

1

Merci pour ça! J'étais sûr que certaines des icônes comme celle des signets sont un peu plus grandes que la taille

— 22-44-66px

1

J'ai essayé 25px-50px-75px et c'est vraiment joli. pas petit pas grand.

— MBH

-4

Facile: incluez vos images dans Assets.xcassets.

Comment?

Cliquez sur Assets.xcassets
Cliquez sur l'icône + puis cliquez sur "Nouvel ensemble d'images"
Faites glisser et déposez votre image dans l'emplacement 3x
Renommer l'ensemble d'images
Dans le BarButton, vous pouvez utiliser ce nom dans le champ "Image"

— Jobima
source

3

Comment cela répond-il à la question sur la taille?

— Andrea Lazzarotto

@AndreaLazzarotto bon point mais cette réponse comprend des informations importantes exclues des autres réponses

— paul