¿Qué tan grande debe ser una imagen UIBarButtonItem?

130

Estoy buscando crear mis propios botones personalizados Ordenar por fecha y Ordenar por número que planeo colocar en la barra de navegación como el botón derecho.

¿Qué tan grande debe ser mi imagen para llenar el espacio adecuadamente? La página de documentación de UIBarItem no enumera nada sobre el tamaño de la imagen.

ios uikit uibarbuttonitem uibaritem Epsilon Prime
fuente

Respuestas:

236

A partir de iOS 11, las pautas de la interfaz humana sugieren que los glifos tengan aproximadamente 25 × 25 puntos en las barras de herramientas y barras de navegación, hasta un máximo de aproximadamente 28 puntos. (¡Y el HIG definitivamente debería estar en tus marcadores si estás trabajando en aplicaciones iOS!)

Eso se traduciría en imágenes de 25 píxeles cuadrados para dispositivos más antiguos como iPad 2 / Mini, 50 píxeles cuadrados para la mayoría de los dispositivos actuales como iPhone 8 o iPad y 75 píxeles cuadrados para dispositivos Retina HD (iPhone 6/7/8 Plus o iPhone X). Los catálogos de activos ayudarán enormemente a mantener organizados los diferentes tamaños de activos (y Xcode incluso puede generarlos a partir de fuentes de vectores en estos días).

Sixten Otto
fuente
1
Gracias, exactamente lo que necesitaba saber combinado con un puntero a un gran documento. Marcado como favorito
Epsilon Prime
1
Sin embargo, me gustaría que el Mobile HIG dijera algo más útil que "aproximadamente 20x20". Si usa una imagen de exactamente 20x20px, en realidad no se asignará 1: 1, y el botón no será cuadrado.
Clafou
1
Clafou, ¿estás hablando de una imagen para el contenido del botón (como esta pregunta), o para usarla como fondo del botón (con la API de personalización de apariencia)? ¿Has publicado una pregunta sobre esto?
Sixten Otto
Puede ver algunos de los diversos tamaños que usa Apple mirando las imágenes que Apple tiene aquí: developer.apple.com/library/ios/#documentation/uikit/reference/…
JasonZ
1
Para iOS 7, consulte la respuesta de @ hashier.
Rudolf Adamkovič
46

Las Pautas de la interfaz humana te dicen esto desde iOS7:

Independientemente del estilo visual del icono, cree una barra de herramientas o un icono de barra de navegación en los siguientes tamaños:

Aproximadamente 44 x 44 píxeles

Aproximadamente 22 x 22 píxeles (resolución estándar)

Aquí hay una gran matriz de todos los tamaños necesarios para recursos para todas las plataformas

más hashier
fuente
19

Sí, Apple sugiere usar imágenes con un tamaño de 22px, 44px y 66px UIBarButtonItems, pero si usa íconos preinstalados como el ícono de marcador, tiene un tamaño de 25px 50px y 75px para 1x, 2x y 3x respectivamente.

Aquí hay 2 iconos en UIToolbar. A la derecha está el ícono de marcador del sistema de Apple y a la izquierda mi ícono personalizado.

Aquí mi ícono personalizado tamaño 22px-44px-66px:

ingrese la descripción de la imagen aquí

Y aquí 25px-50px-75px:

ingrese la descripción de la imagen aquí

Entonces, si usa iconos personalizados y del sistema en una barra de herramientas, sugeriría usar una escala de 25px-50px-75px, o sus iconos personalizados serán más pequeños. De hecho, siempre uso la escala 25px-50px-75px, se ve mejor en las barras de herramientas, en cuanto a mí.

Peter Tretyakov
fuente
1
¡Gracias por eso! Estaba seguro de que algunos de los íconos como los marcadores uno son un poco más grandes que el tamaño
22-44-66px
1
He intentado 25px-50px-75px y realmente se ve bien. no pequeño no grande
MBH
-4

Fácil: incluya sus imágenes en Assets.xcassets.

¿Cómo?

  • Haga clic en Assets.xcassets
  • Haga clic en el icono + y luego haga clic en "Nuevo conjunto de imágenes"
  • Arrastra y suelta tu imagen en la ranura 3x
  • Cambiar el nombre del conjunto de imágenes
  • En el BarButton puede usar este nombre en el campo "Imagen"
Jobima
fuente
3
¿Cómo responde esto a la pregunta sobre el tamaño?
Andrea Lazzarotto
@AndreaLazzarotto buen punto, pero esta respuesta incluye información importante omitida de las otras respuestas
Paul