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

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:

¿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.

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.

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)

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.

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

Referencia: https://developer.apple.com/ios/human-interface-guidelines/graphics/custom-icons/[https://developer.apple.com/ios/human-interface-guidelines/graphics/custom-icons /] .

Por tanto, el tamaño 50x50 es una buena elección.

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

¡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