¿Qué tamaño deben tener las imágenes de TabBar?

99

Tengo iconos para una barra de pestañas de tamaño 100.

Verifiqué las Pautas de interfaz humana de Apple de 2013 y dice que el tamaño de la imagen debería ser 30x30/ 60x60.

Pero como la altura del controlador de la barra de pestañas es 50, mantuve el tamaño de la imagen en 50x50.

Ahora, cuando ejecuto el proyecto, veo el diseño feo a continuación:

ingrese la descripción de la imagen aquí

¿Alguna idea de qué tamaño de imágenes debo usar para que el diseño sea perfecto?

Nota: No estoy escribiendo texto también (por ejemplo, Inicio, Búsqueda, etc.). El texto del botón de pestaña está en la propia imagen.

Fahim Parkar
fuente
1
"Tengo iconos para una barra de pestañas de tamaño 100". ¿Quiso decir 50?
Blaszard

Respuestas:

112

30x30 son puntos, lo que significa 30px @ 1x, 60px @ 2x, no en algún punto intermedio. Además, no es una buena idea incrustar el título de la pestaña en la imagen; obtendrá resultados de localización y accesibilidad bastante deficientes.

garrettmurray
fuente
3
Sabía esto, pero si quiero palabras dentro de la imagen misma, ¿qué se puede hacer?
Fahim Parkar
Si está planeando crear una UITabBar totalmente personalizada, probablemente debería hacer eso, en lugar de usar imágenes para la versión estándar de UIKit. De lo contrario, creo que te quedarás con un espacio muerto en la parte inferior.
garrettmurray
hmmm, eso está sucediendo ... Le pediré al diseñador que
cree
Gracias amigo. Esta fue una gran y rápida ayuda.
Felipe
208

De acuerdo con las Pautas de interfaz humana de Apple :

@ 1x: aproximadamente 25 x 25 (máx .: 48 x 32)

@ 2x: aproximadamente 50 x 50 (máx .: 96 x 64)

@ 3x: aproximadamente 75 x 75 (máx .: 144 x 96)

rsc
fuente
Sí, esto es correcto según Apple. Consulte el siguiente enlace para obtener más información developer.apple.com/library/ios/documentation/UserExperience/…
Chamath Jeevan
genial, pero ¿cómo es posible hacer una imagen tan pequeña sin desenfocar?
niX
2
Desde entonces, ha sido actualizado a 23x23 (para cuadrados) o 25x25 (para imágenes circulares) ( developer.apple.com/ios/human-interface-guidelines/… )
Seop Yoon
Seop, puedes actualizar mi respuesta para reflejar la información más reciente. Pero noté que dije "alrededor de 25", por lo que consideraría que 23 está dentro de ese rango.
rsc
Principalmente utilizo glifos cuadrados como el ícono de una casa, me alegra que @SeopYoon lo haya señalado. Usaré 23x23 para el tamaño del icono de la barra de pestañas.
Cons Bulaquena
44

De acuerdo con las últimas pautas de interfaz humana de Apple:

En orientación vertical, los iconos de la barra de pestañas aparecen encima de los títulos de las pestañas. En orientación horizontal, los iconos y títulos aparecen uno al lado del otro. Dependiendo del dispositivo y la orientación, el sistema muestra una barra de pestañas regular o compacta. Su aplicación debe incluir iconos de barra de pestañas personalizados para ambos tamaños.

ingrese la descripción de la imagen aquí

ingrese la descripción de la imagen aquí

Le sugiero que utilice el enlace anterior para comprender el concepto completo. Porque Apple actualiza su documento a intervalos regulares

Mihir Oza
fuente
2
Esto debería recibir más votos, ya que es su nueva guía.
Seop Yoon
Para obtener instrucciones sobre cómo configurar un ícono diferente para una barra de pestañas regular o compacta, vea esta respuesta: stackoverflow.com/questions/49492229/tab-bar-icon-size/…
Marián Černý
2

Según mi práctica, uso el 40 x 40 para el ícono de elemento de la barra de pestañas estándar del iPad, 80 X 80 para retina.

De la referencia de Apple. https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/BarIcons.html#//apple_ref/doc/uid/TP40006556-CH21-SW1

Si desea crear un ícono de barra que parezca estar relacionado con la familia de íconos de iOS 7, use un trazo muy delgado para dibujarlo. Específicamente, un trazo de 2 píxeles (alta resolución) funciona bien para iconos detallados y un trazo de 3 píxeles funciona bien para iconos menos detallados.

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) Independientemente del estilo visual del icono, cree un icono de barra de pestañas en los siguientes tamaños:

Aproximadamente 50 x 50 píxeles (96 x 64 píxeles como máximo) Aproximadamente 25 x 25 píxeles (48 x 32 píxeles como máximo) para resolución estándar

firelyu
fuente
-3

¡Aproveche primero antes de usar los códigos, por favor! Cree una imagen que cubra completamente todo el elemento de la barra de pestañas para cada elemento. Esto es necesario para utilizar la imagen que creó como botón de elemento de la barra de pestañas. Asegúrese de que la relación alto / ancho también sea la misma para cada elemento de la barra de pestañas. Luego:

UITabBarController *tabBarController = (UITabBarController *)self;
UITabBar *tabBar = tabBarController.tabBar;
UITabBarItem *tabBarItem1 = [tabBar.items objectAtIndex:0];
UITabBarItem *tabBarItem2 = [tabBar.items objectAtIndex:1];
UITabBarItem *tabBarItem3 = [tabBar.items objectAtIndex:2];
UITabBarItem *tabBarItem4 = [tabBar.items objectAtIndex:3];

int x,y;

x = tabBar.frame.size.width/4 + 4; //when doing division, it may be rounded so that you need to add 1 to each item; 
y = tabBar.frame.size.height + 10; //the height return always shorter, this is compensated by added by 10; you can change the value if u like.

//because the whole tab bar item will be replaced by an image, u dont need title
tabBarItem1.title = @"";
tabBarItem2.title = @"";
tabBarItem3.title = @"";
tabBarItem4.title = @"";

[tabBarItem1 setFinishedSelectedImage:[self imageWithImage:[UIImage imageNamed:@"item1-select.png"] scaledToSize:CGSizeMake(x, y)] withFinishedUnselectedImage:[self imageWithImage:[UIImage imageNamed:@"item1-deselect.png"] scaledToSize:CGSizeMake(x, y)]];//do the same thing for the other 3 bar item
James
fuente