web-dev-qa-db-fra.com

TabBarItems et définir leurs tailles d'image?

J'ajoute actuellement des images à chacun de mes éléments de la barre d'onglets. Une image que j’aime a une taille beaucoup plus grande que la surface de l’élément de barre. Lorsque je définis l'image de l'élément de barre dans le story-board et exécute l'émulateur ... le bouton de barre avec cette image couvre tout l'écran.

Maintenant, je pensais qu'il y avait un moyen automatique de permettre aux images de se redimensionner pour chaque bouton de la barre. Ce n'est malheureusement pas le cas. Existe-t-il un moyen, lorsque la barre d'onglets se charge, de redimensionner les images dans chaque barre d'onglets?

50
MooCow

Vous devez préparer 3 icônes d’image pour chaque élément de la barre d’onglet (1x, 2x et 3x) .

Commencez par créer le pixel 3x à 75w 75h (maximum: 144 x 96) et enregistrez-le sous [email protected].

Puis redimensionnez-le à 50w 50h pixels (maximum: 96 x 64) et enregistrez-le sous [email protected].

Enfin redimensionnez-le à 25w 25h pixels (maximum: 48 x 32) et enregistrez-le sous iconTab0.png.

Maintenant, tout ce dont vous avez besoin est de sélectionner ces 3 images dans votre Finder et de les faire glisser vers vos ressources d’image.

Directives d'interface humaine

enter image description here

enter image description here

91
Leo Dabus

Une autre option consiste à créer une image vectorielle PDF. Ce que vous faites est de redimensionner votre image vectorielle à la plus petite taille (22x22) et de l’exporter au format PDF. Vous pouvez le faire avec Adobe Illustrator, Sketch et de nombreux autres outils d’édition d’images vectorielles.

Ensuite, vous ajoutez le fichier PDF) à votre dossier d’actifs et, dans l’Inspecteur des propriétés, réglez "Facteurs d’échelle" sur "Vecteur unique".

47
Mark Moeykens

Assez facile à faire avec ios8. Dans Storyboard, cliquez sur chaque élément de l'onglet (le contrôleur individuel de l'onglet dont vous souhaitez modifier l'image.

Définissez le insets en conséquence ...

enter image description here

Il y a ce problème si. Fixé avec this .

24
Ryan Walton

@LeoDabus a fourni une bonne réponse.

Pour redimensionner l'image, une méthode simple et efficace consiste à:

  1. Ajoutez votre image aux cases 1x, 2x, 3x du dossier Assets.xcassets.
  2. Ensuite, cliquez sur l'image dans chaque case et appuyez deux fois avec le doigt sur le trackpad/clic droit pour afficher les options suivantes:

Open with External Editor

  1. Cliquez sur 'Ouvrir avec l'éditeur externe' pour accéder à Aperçu.
  2. Cliquez sur 'Outils' puis 'Ajuster la taille'.

Adjust Size

  1. Ajustez la taille de votre image en fonction de vos besoins. Cliquez ensuite sur "Enregistrer" et fermez la fenêtre. L'image dans Xcode devrait être mise à jour automatiquement.
14
Colin Hong